軽くて使い勝手が良いので重宝している『 FooGallery 』がアップデートされた。
機能がさらに拡充したので、《 おばあちゃんの庭仕事 》ページ を更新するタイミングでプチリニューアル。
インストールから設置までの流れは変わっていないけど、UI がリニューアルされてギャラリーのデザイン設定が進化したので、以下、覚え書き。
FooGalleryとは
レスポンシブデザイン対応で細かい調整がしやすい WordPress のギャラリープラグイン。
インストール方法
- 管理画面左側「プラグイン」から「新規追加」で「 FooGallery 」を検索。
- 「 FooGallery 」が表示されたら「今すぐインストール」をクリック。
- インストールが完了したら「プラグインを有効化」をクリックして有効化。
有効化すると FooGallery の使用に関するデータを freemius.com に送信するかを選択する画面が表示されるので、送信しないのであれば「スキップ」をクリックして完了。
FooBox Image Lightbox設定
Lightbox 機能を使う場合は「 Extensions（拡張機能）」の『 FooBox Free 』を有効化する。
- 管理画面左側「 FooGallery 」から「 Extensions 」をクリック。
- 「 FooGallery Extensions 」画面が表示されたら「 FooBox Free 」の「 Download 」をクリック。
- 画面上部に、「 The extension FooBox FREE was successfully downloaded and can now be activated. Activate immediately 」と表示されるので「 Activate immediately 」をクリックして有効化。
設定項目があるけど『 FooBox Image Lightbox 』は特に設定することなく有効化すれば使用 OK 。
※プラグイン『 Head Cleaner 』を有効化すると Lightbox 機能が使えなくなったので、キャッシュ系プラグインを使用する場合は注意。
ギャラリー作成方法
次は、画像ギャラリーを作成する。
1 . 管理画面左側「 FooGallery 」から「 Add Gallery 」をクリックして新規ギャラリーを作成。
2 . ギャラリーにタイトルを付けて、「 Add Media 」をクリックして画像をアップロード。
アップロードした画像は管理画面でドラッグ＆ドロップで配置を変えることも可能。
※「 FooBox 」を使用する場合は画像をアップロードする際に、添付ファイルの詳細の「 Custom Target 」を「 FooBox 」に設定しないと Lightbox 機能が使用できないので注意。
ギャラリー項目設定
画像のアップロードが完了したら「 Gallery Settings 」の各項目を設定する。
General（一般）
- ギャラリーのデザインを選ぶ。
- ギャラリーのサムネイル画像サイズを決める。
- サムネイル画像のリンクを選ぶ。
- Lightbox を使用するかと種類を選ぶ。
- サムネイルとサムネイルとの間のスペース（ margin ）を決める。
- サムネイルを左端揃え、センター揃えにするかなど表示位置を決める。
- 画像の解像度を選ぶ。
- サムネイルの表示順序の条件を選ぶ。
- サムネイルのキャッシュ処理。
Appearance（外観）
- 背景、罫線などサムネイルのデザインを選ぶ。
- サムネイルの背景幅を選ぶ。
- サムネイルの四隅の角の角丸のサイズを選ぶ。
- サムネイルの背景につける影の広がりを選ぶ。
- サムネイルの内側につける影の広がりを選ぶ。
- Loading（読み込み中）のアニメーションを選ぶ。
- Loading（読み込み中）がアニメーション動作するかを選ぶ。
Hover Effect（ホバー効果）
- マウスオーバーする前とした後の色調を選ぶ。
- マウスオーバーした時にサムネイルが拡大するかを選ぶ。
- キャプションの表示方法を選ぶ。
- マウスオーバーした時のトランジション効果（時間的変化）の種類を選ぶ。
- マウスオーバーした時のアイコンを選ぶ。
Captions（キャプション設定）
- 画像タイトルに使うテキストを選ぶ。
- 画像の Description（説明）に使うテキストを選ぶ。
- キャプションの長さを制限するかを選ぶ。
PagingとAdvanced
Paging と Advanced は特に設定する必要無いのでデフォルトのままで OK 。
ギャラリー設置方法
「 Gallery Settings 」の詳細を設定してギャラリーが完成したら「公開」して、「 Gallery Shortcode 」をギャラリーを表示する固定ページに貼る。
これで、「 FooGallery 」の設置と設定が完了。
7 種類のギャラリーテンプレート
ギャラリーのテンプレートは 7 種類で、「 Gallery Settings 」から好きなギャラリーを選択すると、その下部の設定項目が変わるので、各ギャラリーごとに表示詳細を設定。
- Responsive Image Gallery（デフォルト）
Responsive は、画像をマス目上に配置するもので、オーソドックスなデザイン。
サムネイルの枠線のテイストや窓の形状は選べて、サムネイルサイズも変更ができる。 - Image Viewer Gallery
Image Viewer は、ページ上に表示される画像は一枚だが、複数の画像を lightbox で表示できて、明るい背景と暗い背景の2種類から選べる。 - Masonry Image Gallery
Masonry は、サムネイルの横幅を統一して、希望の表示幅で整頓して表示される。
縦写真は写真通り縦に表示されるのでデザイン的にオシャレ。
マウスオンで、サムネイルのズームも選択可能。 - Simple Portfolio
Simple Portfolio は、一枚ずつタイトルと文章が表示される。シンプルにサムネイルが一覧になるデザイン。
画像アップロード時に「キャプション」と「説明」に書いたテキストが、そのまま表示される。 - Justified Gallery
Justified は、横の列に揃うように自動的に敷き詰めて表示される。
デザイン的にかっこいいギャラリー。 - Single Thumbnail Gallery
Single Thumbnail は、一枚の画像を lightbox で表示するためのもの。
ギャラリーには不向き。 - Mixed ( Images + Videos )
Mixed は、画像と動画の両方でギャラリーが作成できる。
ビデオオプションの FooVideo は 有料 Extensions 。
ギャラリーテンプレートが増えたので、テンプレートを新しくしようかとおばあちゃんに聞いたら、今までのものでいいとのことなのでテンプレートはデフォルトの Responsive Image Gallery 。
サムネイルの角を角丸にしたけど、おばあちゃんがイマイチだというので却下。
なので、サムネイルの背景に幅と影を追加して、《 おばあちゃんの庭仕事 》ページのプチリニューアルが完了。
写真ギャラリーの完成ページは ⇒ こちら
今回は使わなかったけど、「 Appearance 」でサムネイルを丸くして、「 Color Effect 」の「 Colorize 」を使えばクールなアパレルブランドのサイトなんかにも利用できそうだし、進化するアップデートは本当にありがたい。
使ったことはないけど、ひょっとしたら有料の Lightbox だったら念願のスライドショーができるのかも…。
アップデートして機能拡充の『 FooGallery 』は、やっぱりおススメのプラグイン。