使い勝手向上委員会 Movable Type 4 でオシャレな表を作りたい(Tablecloth)

| | コメント(0) | トラックバック(0)

最近は、猛烈にCSSの勉強をしている。

XOOPSやMovableTypeなどを設置して、テストすることが多いのですが、借り物のデザインだったら、自分の環境に合わせてちょこちょこっとイジる程度で済んでしまいます。

しかし、最近は、ちょっとしたホームページを作る機会があったので、真剣に勉強することにした。

また、それにあわせて、MovableTypeも人より少しだけオシャレちゃんにしたいのも動機の一つです。

それでは、サンプルとして、下記に欲しいものリストを記載してみようと思います。

欲しいものリスト

順位 項目 細目 数量 単価 合計 摘要
1 マンション 沖縄に 1 30,000,000 30,000,000 絶対買えない
2 面白グッズ Apple ipod touch(32GB) 1 59,800 59,800 副業で買うぞ
3 液晶テレビ シャープ 1 300,000 300,000 そのうち
4 健康グッズ 鳥インフルエンザウイルスSARS
ウイルス対策用マスク
100 1,050 105,000 買いだめする必要ある
5 デジカメ SIGMA DP1 1 98,000 98,000 カッコイイ
6 ストーブ 灯油ストーブ 1 30,000 30,000 タンク10リットル
7 カメラレンズ PENTAX
FA43mmF1.9 Limited
シルバー
1 69,500 69,500 ほしーい
8 バイク HARLEY-DAVIDSON
VRSCDX
1 2,341,000 2,341,000 いいねー
9 時計 ROREX
ミルガウス
1 1,000,000 1,000,000 いつかは・・・
10 面白グッズ マジコン M3 2 6,000 12,000 ヤルカナー

 

表をマウスで選択してみてください

メチャクチャいいですよね。

それでは、忘れないように記載しておこう。

 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の記事を書く際、「本文」であれば問題ないのですが、「続き」の方の表が反映されないことが分かりました。

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

トラックバック(0)

このブログ記事を参照しているブログ一覧: 使い勝手向上委員会 Movable Type 4 でオシャレな表を作りたい(Tablecloth)

このブログ記事に対するトラックバックURL: http://style.customplan.info/system/mt-tb.cgi/51

コメントする


画像の中に見える文字を入力してください。

ADs by Google

アーカイブ

最近のコメント

最近のトラックバック