MovableTypeで、テーブルの装飾をCSSで行ってもいいんですが、細かくなるとチト面倒クサイ。

いろいろ調べていると、テーブルをスーパーでオシャレなjavascriptを公開しているところがありました。

• skuare.net

たった2行でテーブルの表を見やすくするjavascript「Tablecloth」

さっそく設置方法の手順を忘れないよう、以下にまとめておくことにしました。

今回は、私のブログ環境での設置方法ですので環境の違う方は読み替えて下さい。

• MovableType本体 : public_html/system/
• Tablecloth本体 : public_html/system/javascript/tablecloth/

Tableclothの設定手順

作業概要

1. Tableclothのダウンロード
2. ファイルの修正
3. tableclothファイルのアップロード
4. スタイルシートとJAVAを読み込む設定
5. サイトの再構築

Tableclothのダウンロード

http://cssglobe.com/lab/tablecloth/

ダウンロードファイルを解凍すると、下記の構成になっている。

[tablecloth]
　　　├[_notes]
　　　├tablecloth.css
　　　├tablecloth.js
　　　└tr_back.gif
 

ファイルの修正

解凍したファイルの中で修正する必要があるファイルは、tablecloth.jsだけ。

this.tablecloth = function(){
 
 // CONFIG
 
 // if set to true then mouseover a table cell will highlight entire column (except sibling headings)
 var highlightCols = false;
 
 // if set to true then mouseover a table cell will highlight entire row (except sibling headings)
 var highlightRows = true; 
 
 // if set to true then click on a table sell will select row or column based on config
 var selectable = true ;

変更するのは、緑色の部分。

trueにするとマウスで選択したときに反映されます。逆にfalseにすると反映しません。

highlightCols の所が行で、highlightRows が列に該当します。

最後のselectable がマウスで押すと、行と列それぞれ設定した部分が選択できます。

データのアップロード

[MovableType本体]の設置場所に、[javascript]フォルダを作り、その中に、さらに [tablecloth]フォルダを作り設置することにしました。

<[MovableType本体]>
 　　└[javascript]
　　　　　　└[tablecloth]
　　　　　　　　　　├[_notes]
　　　　　　　　　　├tablecloth.css
　　　　　　　　　　├tablecloth.js
　　　　　　　　　　└tr_back.gif
 

そのまま、[MovableType本体]に設置してもいいのだが、今後もjavascriptのプラグインを設置するかもしれないので、このように整理してみた。

スタイルシートを読み込む設定

スタイルシートを読み込む設定を行うには、テンプレートモジュール「ヘッダ」内に下記を追加する。

<script src="/system/javascript/tablecloth/tablecloth.js" type="text/javascript"></script>
<link media="screen" /system/javascript/tablecloth/tablecloth.css type="text/css" rel="stylesheet">

サイトの再構築

サイトを再構築し、表が反映されているか確認する。

今後の課題

無事、反映されたのですが、MovableTyleの記事を書く際、「本文」であれば問題ないのですが、「続き」の方の表が反映されないことが分かりました。

現在、無い頭をフル回転させて勉強中です。