ココログでLightbox JS v2.0を利用する方法
以下、この記事に目を通されていることを前提として、ココログでLightbox JS v2.0を利用する方法を解説します（なお、私はブラスを利用しているのでプラス以外は動作チェックしてません。が、多分大丈夫じゃないかと思います）。まずは、必要なファイルをココログのサーバにアップします。
1.管理ページに入ったら［コントロールパネル］をクリックします。
2.［ファイル］をクリックします。
3.「css」「images」「js」の3つのフォルダを作ります。［新しいフォルダの作成］にフォルダ名を入力して［フォルダを作成］ボタンをクリックすれば作成できます。
4.lightbox2.02.zipを解凍して得られたファイルを各フォルダにアップロードします。解凍で得られたフォルダと先ほど作ったフォルダは同じですから、同じ名前のフォルダに同じファイルをアップロードします。作ったフォルダをクリックして切り替えたら、［参照］ボタンでローカルのファイルを指定し、［アップロード］ボタンをクリックするだけです。ファイルは1つ1つアップロードする必要があります。
5.次に新規記事の投稿ページを表示したら、いちばん最初に次の記述（おまじない）を入れます。●●●のところは自分のココログのurlに置き換えてください（たとえば、MAKOTO3.NET Blogなら「http://makoto3.cocolog-nifty.com/」なので●●●は「makoto3.cocolog-nifty.com」）。
<script type="text/javascript" src="http://●●●/js/prototype.js"></script><script type="text/javascript" src="http://●●●/js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="http://●●●/js/lightbox.js"></script>
<link rel="stylesheet" href="http://●●●/css/lightbox.css" type="text/css" media="screen" />
6.通常の方法で画像を挿入します。すると、次のようなHTMLのコードが挿入されるはずです。
<a href="http://makoto3.cocolog-nifty.com/photos/uncategorized/dbt027.jpg"><img class="image-full" alt="Dbt027" title="Dbt027" src="http://makoto3.cocolog-nifty.com/photos/uncategorized/dbt027.jpg" border="0" /></a>
これを次のように書き換えます。
<a href="http://makoto3.cocolog-nifty.com/photos/uncategorized/dbt027.jpg" rel="lightbox" title="キャプション">画像</a>
具体的には、<a>～</a>の中を文字にし、<a>タグに rel="lightbox" title="キャプション" を追加するだけです。「キャプション」は画像に付ける説明文です。これで、次のように表示されるはずです。
7.複数の画像の場合は、同様にして複数の画像を通常の方法で挿入します。そして、各コードを次のように修正します。
<a href="http://makoto3.cocolog-nifty.com/photos/uncategorized/dbt033.jpg"rel="lightbox[keyword]" title="キャプション">画像1</a>
<a href="http://makoto3.cocolog-nifty.com/photos/uncategorized/dbt072.jpg"rel="lightbox[keyword]" title="キャプション">画像2</a>
<a href="http://makoto3.cocolog-nifty.com/photos/uncategorized/dbt144.jpg"rel="lightbox[keyword]" title="キャプション">画像3</a>
<a>タグに追加した rel="lightbox[keyword]" title="キャプション" のうち、keywordに は複数の画像をグループとして扱うときの共通のキーワードを指定してください（共通していれば何でもかまいません）。これで、次のように表示されるはずです。
なお、最初にアップロードしたjsファイルやcssファイル、画像ファイルは、一回アップロードすればそれでOKです。あとは、各記事の先頭に<script ～で始まるおまじない（アップロードしたスクリプトファイルとスタイルシートファイルへのリンク指定です）を入れてやれば、どの記事ででもLightbox JS v2.0を使えます。
« なかなか快適に使えてます Windows Vista RC1 | トップページ | ジャストシステムの新ロゴ＋オールアバウトの新デザイン »
コメント
トラックバック
この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/39246/12066758
この記事へのトラックバック一覧です： ココログでLightbox JS v2.0を利用する方法:
» Lightbox系オーバーレイ表示をしてくれるThickboxを導入、の巻 [ブランドって何だぁ？]
いやぁ～、これでプリント広告やら屋外広 [続きを読む]
» Lightbox系オーバーレイ表示をしてくれるThickboxを導入、の巻 [ブランドって何だぁ？]
いやぁ～、これでプリント広告やら屋外広 [続きを読む]
« なかなか快適に使えてます Windows Vista RC1 | トップページ | ジャストシステムの新ロゴ＋オールアバウトの新デザイン »
ＭＡＫＯＴＯ３（井上）様
初めまして。こんにちわ。
このlightboxの記事、大変参考になりました。小生のブログは性質上大きな写真を使うので早速記事を参考にやってようと思っていた矢先（ちなみに小生のサイトはtypepad＝基本的にはココログと同じ）、lightboxの進化版（？）のlitebox
http//www.doknowevil.net/litebox/
なるものを知りました。
大変不躾な質問で恐縮ですが、liteboxは導入されましたか？いや、正しい質問は、liteboxの導入方法はこのお書きになっているlightboxと同じなのでしょうか？
教えていただけると大変助かります。どうか宜しくお願いいたします。
投稿： yoichi | 2006/12/27 18:02
こんにちは。
いま、暮れのドタバタで時間がとれないので、時間ができたら、ご指摘のものも使ってみま～す。
投稿： MAKOTO3 | 2006/12/28 22:33
MAKOTO3様
早速のレス、ありがとうございます。是非、楽しみにしております！
その間、小生も色んなものを試してみようと思っています。うまくいくかどうか非常に不安ではありますが．．．。
ではでは。良いお年を！
投稿： yoichi | 2006/12/29 12:03
MAKOTO3様
自己レス、失礼いたします。
色々錯綜した結果、今回はThickbox 2.1を導入することにいたしました。
色々ありがとうございました。
投稿： yoichi | 2006/12/30 22:10