FC2ブログにちょっとカッコいいフォトギャラリーを作ってみる【Galleria・Lightbox】

スポンサードリンク

GalleriaやLightboxというスクリプトを用いてFC2ブログにちょっとカッコいいフォトギャラリーを作ってみました。ブログエントリ内での使用は勿論、ブログエントリから独立したフォトギャラリー専用ページをFC2ブログで作る事も可能なので、ナカナカ良い感じではないかと思います。

FC2ブログのファイルアップロード時にサムネイル作成して貼り付ければフォトギャラリーは作れるけど

FC2ブログに写真や画像データをアップロードする際、同時にサムネイルを作成し、ソレをエントリ内に並べれて貼り付ければ手軽にフォトギャラリーとして成り立ちはしますが、それだと写真が大量にある場合、

　サムネイルクリック→
　→拡大した写真表示（同ウィンドウorウィンドウポップアップ）→
　→別の写真を見る為に：ブラウザの戻るボタンクリックor新たに開いたウィンドウを閉じる→
　→別の写真のサムネイルをクリック→繰り返し・・・

っと言ったように全ての写真を見るのがチョット面倒くさいように感じます。

サムネイルによるフォトギャラリーの例

サムネイルによるフォトギャラリーの具体的な例は下記のようなモノです。

　・通常のサムネイルによるフォトギャラリーのデモ

大きな写真をそのまま並べたフォトギャラリーの例

逆にサムネイル（小さな画像）は使わずに大きな画像をそのままエントリ内（等）に表示させるフォトギャラリーであれば見る側はページをスクロールするだけで済みますが、そのページのデザインとかレイアウトによって表示できる画像の最大サイズが決まってしまうし、付随して画像だけ新規ページor新規ウィンドウで表示させるのに比べ表示可能なサイズに対する制約も伴うように感じます。具体的な例としては下記のようなモノです。

　・通常の画像を並べただけのフォトギャラリーのデモ

スクリプトとCSSでちょっとカッコよくしたフォトギャラリーの例

そんな訳でと言うか、上記の問題を（ちょっと）クリアしつつ、尚且つちょっとカッコよくしたフォトギャラリーの例を挙げてみますと下記のようなモノです。

　・Galleriaによるフォトギャラリーのデモ
　・Lightboxによるフォトギャラリーのデモ

上記2つはドチラもスクリプトとCSS（っとhtml）の組み合わせによって出来ているので、CGIによるフォトギャラリーなどとは違いFC2ブログでも使えるのが嬉しいトコロで御座います。

Galleriaは大きな写真をブログエントリにそのまま貼り付けた場合と比べ、写真の大きさが変わらないように思われるかもしれませんが、今回作ったデモページのレイアウトをブログエントリと同じにしてしまっているためであって（なのでブログエントリ投稿によって作られるページではありません。URL参照）、フォトギャラリー専用のレイアウトにすればもっと大きな写真を表示させるコトが可能です。ブログエントリ内でも利用可能ですが、その場合、大きさの面でメリットはありませんが、大きい写真をそのまま並べて貼り付けただけのエントリよりもスッキリして見栄えが良くなるのがメリットだと思います。

対してLightboxは実際にデモページをご覧になり、サムネイルをクリックして大きな写真を表示させて頂ければわかりますが、基本的にページレイアウトの影響を受けないトコロや、大きな写真が表示される際の動作のカッコよさがポイント高いのではないでしょうか？　またLightboxは複数の画像が無い場合、例えばブログエントリ内に表示させている写真のサムネイルを拡大表示させる際にも使うコトが出来ます。

そんな訳で、ココからはGalleriaとLightboxをFC2ブログに設置する方法を紹介していきます。
　・GalleriaをFC2ブログに設置する方法
　・LightboxをFC2ブログに設置する方法

GalleriaをFC2ブログに設置する方法

FC2ブログへGalleriaを設置する方法の大まかな流れを書くと、

　・Galleriaの設置に必要なファイルのダウンロード
　・Galleriaスクリプトファイルのアップロード
　・CSSファイルのアップロード（もしくはテンプレート編集でのCSS編集）　
　・テンプレートのhtml編集（エントリ内で使う場合）
　・htmlファイルの作成（エントリとは別途フォトギャラリーページを作りたい場合のみ）

っと言った感じで、スクリプト等をダウンロードしてきて、ソレをFC2ブログのファイルアップロード機能でアップロードすると共に、テンプレートのhtmlやCSSの編集を行います。

jQuery（ジェイ・クエリー）のダウンロード

Galleriaを使うにはjQuery（ジェイ・クエリー）と言うJavaScriptライブラリが必要となりますので、まず最新のjQueryをダウンロードします。

　・jQueryのダウンロードページ

