ライブドアブログのカスタマイズ-画像をLightbox風に表示するJqueryプラグインColorboxの設置

2016/12/24 Jquery, カスタム, サイト作成, ライブドアブログ

【この記事を読むのに必要な時間は約 6 分です。】

今回は、「Lightbox」で有名な画像をモーダルウィンドウで表示する定番の画像用Jqueryプラグインを紹介する。
「Lightbox」（現在はLightbox2）が一番有名だが、画像モーダルウィンドウ表示のJqueryプラグインは、「Lightbox」以外の有名どころだけでも「Fancybox」、「Thickbox」、「Colorbox」そして数多くの「Lightbox」派生プラグインがある。
今回は、その中でも私のお気に入りのJqueryプラグイン「Colorbox」の設置方法について説明する。

スポンサーリンク
レクタングル（大）広告




モーダルウィンドウ表示のJqueryプラグイン

冒頭で説明したように、この種のプラグインは星の数ほど種類があるが、基本的な選び方としては、
1.比較的有名で動作に信頼性のあるもの
2.モーダルウィンドウの表示が自分の好みにあうかどうか
3.カスタマイズ、拡張性
4.使い方が簡単なこと
を念頭に置き、色々試してみると良いと思う。
今回は、比較はしないが、信頼性があり設置が簡単でデザインにすぐれ使い方が簡単であることから「Colorbox」をお勧めのうえ、説明したい。

設置方法

今回は、ライブドアブログに特化して説明しているが、基本的に普通のブログやサイトでも同じようにすれば設置できる。
WordPressについては、専用のプラグイン「jQuery Colorbox」があるので、そちらを利用した方が、簡単だ。

Lightbox系プラグインは似たような名前のプラグインが多数あるので、間違えないように注意してもらいたい。有名なものにはリンクを貼っているので、確認して欲しい。また、それぞれのプラグインページにデモが用意されているものもあるのでそちらも確認して欲しい。

上で、紹介したWordPressプラグイン「jQuery Colorbox」は、今回紹介するJqueryプラグイン「Colorbox」をベースに作成されている。私は永らく使用しているが、非常に安定して動作している。
なお、WordPress.orgのプラグインページもきちんと用意されている。

プラグインのダウンロード

Colorboxのホームページからダウンロードする。
ダウンロードファイル:colorbox-master.zip

6blog

必要ファイル

zipファイルを解凍すると次のようにフォルダが展開される。

7blog

必要なファイルは次のとおり。
1.jquery.colorbox-min.js（jsファイル）
自分の好みのexamle(1～5)を選び、その中の
2.colorbox.css（cssファイル）
3.imagesフォルダとその中の全てのファイル（examle1だと以下のファイル）
4.border.png/controls.png/loading.gif/loading_background.png/overlay.png
以上をサーバーにアップロードする。
なお、どのexampleにするかは、ホームページのdemoを見て選ぶと良い。

9blog

サーバーへアップロードする前にcssファイルで画像URL指定

cssファイルで使用画像のurlを指定しているので、絶対パスを記載する。
ライブドアブログだと、次に説明する形で、サーバーにアップロードした場合、画像のURLは次のようになる。
例）border.pngの場合
//2chan-matome.publog.jp/colorbox/images/border.png
　※http://から表示するとブログカードを作成してしまうので、//から表示している。
すなわち、自分のライブドアブログのURLに加えて、下で作成したとおりのフォルダ構成、ファイルの場所になる。example1の場合、全部で13箇所変更箇所がある。
8blog

なお、今回のようなディレクトリ構成でファイルとフォルダを作成・アップロードした場合は、使用画像のurlは変更しなくてもそのまま使えるので、変更せずにアップロードしても差し支えない。

ライブドアサーバーへのアップロード

ライブドアブログの管理画面で画像/ファイルを選択する。

1blog

ファイル管理のタブをクリック。

2blog

「フォルダを作る」をクリックし、「colorbox」と記入する。

3blog
3-2blog

「アップロード」をクリックし、それぞれファイルをアップロードする。

4blog

画像フォルダと画像も同じ要領で、画像フォルダについては、「colorbox」フォルダの中に「images」フォルダを作成。画像ファイルについては、「images」フォルダの中にアップロードする。

5blog

ヘッダー部分への記載

ヘッダー部分（<head>～</head>の間）に以下のとおり記載する。
なお、Jquery本体は、Google AJX APIのホスティングサービスを利用している。
また、jquery.colorbox-min.jsファイルとcolorbox.cssファイルは、上記で説明したとおりの場所にアップロードした前提。

//2chan-matome.publog.jpは、私のライブドアブログのURLなので、当然だが、自分のライブドアブログのURLを記載すること。 

<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->

<!-- colorbox -->
<link rel="stylesheet" type="text/css" href="http://2chan-matome.publog.jp/colorbox/colorbox.css" />
<script type="text/javascript" src="http://2chan-matome.publog.jp/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(function(){
    /* aタグのclass属性に「colorbox」を指定した場合にColorBoxを適用します。 */
    /* 画面表示領域の90%を超えないように設定 */
    $("a.colorbox").colorbox({maxWidth:"90%"});
});
</script>
<!-- /colorbox -->

利用方法

画像リンクへクラス指定

後は、モーダルウィンドウで表示したい画像にクラス指定class=”colorbox”をしてやる。
例）<a class=”colorbox” href=”http://livedoor.blogimg.jp/jump_up_info/imgs/7.jpg”> <img src=”http://livedoor.blogimg.jp/jump_up_info/imgs/7.jpg”></a>
このように、aタグにclass=”colorbox”とクラス指定する必要があるので注意して欲しい。

画像のグループ化

この記事と同じように画像をグループ化したい場合は、rel属性を付けてやる必要がある。クラス指定の後に、続けて、rel属性を指定する。なお、グループ化したいものだけ、同じrel属性にする。rel属性の名前は何でも良い。
例）class=”colorbox” rel=”jump”
この「jump」というのを好きな同じ名前にすればよい。

これでこの記事の画像と同じように、表示されるようになる。以上

スポンサーリンク
レクタングル（大）広告