Lightboxで写真アルバムを作る

この記事は2015年6月のものです。
2018年6月現在は、[Lightbox Plus Colorbox]というプラグインは新規追加で検索しても出て来ません。わたしはFTPからダウンロードしたフォルダをアップロードして使用しています。

完全自己責任で、どうしても使ってみたいという方は、

をどうぞ。ZIPフォルダがいきなりダウンロードされます。


WordPressには標準で写真アルバム用の『ギャラリー』機能がありますね。
ただ、、、どうもカッコよくないwww
Lightboxで作りたいなあと思ったら、、、有りました♪
[Lightbox Plus Colorbox]というプラグイン。
今回は、『ワードプレスご利用ガイド』さんを参考にさせていただきました。

プラグインの設定は、[外観]→[Lightbox Plus Colorbox]で行います。
前回紹介した、『複数の画像を横に並べる』で作った写真アルバムの中身を作成してみます。

と、その前に、、、。

<a href="大きな画像のパス" rel="lightbox"><img src="小さな画像のパス" alt=""></a>

を どこかにメモっておいて下さい。このタグが重要です。

ではまずは、アルバム用の画像をメディアに追加します。
画像の名前を揃えておきましょう。

(例)アルバム1
画像名:alb1-01.jpg、alb1-02.jpg、、、alb1-20.jpg、

(例)アルバム2
画像名:alb2-01.jpg、alb2-02.jpg、、、alb2-20.jpg、

(例)アルバム3
画像名:alb3-01.jpg、alb3-02.jpg、、、alb3-20.jpg、

という感じです。

画像のURLは、https://******/wp-content/uploads/alb1-01.jpg といったものになりますよね。それを例のタグの『大きな画像のパス』に入れます。

<a href="大きな画像のパス" rel="lightbox"><img src="小さな画像のパス" alt=""></a>
<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="小さな画像のパス" alt=""></a>

 

『小さな画像のパス』には本来サムネイル画像のURLを入れますが、同じ画像のURLにしてサイズを指定することも可能です。

<a href="大きな画像のURL" rel="lightbox"><img src="大きな画像のURL" alt="" width="横幅ピクセル" height="高さピクセル"></a>

 

大きな画像のサイズが 640×480ピクセルだった場合、『width="160" height="120"』のように同じ比率でサイズを指定してやればOKです。

以上を踏まえて、1枚目のタグが下のように完成しました。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

 

次はこれを画像の数だけコピペしたテキストをエディターで作成します。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

………………………………………………

それの画像名を変えていきます。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-02.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-02.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-03.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-03.jpg" alt="" width="160" height="120"></a>

………………………………………………

<a href="https://******/wp-content/uploads/alb1-20.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-20.jpg" alt="" width="160" height="120"></a>

次は完成したタグのスキマを埋める作業です。
</a>は1枚の画像の最後の部分で、<a が次の画像の最初の部分です。
それを </a><a という風にスペースを消します。
</a> <a とすると半角分のスペースが空きます。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a><a href="https://******/wp-content/uploads/alb1-02.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-02.jpg" alt="" width="160" height="120"></a><a href="https://******/wp-content/uploads/alb1-19.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-19.jpg" alt="" width="160" height="120"></a><a href="https://******/wp-content/uploads/alb1-20.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-20.jpg" alt="" width="160" height="120"></a>

 

あとはアルバム用のページ本文に作成したタグをコピペで入れれば完成です。

アルバムのサムネイルをクリックするとこんな風に表示されます。
表示の仕方は、[外観]→[Lightbox Plus Colorbox]で設定できます。

画像をクリックするとデモページです。

画像をクリックするとデモページです。

 
デモページの設定は以下の通りです。

1)[外観>Lightbox Plus Colorbox]


 

2)「Lightbox Plus ColorBoxについて」の表示を隠す

最初に出てくる『Base Settings』の項目で[General]を選択して、[Hide “About Lightbox Plus ColorBox”]に ✓チェックを入れます。

 

3)画像の外枠のスタイルを設定

同じく『Base Settings』の項目で[Style]を選択して、[ピンク枠]でスタイルを選びます。設定が終了したら、[Save all settings]で保存します。


現行のWordPressに対応したLightbox 用のプラグインは無数に有りますが、

拡大表示させたい画像をクリックし、「代替テキスト」欄を入力。続いて「添付ファイルの表示設定」>「リンク先」に「メディアファイル」を設定し「投稿に挿入」

という形式のものがほとんどで、これから作成するサイトなら一からの作業なので慣れればいいだけですが、かなりの量の写真でアルバムを作成してしまっているサイトでやり直すのは大変そうで、、、。
今現在もサクサク動いてくれている「Lightbox Plus ColorBox」は考えようによっては、更新でエラーがでる心配も無いのでもうしばらくは使わせてもらっちゃおうと思います。