上記リンクからjQueryのダウンロードページにアクセスし、「Current Release」と言う欄までスクロールします。Current Releaseが最新版ですから、そこにあるMinified（圧縮版：jquery-1.X.X.min.js）をダウンロードします。他にPacked（圧縮版：jquery-1.X.X.pack.js）と、Uncompressed（圧縮無し版：jquery-1.X.X.js）がありますが、動作速度やファイルサイズ等の面からMinifiedが良いようです。
※08年12月23日現在、jquery-1.2.6が最新

Galleriaのダウンロード

続いてjQueryのプラグインであるGalleriaをダウンロードします。

　・Galleriaのダウンロードページ

上記リンクからGalleriaのダウンロードページにアクセスし、ページ中央カラムの「Download」からGalleria 1.0（jquery.galleria.js）をダウンロードします。（今回は圧縮していないモノを使っていますが、jQuery同様圧縮してあるMinified版が良いかもしれません）。

jQueryとGalleriaのアップロード

jQueryとGalleriaをダウンロード出来たらFC2ブログへアップロードするためにファイル名をリネームします。ダウンロードしたファイルはそれぞれ、

　・jquery-1.X.X.min.js
　・jquery.galleria.js

っとなっていると思いますが、FC2ブログはファイル名の拡張子（ココではjs）直前以外のトコロに「.（ピリオド）」が含まれているとアップロードできませんから、

　・jquery-1XX_min.js
　・jquery_galleria.js

等のように、ピリオドの無いファイル名にリネームしてからアップロードします。

CSSファイルの準備

Galleriaのデザイン等はCSSによって行われていますから、CSSの用意を行います。CSSについてはFC2ブログの「テンプレートの設定」画面にてGalleria用の記述をCSSに加える方法と、別途CSSファイルを用意してアップロードする方法がありますが、今回は別ファイルでの方法を採りました。

Galleria用のCSSは「jquery_galleria.js」のダウンロードページにも用意されていますが、そのままではあまり使えませんので、今回はGalleriaのデモページを参考にした下記のようなCSSを使用しています。

　・Route315-GalleriaデモページのCSS
　（今回のCSSファイル名はgalleria2.css）

Galleriaのデモページから若干変更したのが画像表示位置に関する部分で、例えば写真のサイズが横1000×縦600っと言うような横長サイズだけ、もしくは反対に縦長サイズだけ表示させている分には問題無いのですが、両方が含まれる場合、それぞれの画像表示位置が上揃えになってしまいます。大きな画像の表示領域は縦サイズを縦長写真に合わせなければなりませんが、そうすると横長写真を表示した際、写真とサムネイルの間に無駄なスペースが空いてしまいますので、コレを何とか中央揃え的な表示に出来ないかと思いコチラを参考に少し修正しました。

具体的に表示されたモノを挙げると下記のような感じになります。

GalleriaデモページをFierfox3.0.5で表示

上記画像のように、画像上下方向の中心位置が揃っている、コンナ状態が意図したトコロです。

が、ファイアーフォックスとかグーグルChromeとか、その他幾つかのブラウザでは上記の通りになりましたが、

GalleriaデモページをIE6で表示

IE6で表示させるとご覧の通り・・・もぉ激しくorz
と言うか、またIE（インターネットエクスプローラー）さんですか。そうですか、そうですか・・・って感じで御座います。因みにIEは5.5も6も7も8も上記のような感じでありまして、ついうっかりアンインストールしたい衝動に駆られます（笑）

中央揃えの参考にしたページにはIEに対応する方法も書いてありますが、スクリプトが表示させる画像には巧いコト行かないようでして・・・。何か良い方法をご存知の方は教えて下さいまし（＾＾；　　そんな訳もありまして、Galleriaに関しては画像の縦サイズを揃えた方が見栄えがよいかもしれません。

画像へのエフェクトを追加

Galleriaデモページのようにするには、画像が入れ替わる際のフェードイン・アウト、大きな写真が表示されているサムネイルをハイライトするエフェクトや、ブラウザの戻る・進むボタンが有効となるように履歴が残るように出来るスクリプトを追加する必要があります。今回使ったスクリプトはCSSと同じくGalleriaデモページのモノとほとんど同じ内容です。Galleriaデモページではhtmlファイルに直接スクリプトを書き込んでいますが、外部ファイルにしてアップしておけばブログなどでは便利かと思います。

　・Route315-Galleriaデモページのエフェクト
　（今回使用したエフェクトのファイル名はgalleria_kouka.js）

他のスクリプトやCSSファイル同様、このエフェクトもアップロードします。

テンプレートhtmlの編集

