ブログの画像はサルネイムで

なんかブログのカスタマイズ機能がついたって記事から、
こればっかり書いちゃってますが＞＜
こんなのも書いたほうがいいのかなぁ？と言うことで＞＜

えと、ソラマメブログさんはトップページに最新記事が貼り出されるということで、
画像がいっぱいの方が多いです。
ちょっと見ならいいのですが、どんどん見ていくと大きな画像って
結構ストレスがたまっちゃうので、わたしのページはサルネイム表示にしています。
でも、サルネイム表示からまた他の窓がブラウザで立ち上がるって言うのも
結構消すのストレスなんだよね・・・

と言うことで、サルネイムの画像をクリックするとブラウザ内の一個の窓で
大きな画像表示するjavascriptライブラリを私は使っています。
こういうライブラリはいろんな種類があるのですが、設置の簡単さ
見た目のよさなど考えるとLightbox2というのが簡単かな？って感じです
＊軽量版のLiteboxっていうのもあってこちらを使う人のほうが今多いのかな？

この頃はソラマメさんでも使っている方が居ますが、どうやって設置するのか
簡単にご説明しようかと思います＾＾


lightboxなどjavascriptライブラリを使う場合には、
javascript自体をどこかにアップロードしてあげなければ利用できません。
どこかのHPスペースにアップしてあげて下さい。
まず、lightbox2をココからダウンロードしてきます。圧縮ファイルなので解凍して下さい。
＊今わたしが書いている時点ではLightbox v2.03.3が最新です。
中にindex.htmlと3つのCSS,JS,imagesというフォルダがあります。
そのCSSの中にあるlightbox.cssというファイルと
JSフォルダにあるlightbox.jsというファイルをまず設定します。
ＣＳＳファイル(lightbox.css）
url(../images/XXX.gif)　という記述があるところが何箇所かありますので
それをあなたが設置するファイルがある場所のURLに書替えて下さい。
例　url(http://hogehoge.com/images/ｘｘｘ.gif)
JavaScriptファイル（lightbox.js）
こちらもやはり　"images/ｘｘｘ.gif";　と
画像ファイルへのパスを書き記すところがあるので、ファイルがある場所のURLに書替えます。
例　"http://hogehoge.com/images/ｘｘｘ.gif"
設定が終わったら、書き記したURLの場所にcssとjsと画像のファイルをアップロードします。
index.htmlとimage-1.jpg、thumb-1.jpgの3つはアップする必要はありません。
画像表示のテスト用ファイルです。
次は、ソラマメブログ自体への設定です。
ソラマメのテンプレートで、今お使いのテンプレートの編集からカスタマイズを選んでください。
トップページ：　個別記事：　アーカイブ：　（これがソラマメさんめんどくさいんだよね；；）
の3つの　</head>　の上にこのように記述して下さい。
<link href="あなたのHPスペースのcssファイルまでのパス/lightbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="あなたのHPスペースのjsファイルまでのパス/prototype.js"></script>
<script type="text/javascript" src="あなたのHPスペースのjsファイルまでのパス/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="あなたのHPスペースのjsファイルまでのパス/lightbox.js"></script>
これですべて完了です＞＜
あとはブログを書くときにサルネイムを選んでいつものように画像をアップして下さい。
そうすると
<a href="http://img01.slmame.com/usr/xxx/xxx.jpg" target="_blank"><img src="http://img01.slmame.com/usr/xxx/xxx-s.jpg" width="100" alt="" ></a>
という感じに画像のタグが挿入されると思います。
そこのtarget="_blank"　の部分を rel="lightbox"に書き換えてそのサルネイムの画像をクリックすると
背景が暗くなって、ブラウザ内の一個の窓で大きな画像が写真のように表示されてるかな？と思います。
試してみてくださいﾈ
ちょっちクールなブログになりますﾖ