これまでに撮りためた写真をまとようと思ってこのブログを立ち上げたのが半年前。
それにあたり「どういうスタイルで写真を載せていこうか？」と、ずっとWordPressテーマやプラグインを模索したりしなかったりしてました。
そんな紆余曲折の末、ようやく「LION BLOG」×「Responsive Lightbox & Gallery」という組み合わせに落ち着きく運びとなりました。
というか、このテーマとプラグインの相性がかなりイイー！！
これで…これでやっと本来の目的の写真の整理に戻れます…。
ただ今回プラグインの設定に少々難儀しましたもので、その辺備忘録的にまとめておきます。
（ちなみにテーマの「LION BLOG」はとんでもなく使いやすい神テーマです。）
【Lightbox】写真表示設定
Responsive Lightbox & Galleryを有効化すると、ダッシュボードに【Gallery】と【Lightbox】というメニューが表示されます。
【Lightbox】で写真表示の設定を行い、【Gallery】で個別のギャラリーを設定していくイメージです。
写真ポップアップ時の表示形式を決める
Generalタブ内にある、Default lightboxで8種類の中から写真をポップアップ表示する際の形式を選んでいきます。このタブには他にも設定できる項目がありますが、とりあえずはこの表示形式を選択するだけでも大丈夫です。
実はプラグインの設定に難儀したというよりは、この選択肢が多彩すぎてその一つ一つを確認するのが面倒だったのいうのが正直なトコロ。
後々改めて確認するのが面倒だろうなと思い、備忘録を作った次第でございます。
以下の8種類からイメージに合うものをを選びます。
SwipeBox
prettyPhoto
FancyBox
Nivo Lightbox
Image Lightbox
TosRUs
Featherlight
Magnific Popup
比較
せっかくなので、上記画像をギャラリー表示してみました（クリックで拡大します）。
ちなみにこのギャラリーの表示形式はBasic Masonry、Lightbox表示はMagnific Popupです。
Lightboxの表示をLightboxで表示しているから、逆にわかりにくい気もする…。
ポップアップ表示の詳細設定
Generalタブでデフォルトにする表示形式を設定したら、表示の詳細設定をしていきます。
Lightboxesタブを開き、直下からご自身の選んだ表示形式のタブ（リンク）を選んで好きなように設定してください。
Magnific Popup以外は日本語サポートが入っているのでここで困ることはないかと思います。
ギャラリーのデフォルト設定
ギャラリーの表示形式はBasic Grid/Basic Slider/Basic Masonryの3タイプ。
その基本設定をここで行います。
ですが実際にギャラリーを作成する際に、ここより詳細に設定することができるのでノータッチで問題ありません。
詳細は後の「ギャラリー設定」で説明します。
その他設定
このあたりは有料アドオンへのリンクと、ギャラリーの管理等の設定です。
設定すると管理が楽になる場合がありますが、触らなくても差し支えないです。
私はわかんなくてもなんとかなってます。
【Gallery】ギャラリー作成・設定
ギャラリーの表示形式の比較
3種類ある表示形式ですが、設定の難易度がBasic Masonry＝Basic Grid＜＜＜＜＜Basic Sliderと、ずいぶん差がある感じです。
Basic Slider
Basic Sliderは細かい設定が多い上にうまい事反映してくれないので私は断念しました( ;∀;)
スライダー表示を利用する場合、有料アドオンがあってはじめて活きる機能もありそうです。
有料アドオンをつかえるならいいんですが、コストは抑えておきたいと思うのであれば無難にBasic GridかBasic Masonryを使ったほうがいいと思います。
Basic Masonry
Basic Masonryは画像サイズに合わせて下に積み重なっていく感じです。
1カラムのWebページなら、なにかと映えそうな予感。
Basic Grid
Basic Gridはサムネイル表示ができる万能型といったところでしょうか。
当ブログはこちらのBasic Gridをメインに使っています。
ギャラリー表示の設定
共通の設定
Basic GridとBasic Masonryの設定は、共通する項目が多いです。
というかほぼ一緒です。
ギャラリー表示の設定はConfigタブで行います。
基本的には設定をいじる箇所もさほどないのですが、ギャラリーのサムネイルがぼやけたりする場合はこちらの2項目をチェックしてみてください。
Size
WordPressに画像をアップロードする際、フルサイズ・大サイズ・中・サムネイルの4つのサイズで画像が取り込まれています。その4サイズの画像から、どのサイズの画像をギャラリーのサムネイルに使用するか？という項目です。
サムネイル画像がぼやけている場合は、サムネイルの大きさに対して画像サイズが十分でない場合にむりやり引き延ばすため画像がぼやけるとのこと（どういう理屈かはさっぱりわからんですが）。
デフォルトだと「medium」になっているので「medium_large」か「large」にして試してみてください。
Screen sizes
設定したサムネイルの大きさによっては、PCでは問題ないけどモバイル端末だとサムネイル表示がおかしくなる場合があります。その場合は「Screen sizes」をみてみましょう。
「Screen sizes」は端末の画面サイズごとに、サムネイルを1行につき何列表示するか？というのを設定する項目です。デフォルトでは上から順に4・3・2・1で設定されてます。
モバイル端末の場合デフォルト値は 1 なので、設定したサムネイルの縦幅によっては極端に横長のサムネイルが出来上がって変な感じに表示されてしまいます。
このブログではモバイル端末でも2列で表示するように設定していますが、この辺はご自身でバランスを見て好きな様に調整してみてください。何なら全サイズ4列でもいい気がします。
ギャラリーのエフェクト設定
ここからはもう完全に好みの領域です。
作成したギャラリーのサムネイルに、エフェクトをかけていきます。
何故エフェクトをかけるのかというと、単純にちょっとカッコよく見えるからです！
このエフェクト具合がLION BLOGのアニメーションとの相性が良すぎるので、このプラグインに落ち着きました。
ギャラリーのエフェクトはDesignタブで行います。
ホバーエフェクト設定
サムネイル上にマウスが乗った時に、サムネイルへちょっと変化を持たせます。
モバイル端末の場合は拡大される写真の後ろで地味に作動します(笑)
エフェクトは9種類。こちらもイメージに合うものを選びます。
デフォルトはエフェクトなしです。
effect1
effect2
effect3
effect4
effect5
effect6
effect7
effect8
effect9
アイコン設定
サムネイルエフェクトに表示されるアイコンも10種類から選べます。非表示にもできます。
[adchord]ギャラリー表示がとにかく優秀なプラグイン
こんな感じで個別にエフェクトの設定を変えられたり、他記事のギャラリーを使いまわせるのもResponsive Lightbox & Galleryの良いところではないでしょうか。
その代わり設定を保存する機能がなく、すべてのギャラリーで同じ設定としたい場合はその都度設定をしないといけないのが面倒でもあります。
それでもWordPressデフォルトのギャラリーよりもかなり自由度が高く、その欠点を補っても余りあるほどの機能性なのであります。
信じられないだろ、無料なんだぜこれで…。
CSS等の知識ナシでも見た目のよいギャラリーが作れたのは本当にありがたいです。
（そのへんの知識があれば、カスタム領域もあるのでより楽しめそう）
WordPressで写真ブログを始めてみたいという方はぜひお試しを！