Galleriaを使うのに必要なファイルをアップロードしたら、テンプレートのhtmlを編集します。その前に、コレまでに用意したモノを確認しておくと、

　・jquery-1XX_min.js
　・jquery_galleria.js
　・galleria2.css
　・galleria_kouka.js

以上の4つになります。
これらのスクリプトやCSSファイルにアクセスするよう、テンプレートhtml部分の

<head>～</head>

の中（</head>の上辺り）に下記のように記述します。

<head>
　・
　・
（略）
　・
　・
<link href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/galleria2.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/jquery-1XX_min.js"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/jquery_galleria.js"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/galleria_kouka.js"></script>
　・
　・
（略）
　・
　・
</head>

FC2ブログにファイルをアップロードした際、今現在（08年12月23日）では、

http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/ファイル名

となりますので、各々アップロードしたファイルのURLを記述します。「blog-imgs-◆◆」の部分は数字が入りますがアップロードするタイミング等で入る数字が変わってくるかと思いますので、アップロード後に確認して下さい。「fc2.com/」以降の「★/●/▲/★●▲■■/」の部分は「★●▲■■」がブログIDで、その手前の「★/●/▲/」はブログIDの先頭3文字になっています。

ブログIDはURLにも含まれており、オイラが使っているFC2ブログの場合はURLが、

http://r315.blog26.fc2.com

なので、アップロードしたファイルは下記のようになります。

http://blog-imgs-◆◆.fc2.com/r/3/1/r315/ファイル名

Galleriaを使う際の画像タグ記述方法

Galleriaを使う際の画像タグ記述方法は下記の通りで、リストタグを用いる他、title属性の内容が大きな画像の下に表示されるキャプションとなります。上記CSSに合わせた場合の画像タグ等の記述は下記のようになります。2番目の画像に対するリストタグのクラスが「active」となっていますが、コレによって画像表示領域（大きな画像）に初めに表示する写真を指定出来ます。

<div class="demo">
<div id="main_image"> </div>
<ul class="gallery_demo">
<li><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="ホゲホゲな写真" alt="Image01"></li>
<li class="active"><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="ホゲホゲのクルマ" alt="Image02"></li>
　・
　・
　・
<li><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="クルマのエンジン" alt="Image06"></li>
<li><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="ホゲホゲなクルマのオーナー" alt="Image07"></li>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
&lt/div>

LightboxをFC2ブログに設置する方法

続きましてLightboxです。FC2ブログへ設置する方法の大まかな流れは下記のようになります。

　・Lightboxの設置に必要なファイルのダウンロード
　・ダウンロードしたファイルをFC2ブログの環境に合わせるタメの修正
　・Lightboxの設置に必要なファイルのアップロード
　・テンプレートのhtml編集（エントリ内で使う場合）
　・htmlファイルの作成（エントリとは別途フォトギャラリーページを作りたい場合のみ）

LightboxをFC2ブログに設置する方法についてはコチラのブログを参考にさせて頂きましたが、LightboxのバージョンアップやらFC2ブログのイメージサーバーの変更などが重なり、若干内容に違いがあるようです。

Lightboxのダウンロード

LightboxはスクリプトやCSS、使用するアイコン等の画像が全てセットになったZIPファイルをダウンロードするだけなので、必要なモノの入手作業は非常に楽です（＾＾）

　・Lightboxのダウンロードページ

上記リンクからLightboxのダウンロードページにアクセスし、「Download」と言う文字の下にあるリンクをクリックして最新のLightbox（lightbox2.XX.zip）をダウンロードします。
※08年12月23日現在、Lightbox2.04が最新

ダウンロードしたzipファイルを解凍すると、

「lightbox2.04」フォルダ以下、上記のようになっています。その中で修正が必要なファイルは赤字で示した「lightbox.css」と「lightbox.js」になります。

lightbox.cssの修正

lightbox.cssを開き、下記の2ヶ所をFC2ブログのファイルアップロード後のURLに合うように修正します。

変更前
#prevLink:hover, #prevLink:visited:hover { background: url(../images/nextlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

赤字の部分を下記のように変更します。

変更後
#prevLink:hover, #prevLink:visited:hover { background: url(http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/nextlabel.gif) right 15% no-repeat; }

lightbox.js

続いて「lightbox.js」の修正を行います。

変更前
//
//  Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage:        'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

赤字部分を下記のように変更します（コレは参考にさせて頂いたページと同じです）

変更後
//
//  Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage:        'http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/loading.gif',
fileBottomNavCloseImage: 'http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/closelabel.gif',
overlayOpacity: 0.8,   // controls transparency of shadow overlay

Lightboxに使用するファイルのアップロード

上記のように「lightbox.css」と「lightbox.js」を修正したら、「lightbox2.04」フォルダの中にある全てのファイル（index.html以外）をFC2ブログにアップロードします（画像は全て使わなかもですが）。

