軽くて使い勝手が良いので重宝している『 FooGallery 』がアップデートされた。

機能がさらに拡充したので、《 おばあちゃんの庭仕事 》ページ を更新するタイミングでプチリニューアル。

インストールから設置までの流れは変わっていないけど、UI がリニューアルされてギャラリーのデザイン設定が進化したので、以下、覚え書き。

FooGalleryとは

レスポンシブデザイン対応で細かい調整がしやすい WordPress のギャラリープラグイン。

インストール方法

FooGalleryインストール

  1. 管理画面左側「プラグイン」から「新規追加」で「 FooGallery 」を検索。
  2. 「 FooGallery 」が表示されたら「今すぐインストール」をクリック。
  3. インストールが完了したら「プラグインを有効化」をクリックして有効化。

Foogallery設定

有効化すると FooGallery の使用に関するデータを freemius.com に送信するかを選択する画面が表示されるので、送信しないのであれば「スキップ」をクリックして完了。

FooBox Image Lightbox設定

Lightbox 機能を使う場合は「 Extensions(拡張機能)」の『 FooBox Free 』を有効化する。

FooBox設定

  1. 管理画面左側「 FooGallery 」から「 Extensions 」をクリック。
  2. 「 FooGallery Extensions 」画面が表示されたら「 FooBox Free 」の「 Download 」をクリック。
  3. 画面上部に、「 The extension FooBox FREE was successfully downloaded and can now be activated. Activate immediately 」と表示されるので「 Activate immediately 」をクリックして有効化。

設定項目があるけど『 FooBox Image Lightbox 』は特に設定することなく有効化すれば使用 OK 。

※プラグイン『 Head Cleaner 』を有効化すると Lightbox 機能が使えなくなったので、キャッシュ系プラグインを使用する場合は注意。

ギャラリー作成方法

次は、画像ギャラリーを作成する。

Foogallery設定

1 . 管理画面左側「 FooGallery 」から「 Add Gallery 」をクリックして新規ギャラリーを作成。

Foogallery設定

2 . ギャラリーにタイトルを付けて、「 Add Media 」をクリックして画像をアップロード。

アップロードした画像は管理画面でドラッグ&ドロップで配置を変えることも可能。

※「 FooBox 」を使用する場合は画像をアップロードする際に、添付ファイルの詳細の「 Custom Target 」を「 FooBox 」に設定しないと Lightbox 機能が使用できないので注意。

ギャラリー項目設定

画像のアップロードが完了したら「 Gallery Settings 」の各項目を設定する。

General(一般)

FooGallery詳細設定

  1. ギャラリーのデザインを選ぶ。
  2. ギャラリーのサムネイル画像サイズを決める。
  3. サムネイル画像のリンクを選ぶ。
  4. Lightbox を使用するかと種類を選ぶ。
  5. サムネイルとサムネイルとの間のスペース( margin )を決める。
  6. サムネイルを左端揃え、センター揃えにするかなど表示位置を決める。
  7. 画像の解像度を選ぶ。
  8. サムネイルの表示順序の条件を選ぶ。
  9. サムネイルのキャッシュ処理。

Appearance(外観)

Foogallery設定

  1. 背景、罫線などサムネイルのデザインを選ぶ。
  2. サムネイルの背景幅を選ぶ。
  3. サムネイルの四隅の角の角丸のサイズを選ぶ。
  4. サムネイルの背景につける影の広がりを選ぶ。
  5. サムネイルの内側につける影の広がりを選ぶ。
  6. Loading(読み込み中)のアニメーションを選ぶ。
  7. Loading(読み込み中)がアニメーション動作するかを選ぶ。

Hover Effect(ホバー効果)

Foogallery詳細設定

  1. マウスオーバーする前とした後の色調を選ぶ。
  2. マウスオーバーした時にサムネイルが拡大するかを選ぶ。
  3. キャプションの表示方法を選ぶ。
  4. マウスオーバーした時のトランジション効果(時間的変化)の種類を選ぶ。
  5. マウスオーバーした時のアイコンを選ぶ。

Captions(キャプション設定)

Foogallery詳細設定

  1. 画像タイトルに使うテキストを選ぶ。
  2. 画像の Description(説明)に使うテキストを選ぶ。
  3. キャプションの長さを制限するかを選ぶ。

PagingとAdvanced

Paging と Advanced は特に設定する必要無いのでデフォルトのままで OK 。

ギャラリー設置方法

「 Gallery Settings 」の詳細を設定してギャラリーが完成したら「公開」して、「 Gallery Shortcode 」をギャラリーを表示する固定ページに貼る。

FooGallery公開

これで、「 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 』は、やっぱりおススメのプラグイン。