• レイアウト
• お気に入りCSS環境
• 画像挿入の簡素化
  

せっかく、lightboxのスライドショーの機能として写真を順番に表示させることが出来るので、画像のサムネイルを一覧表示させられるかやってみました。

画像挿入時のファイルオプションの設定

• ブログ記事に画像を表示するにチェックする
• サムネイルを利用にチェックする（幅：　160　ピクセル）
• 位置は、左寄せ

※ポップアップウィンドウで元の大きさを画像にリンクには、チェックしない

始めは画像の位置を中央にしたり、横幅を代えてみましたが、私の環境では、「幅160px」の「左寄せ」に統一することで、キレイにうまく回り込ませることが出来ました。

左寄せの標準状態では、CSSで上0,右10px,下10px,左0の余白が設定されてますので、右寄せよりレイアウト的には良いのではないでしょうか。

ところで、MovableTypeは特別CSSをいじらなくても、勝手に回り込んでくれるのですね。

知りませんでした。

サムネイル表示まではうまくいきましたので、今度は、lightboxで表示させた際に、同一グループでスライドショー表示をさせられるか試してみました。

htmlモードのおまじない方法

予めブログ記事に写真を貼り付けたあと、htmlモードで「おまじない」を記入してやればすぐに出来てしまします。

a href="http://・・・・・/" rel="lightbox"

a href="http://・・・・・/" rel="lightbox[group]"

rel="lightbox" の後ろに半角で　[group]　と記載するだけで出来てしまいます。

もし、これが面倒であれば、lightboxの設定の際に、上記[group]を入れてしまっても支障ないと思います。 

※[　]内は何を入れても機能します。今回はgroupとしました

それでは、実際に設置したところをご紹介します。

写真を表示させて、写真の右半分側でマウスをクリックすると次のページに行きます。

逆に、左半分側でマウスをクリックすると戻ります。

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

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

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

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

欲しいものリスト

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

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

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

いろいろ調べていると、テーブルをスーパーでオシャレな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の記事を書く際、「本文」であれば問題ないのですが、「続き」の方の表が反映されないことが分かりました。

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

しかし、年々ハードウェアの向上に伴って、ソフトウェアもそれにあった環境にレベルアップしている。当然、今までのパソコンに新しいソフトを入れても、スペック的には問題ないのだが、レスポンスが非常に悪い。

メインで使っているのは、今でも現役の（「ThinkPad X31）のノートパソコンだ。購入は2004年ですが、ウェブ、メール、ウェブサイト構築、音楽鑑賞などに使用するには全く問題がない。

エンコードやテレビ録画などの重い作業には、デスクトップ（Celeron2.4）を使用しているが、今のところ何とかガマン出来るレベル。

その他にも、自宅サーバーとして使っているパソコンは、省電力を理由に「MINI-ITX」という規格のマザーボードを使った製品で、中古パーツを集めて作ったものがあるが、サーバー用途なので、重い作業は全くしない。

NASハード（LANDISK）を2台設置しているのだが、1台はノーマルでデータ用、1台はDebian化して、音楽ジュークボックス用に使用している。

また、ネットワークプレイヤー（IO-DATA AVLP2/DVDG-2）があるので、予めNASハードに入れてある音楽や動画を再生するのに使用している。

いったい何が足りないか！？

今の不満は、デジカメで撮った「RAWのデータの処理」と「液晶モニターの発色が悪さ」。また、大きな画像データの加工のモタツキで、写真を撮る楽しみが半減している。

また、数年前に買ったビデオも撮れるデジカメ（SANYO Xacti DMX-C5）の映像も、撮ったままで放置状態になっている。

これではいけない！！　これらの理由で購入タイミングがやってきたようだ。

当初は、安易にiMac（24インチ MA878J/A）を考えていたのですが、調べるうちに、製品単価の割高感と私の環境では使い勝手の向上が望めないことが分かり、またもやMACを選ぶことが出来なかった。

やはり、いつの時代もすれ違う運命にあるようだ。

それでは、パソコンに対しての要望を整理しておこうと思う。

1. ケースにこだわる
2. 静音仕様
3. そこそこハイスペックなCPU
4. 将来性

※数値は優先順位

そして、一番の条件は、「妥協」しないこと。

しばらく、自作の世界から遠のいていたので、各々の研究から始めることに。

結果として、今の環境を改善するには、何も最上級を狙う必要は全くないのですが、コストパフォーマンスや将来性を考えると選択肢は自ずと見えてきます。

ショップオリジナルなどは、安くて良いのですが、外観がダサくて購入意欲が沸かない。そもそも、パソコンは縦置きが主流のようですが、私は今までの自作パソコンのほとんどが横置き、または横にも置ける仕様のものを使っていました。

しかし、今回は、縦置き。それもミドルクラスのタワーを選択することを決めていたのです。

それは、小さいから電気を喰わないとか、小さいから騒音がうるさくないという考えは間違った発想でして、熱が逃げづらい筐体は、結局ファンがフル稼働していたし、省スペースなのでマメな掃除もしていませんでした。

例えるならば、市内を毎日走るため軽自動車を買ったのだが、タダの足として使用しているため、愛着が沸かなく、メンテもそこそこしかしないのでガタが早い。とでも言っておきましょう。

今度は、筐体はメンテナンスがしやすいよう大型のケースで、静音への配慮をしながらも、いざというときは、余裕の走りでユーザーを納得させられる魅力の持ったパソコンを選択したいと考えています。

それでは、まずは、購入スペックと「ショップ」「自作」での金額の違いを表にしてみました。

この中で、譲れないのは、「CPU」と「ケース」。

それにあわせて、金額も税込み14万以内。

条件として譲れない「Antec」の「P182」を扱っているショップは多々ありますが、カスタマイズでこのケースを取り入れているのは2店ほど（平成20年2月現在）。

自作の算出は、あるショップで取り扱っている金額を参考に算出してみました。

価格COMの最安値だと、非現実的なので目安となると思います。

こうしてみると、どちらも同じような価格になりますが、パーツを単品で集める時間が面倒なことと、組み立てる時間。

更には、自作だと保証がないため、今回は、ショップのカスタマイズにて注文をすることに心が揺れています。

※ここで言う保証は初期不良など一般的なもの

ただし、数点気になることがあります。

皆さんの中には、このパーツが選択出来たらいーのになーとか、これいらないんだけどなーなど考えたことがあると思います。

私もその一人だったので、今回は思い切ってその思いをショップに電話で伝えてみました。

変更箇所は、OSの交換とマウス＋キーボードセットの排除。

そうしたら、ネットカスタマイズでは出来ないが、電話注文は受け付けるとのこと。

こころよく受けてくれて大満足。

ショップ名はマズイかもしれない？？？ので伏せますね。

ショップ店員の方。どうもありがとう。