テンプレートhtmlの編集

アップロードしたスクリプトやCSSにアクセスできるように、テンプレートのhtmlを編集し、

<head>～</head>

の中（</head>の上辺り）に下記のように記述します。

<head>
　・
　・
（略）
　・
　・
<link rel="stylesheet" href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/prototype.js"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/lightbox.js"></script>
　・
　・
（略）
　・
　・
</head>

Lightboxを使う際の画像タグ記述方法

Lightboxを使う際の画像タグ記述方法は下記の通りで、URLの部分以外は先に挙げた「参考にしたページ」に記載されている通りの内容です。

<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-1.jpg" rel="lightbox[○○]" title="DELL Inspiron530-青く輝く電源スイッチ">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-1s.jpg" width="75" height="56" alt="ホゲホゲの写真1"></a>
<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-2.jpg" rel="lightbox[○○]" title="DELL Inspiron530-光学ドライブスペース">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-2s.jpg" width="75" height="56" alt="ホゲホゲの写真2"></a>
<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-3.jpg" rel="lightbox[○○]" title="DELL Inspiron530-ロゴ">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-3s.jpg" width="75" height="56" alt="ホゲホゲの写真3"></a>
　・
　・
　・
<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-9.jpg" rel="lightbox[○○]" title="DELL Inspiron530-青く光る吸気ダクト内部2">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-9s.jpg" width="75" height="56" alt="ホゲホゲの写真9"></a>

ポイントとして複数の画像を使用して連続して表示させる場合は、

　・画像ファイルは半角英数字とする
　・ファイル名の最後に連番を振る
　・rel=”lightbox[○○]の○○は画像ファイル名（連番は無し）を記入

っと言った辺りになる他、title属性の部分に記入した内容が写真拡大時に表示されます。またLightboxは、ブログエントリ等で画像を使う場合など、ファイル名に連番を振らないで利用すればページが変わることなくサムネイル画像を拡大表示させると言った使い方も可能です。

FC2ブログで新規にページを作成してフォトギャラリーを作る

今回、Galleriaによるフォトギャラリーのデモ、Lightboxによるフォトギャラリーのデモともに、htmlファイルを作成してフォトギャラリーページを作ってあります。GalleriaもLightboxもブログエントリ内での使用が可能な事はこれまでの説明の通り可能であり、特にLightboxについては通常のブログエントリの写真表示に有用となりますが、そのような利用方法の場合、多少の問題があります。

他のスクリプトとの干渉に注意

特にブログエントリで利用する場合、FC2ブログのテンプレート編集機能にて設置する方法を採ると、記述内容が全エントリに反映されます。それだけでは大きな問題にはなりませんが、JavaScriptを利用しているブログバーツやウィジェットやガジェット等、またはFC2ブログのプラグインを多く設置しているブログの場合、それらが上記手順で設置したスクリプトと干渉してしまうコトがあります（問題無いコトも多いですが）。この干渉問題はワタシ自身確認しており、それは同じ条件でもブラウザによって異なる結果が出るという内容でしたから、テンプレート内に設置される場合は複数のブラウザで確認する事をお勧め致します。

ブログエントリとフォトギャラリーを切り離す

上記の干渉問題以外の点で、テンプレートに設置していまうとヘッダの記述内容がゴチャゴチャしてしまうのもチョット気に入らなかったりしますから、通常のブログエントリでは旧来の写真表示を用いつつ、写真を大量に貼り付けたい場合は別途フォトギャラリーページを製作すれば、スクリプトの干渉やヘッダ記述内容の問題は避けられます。また完全なフォトギャラリーとして使用する場合、写真だけの表示になってしまいますから、フォトギャラリーページをブログエントリと切り離してしまうコトで、（観覧者が）ブログエントリを前後にページ移動した際にも違和感が少ないのではないかと思いますし、ブログエントリに関連した内容のフォトギャラリーであれば、ページを分ける事でエントリ本文の読み込み速度の面でも良いのではないでしょうか。

フォトギャラリーページのhtmlファイル

htmlファイルによってブログエントリとは別にフォトギャラリーページを製作する場合、最も簡単な方法はブログのパーマネントページ（http://■■■.blog▲▲.fc2.com/blog-entry-XXX.html）をブラウザで表示させ、その状態のページソースをコピーしてメモ帳などに貼り付け、不要部分を削ると共に、上記内容を加え、必要に応じてCSS等に追記すれば手軽に作る事が出来ます。その場合、レイアウトがブログのテンプレートと同じになってしまいますが、フォトギャラリーは専用のレイアウトにしたいのであれば、一からページを構成するコトでソレも可能です。