写真サイトってわけではないので、画像表示に関しては比較的　無頓着だった。

この2カラムのテンプレートにする前は、横幅700pxの1カラムのテンプレート
を使っていた関係で、400×300くらいで表示することが多かったように思うし、
どうかすればそれ以上で表示していることもあった。

けどこのテンプレートでその画像サイズとなると　なんとなく窮屈な感じ。
それに下のエントリーのように、400×300サイズの画像を何枚も表示すると
ズズズーっと、はるか下までスクロールしないといけない。
それはあまりにも読者の方にとって親切ではないと　素直に反省。
まぁ、もっと前に気づけってな話だが。

しかも画像が大きすぎたりすれば確実にレイアウトは崩れる。
つか、実際に過去ログを見たら　無残な姿で崩れていた。

これはどうしたものか・・・
やはりサムネイルで表示？

サムネイル表示にしておけば、この先　テンプレートが変わっても影響されない。
特に最近ではテンプレートも種類が増えて、それはそれでありがたいのだけど、
ちょっといいなって思っても、画像の横幅は300ピクセルが限度、なんていうのが
ざらにある。
だから大きめの画像は今後はサムネイル表示にしておけば無難かも・・
でもそのままではあまりにも味気ない・・・

そこでちょいとぐぐってみたところ、
小粋空間様　/　Litebox 1.0 をブログに適用する
を発見。

ダウンロードページに飛んで(Litebox)早速設置してみた。
設置は驚くほど簡単。
各ブログ別に設置方法がわかりやすく解説されているので、
興味のある方はぜひお試しあれ！
書き換え部分のパス指定さえまちがえなければ、ほぼ失敗することはないと思う。
テンプレートの修正箇所がいくつかあるけれど、その中で
"body 要素の onload 属性に追加する方法"だと　なぜかスクリプトエラーになってしまう。
なので私は "＜/body＞ の直前に追加する方法" でやったら、すんなり成功。

画像表示がとてもかっこよくなって、私的には大満足。

●サムネイルの表示方法は以下の通り
＜a href="画像アドレス" rel="lightbox"＞＜img src="サムネイルの画像アドレス" width="○○" height="××" /＞＜/a＞
●グループ化するときはこちら
＜a href="画像アドレス" rel="lightbox"[共通する任意の文字]＞＜img src="サムネイルの画像アドレス" width="○○" height="××" /＞＜/a＞

このように記事に画像を設定するときrel属性値(rel="lightbox")を設定するのだけど、
いちいち手動でやるのはとても面倒。
が、ありがたいことに　それにもきちんと対応してくれている。
Lightbox JS の rel 属性を自動付与する

☆Serene Bach はこちら
sideblue weblog様 / [[sb2] Addrel v0.01

おかげさまで久々に満足度の高いカスタマイズができました！！