2008/01/10

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

なんかブログのカスタマイズ機能がついたって記事から、 こればっかり書いちゃってますが>< こんなのも書いたほうがいいのかなぁ?と言うことで>< えと、ソラマメブログさんはトップページに最新記事が貼り出されるということで、 画像がいっぱいの方が多いです。 ちょっと見ならいいのですが、どんどん見ていくと大きな画像って 結構ストレスがたまっちゃうので、わたしのページはサムネイル表示にしています。 でも、サムネイル表示からまた他の窓がブラウザで立ち上がるって言うのも 結構消すのストレスなんだよね・・・ と言うことで、サムネイルの画像をクリックするとブラウザ内の一個の窓で 大きな画像表示するjavascriptライブラリを私は使っています。 こういうライブラリはいろんな種類があるのですが、設置の簡単さ 見た目のよさなど考えるとLightbox2というのが簡単かな?って感じです *軽量版のLiteboxっていうのもあってこちらを使う人のほうが今多いのかな? この頃はソラマメさんでも使っている方が居ますが、どうやって設置するのか 簡単にご説明しようかと思います^^


lightboxなどjavascriptライブラリを使う場合には、 javascript自体をどこかにアップロードしてあげなければ利用できません。 どこかのHPスペースにアップしてあげて下さい。 まず、lightbox2をココからダウンロードしてきます。圧縮ファイルなので解凍して下さい。 *今わたしが書いている時点ではLightbox v2.03.3が最新です。 中にindex.htmlと3つのCSS,JS,imagesというフォルダがあります。 そのCSSの中にあるlightbox.cssというファイルと JSフォルダにあるlightbox.jsというファイルをまず設定します。 CSSファイル(lightbox.css) url(../images/XXX.gif) という記述があるところが何箇所かありますので それをあなたが設置するファイルがある場所のURLに書替えて下さい。 例 url(http://hogehoge.com/images/xxx.gif) JavaScriptファイル(lightbox.js) こちらもやはり "images/xxx.gif"; と 画像ファイルへのパスを書き記すところがあるので、ファイルがある場所のURLに書替えます。 例 "http://hogehoge.com/images/xxx.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"に書き換えてそのサムネイルの画像をクリックすると 背景が暗くなって、ブラウザ内の一個の窓で大きな画像が写真のように表示されてるかな?と思います。 試してみてくださいネ ちょっちクールなブログになりますヨ

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

Posted by mayuko at 00:07 | Category 総合

トラックバック
このエントリにトラックバックはありません
このトラックバックURLを使って
この記事にトラックバックを送ることができます。
もしあなたのブログがトラックバック送信に対応していない場合には
こちらのフォームからトラックバックを送信することができます。.


« Prev itemNext item »

Comments

Leave comment

このアイテムは閲覧専用です。コメントの投稿、投票はできません。