TOP ブログ運営 カメラブロガーさんにオススメ!WordPressギャラリープラグイン「FooGallery」でお手軽実装

カメラブロガーさんにオススメ!WordPressギャラリープラグイン「FooGallery」でお手軽実装

みなさまこんにちは、ニシカワ(@bat_tari)です。

写真の公開をする為にギャラリーを設置しようと思いました。

WordPressの機能としてデフォルトで付随しているのでデザインをCSSで整えるとすぐ使えるのですが、画像をふわっと拡大するLightBoxの機能やスマホ・PCでの表示を調整するレスポンシブの機能を備えたりすると面倒なので、プラグインに頼ることに。

いい感じの物は無いかと探していると、高機能で使いやすい物を見つけたのでご紹介します。

sponsored link

FooGalleryで何が出来る?

ギャラリープラグインということで画像を並べて表示し、クリックした画像が拡大で表示されます。

FooGalleryの場合、並べ方のスタイルや拡大の際のアニメーション方法等を細かく設定する事が出来るので、自分のブログへ簡単にデザインを合わせられます。

また、英語のプラグインですが操作方法が直感的でわかりやすく、詳しい説明を見ずとも操作が可能です。

実際このプラグインを使ったギャラリーを前の記事で使用しているので参考にしてみてください。

4年前のミラーレス「SONY α6000」を購入した結果

FooGalleryの導入方法

公式ディレクトリに登録されているプラグインなのでWordpressの管理画面から自動インストールが可能です。

1.管理画面から「FooGallery」「FooBox Image Lightbox」をインストール


管理画面から「プラグイン」→「新規追加」→検索ボックスで「FooGallery」を検索の手順で行うと画像の用に2つのプラグインが表示されるので、両方インストールしよう。

ちなみにFooGalleryはギャラリー機能のプラグイン、Image LightBoxは画像をクリックした際「ふわっ」と表示させるLightBox機能のプラグインなので、そういった機能が不要な場合は前者のみで可能。ただ基本的にはLightBox機能もONにした方が見やすいと思う。

2.プラグインの有効化


今すぐインストールのボタンを押し、プラグインのインストールが完了すると、有効化と書かれた青いボタンに。

これをどちらとも有効化させることではじめてプラグインが使用できるようになります。

万が一違う画面を表示してしまっている場合、「プラグイン」→「インストール済みプラグイン」から有効化画面を表示させる事が可能です。

3.FooGalleryの情報を開発元に送信するかを確認


FooGalleryを利用するにあたって、使用状況等を開発元に送るかどうかの質問が表示される。

これは今後のアップデートなどで役立てられるようだが、Skipでも問題はなし。

FooGalleryの使い方

では早速使ってみよう。といっても操作は簡単なので安心して欲しい。

1.Galleryの新規作成


FooGalleryではプラグイン内でギャラリーを制作し、作ったギャラリーをショートコードで記事や固定ページに貼り付けるというのが基本的な流れ。

有効化が終わっていれば管理画面ダッシュボードに「FooGallery」が出来ていると思うので「Add Gallery」を選択する。

2.新規作成画面の説明


作成画面を開いたら入力画面が表示される。上から順番に下記のような感じ

  • ギャラリーのタイトル入力
  • 挿入する画像を選択
  • 各種設定
  • 独自CSSの追加

独自のCSSはよっぽどデザインに拘る人でないと使わないと思うので、上3つの設定をすればOK。

タイトルですが、追加しても記事に表示される事は無い(はず、デザインによっては表示されるかも?)ので自分が管理する上で分かりやすい名前を付けましょう

3.画像の追加


ギャラリーに追加する画像を追加していきます。
グレーのAdd Mediaボタンを押すと見慣れたメディア追加画面が表示されます。


ギャラリーに入れたい画像をクリックしていくと右上にチェックマークが表示されます。もちろん一度にいくつでも追加する事ができます。

また、新しい画像をアップロードしたい場合は画面左上からファイルのアップロードを行いましょう。

ひとつ忘れてはいけない設定がCustom TargetをFooboxにすること。

これをしないと、画像のサムネイルをクリックした時に、LightBoxが効きません。

4.ギャラリー各種設定


画像が追加し終わったらギャラリーの設定を行います。まず初めにチェックしたいのがギャラリー自体のスタイル。

ドロップダウンリストから何パターンか選択できるので、プレビューを見ながら変更してみましょう。

ちなみに画像選択欄の上にあるプレビューボタンで表示確認が可能ですよ。


その他の設定項目は触ってもらいながら確認していただければ幸いですが、特に弄ってて楽しいのはAppearanceの項目。

枠や影・ローディングのアニメーションなど見た目に関わる部分を簡単に設定出来ます。

5.作ったギャラリーの公開


これまでの流れで満足出来るギャラリーが作れたら、画面右の公開ボタンを押して公開してみましょう。
公開した後も変更があれば更新する事が出来ますので安心。これはWordpressの記事と同じ感じですね。

公開ボダンの下の方にあるRetina SupportはMacやiPhoneなどのRetinaディスプレイに対応するかどうかの項目。
対応すればするだけサーバーの容量を食うので、好みで設定してください。といってもとてつもなく大きいファイルが出来るわけでは無いので、チェックしておいて良いかも。

6.記事へショートコードを挿入


公開ボタンの下にあるGalleryショートコードをコピーして、記事の好きな部分に貼り付けます。

貼り付けた後記事を公開すると…


このように、いい感じにギャラリーが表示されます。

FooGalleryはお手軽で洒落乙なギャラリープラグイン

写真を沢山公開したりするブロガーさんは、ギャラリーで公開するとスペースを有効活用できますし、なんといっても管理が楽。

そして、なんとなく「こいつ出来る」的な雰囲気を醸し出す事ができます(当社比)ので、是非試してみてくださいね。

楽しいWordpressライフをおくりましょう。