「Lightbox 2」は、ブログに貼り付けた画像がクリックされると、クールなポップアップ画面で表示してくるJavascriptのライブラリを使用した特殊効果。
FC2ブログに「Lightbox 2」を設置する方法について覚書
Lightbox 2のデモ
「Lightbox 2」は、ブログに貼り付けた画像を単にポップアップ表示するだけでなく、複数の画像をグループ化してポップアップしたままスライドショーのように表示したりすることもできる。
「LightBox2」を使用した特殊効果のデモを以下のブログに用意したので実際の動作を確認したい方は以下のブログを参照してください。
以下FC2ブログに「Lightbox2」を導入する方法について記載します。
FC2ブログにLightBox2を設置する手順
以下にFC2ブログにLightBox2を設置するための手順を記載します。
ブログのテンプレートを少し変更するので、手順を実施する前に複製を取ってバックアップをしておきましょう。
まず以下のリンクをクリックして「Lightbox2」のサイトをブラウザで開きます。
Lightbox2のサイトが開いたら、[DOWNLOAD]をクリックして「LightBox2」をダウンロードします。
ダンロードしたファイルを解凍します。
解凍したフォルダの以下のファイルのファイル名を変更します。
| 変更前 | lightbox2-master\dist\js\lightbox-plus-jquery.min.js |
| 変更後 | lightbox2-master\dist\js\lightbox-plus-jquery-min.js |
※拡張子を除いたファイル名部分の"."(ピリオド)を"-"(ハイフン)に変更する
ファイル名を変更したら、次に lightbox2-master\dist\images フォルダの以下の4つのファイルをブログにアップロードし、アップロードした各ファイルのアップロード先URLをメモ帳などにコピーしておきます。
- close.png
- loading.gif
- next.png
- prev.png
次に lightbox2-master\dist\css フォルダの lightbox.css をテキストエディタで開きます。
lightbox.css ファイル内に上記でアップロードした4つのファイル(close.png、loading.gif、next.png、prev.png)のURLを指定している行がありますのでそのURLをアップロード先URLに書き換えます。
わかりづらいかもしれないので2つほど変更例を以下に記載しておきます。 変更前
/* Preload images */
body:after {
content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
display: none;
}
変更後
/* Preload images */
body:after {
content: url(http://blog-imgs-82.fc2.com/l/a/b/lab319/close.png) url(http://blog-imgs-82.fc2.com/l/a/b/lab319/loading.gif) url(http://blog-imgs-82.fc2.com/l/a/b/lab319/prev.png) url(http://blog-imgs-82.fc2.com/l/a/b/lab319/next.png);
display: none;
}
変更前
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
変更後
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(http://blog-imgs-82.fc2.com/l/a/b/lab319/loading.gif) no-repeat;
}
URLの書き換えが終了したら上書き保存します。
ファイル名を変更したファイル「lightbox-plus-jquery-min.js」とURLを書き換えた「lightbox.css」をブログにアップロードします。
ファイルのアップロード方法の詳細については以下の記事を参考にしてください。
上記でアップロードした2つのファイルのアップロード先URLをメモ帳などにコピーしておきます。
ブログのテンプレート設定画面を開きます。
ブログテンプレートの<head>～</head>の任意の行に以下のHTMLを追記します。
<link rel="stylesheet" href="http://XXXX/lightbox.css">
※"href="に指定するURLは、メモ帳にコピーしておいた"lightbox.css"のURLを指定します。
ブログテンプレートの</body>の手前に以下のHTMLを追記します。
<script src="http://XXXX/lightbox-plus-jquery-min.js"></script>
※"href="に指定するURLは、メモ帳にコピーしておいた"lightbox-plus-jquery-min.js"のURLを指定します。
変更したテンプレートの内容を[更新]ボタンをクリックして保存します。
これでブログへの「LightBox2」を設置する手順は終了です。
画像にLightBox2の特殊効果を適用する方法
実際にブログにアップした画像をLightBox2で表示するためには、<a>タグの中に「data-lightbox="任意の名前"」を指定します。
また、「data-title="タイトル文字列"」を一緒に指定すると任意の文字をポップアップした画面の左下に表示することができます。
以下にLightBox2を使う際のHTML例を記載します。
画像を1つだけ使った場合
この例では、「data-lightbox=」に"demo-1"という名前を指定しています。
<a href="http://画像のURL" data-lightbox="demo-1" data-title="タイトル文字列">...</a>
複数の画像をスライドショーのように見せる場合
この例では、4つの画像の「data-lightbox=」に"group-1"という同じ名前を指定してグルーピングしています。
同じ名前が指定されている場合はスライドショーのように表示されます。
<a href="http://画像のURL1" data-lightbox="group-1" data-title="画像1のタイトル文字列">...</a>
<a href="http://画像のURL2" data-lightbox="group-1" data-title="画像2のタイトル文字列">...</a>
<a href="http://画像のURL3" data-lightbox="group-1" data-title="画像3のタイトル文字列">...</a>
<a href="http://画像のURL4" data-lightbox="group-1" data-title="画像4のタイトル文字列">...</a>
LightBox2のオプション
LightBox2には実行時に特殊効果のオプションを指定して実行することができます。
オプションを指定した実行方法等の詳細については、公式サイトを参照してください。
LightBox2のデモ
HTMLの記載方法と実際にLightBox2でどういうふうに表示されるかは以下のサイトにデモを用意してあるのでそちらを参照してください。
コメント
大変分かりやすく簡単に導入することが出来ました。
記事の中でこのページをリンクさせて頂きました。
ありがとうございます。
細かい説明を書いていただいて助かっています。
一通りやってみたのですが、うまくlightboxが起動されません。
アップロード先ですが、画像をブログに挿入すると「・・・fc2.com/〇/〇/〇・・・・/画像のファイル名」となっているのですが、
テンプレートのhead内にペーストするのはhttp://～comまででしょうか？それともそのあとに続く/〇/〇・・・まででしょうか？
あと新規でブログを書くたびにアップロード先は変わると思うのですが、
テンプレートのhead内にはその度にアップロード先を追加で書き足していくのですか？
素人レベルの質問ですみません。
返信お願いします。
常次