WordPressプラグイン「FooGallery」で作るおしゃれな写真ギャラリーを導入しました！

どうも、理容師やってるmasa（barber m portrait）です。

フォトブログを運営してるのに今まで写真ギャラリーがこのブログにありませんでした。ブログすらあまり更新していなかったので写真の数も少ないですけどね（写真は撮ってますよ！w）なかなかギャラリー作りに重い腰が上がらないまま3年の月日が経とうとしてます。

2018年はこのフォトブログに注力を注いでいくつもりなので満を持して写真ギャラリーを作ることにしました！

WordPressプラグイン「FooGallery 」！！

WordPressでの写真ギャラリーはプラグインなしでも作る事は出来ますしギャラリー用のプラグインも数多く出てます。そんな中から僕は「FooGallery 」を今回導入することにしました！

僕がギャラリープラグインとして「FooGallery」を選んだ理由をこのブログでご紹介していきます。

無駄のない研ぎ澄まされたシンプルデザイン

シンプルイズベストという言葉がありますが、このFooGalleryのデザインはまさにその言葉が似合います。豊富なカスタマイズ性能も持ち合わせつつも、その洗練し無駄を削ぎ落とし完成されたギャラリーはとても素敵なデザインです。このシンプルなデザイン性は僕の理想としていた写真ギャラリーを見事に作り出してくれました。

困らせない無料テンプレート

ギャラリーのデザインは無料で6つから選ぶことが出来ます。
シンプルなものからスライドショー式のものまでと必要最低限が揃ってるんです。

• 「Responsive Image Gallery」ー 自由にカスタマイズ可能なシンプルギャラリー
• 「Image Viewer」ー 左右スライド式のギャラリー
• 「Justifild Gallery」ー 写真の縦幅を揃えて詰めたギャラリー
• 「Masonry Image Gallery」ー 写真の横幅を揃えて詰めたギャラリー
• 「Simple Portfolio」ー 一目で写真とキャプションがわかるシンプルギャラリー
• 「Single Thumbnail Gallery」ー サムネイルとして1枚だけ表示されます

豊富なカスタマイズ性能

細かいディテールは無料とは思えないほどカスタマイズする事ができます。
写真の枠線、角の丸み、影など様々。ロード中のアイコンまで選べます。
タイトルやキャプションの表示非表示も選択可能。
本当に無料でここまで出来るのがすごいです。

レスポンシブにももちろん対応

今では欠かせないレスポンシブ設計なのでスマホやタブレットでも最適化されます。
僕も基本的にスマートフォン向けでブログ構築を考えているのでレスポンシブ設計は本当に助かります。

FooGallery導入方法

それでは次にWordpressへのFoogallery導入方法を説明していきます。
導入も非常に簡単です！この“簡単”っていうのが嬉しいです。
僕みたいにWordpressってプラグイン入れとけばそれなりにかっこよくなるよね！？なんて思ってる人には本当オススメ！

ダウンロード

まずは新規プラグインからダウンロード。

ダッシュボードのプラグイン「新規追加」画面へ進み「FooGallery」を検索してください。すぐに出てきますのでダウンロードして有効化しましょう！すると左のサイドバーに「FooGallery」が追加されます。

拡張プラグインのダウンロード

「FooGallery」はそのままでも充分使えますが、Lightboxを表示させたい場合は同時に拡張プラグインの「Foobox Image Lightbox」をダウンロードしてください。Lightboxというのはギャラリー一覧されてる中から1枚を選択した時にポップアップ式で写真が表示されるものを指します。

あって損はないのでダウンロードをオススメします！

新規ギャラリーの作成

左のサイドバーから「FooGallery」を選択して“Add Gallery”から新規のギャラリーを作ります。
今回はまだ作ってなかったディズニーのギャラリーを作ろうと思います。
ギャラリー作成は固定ページを使っていきます！

新規ギャラリー編集画面が出てきたらまずは写真を追加しましょう！

“Add Media”を選択するとメディア一覧画面になるので、追加したいメディアを選択していきます。
僕は今回途中からこのギャラリーを作ったのでメディアが溜まってて選ぶのに苦労しましたが、記事を書くたびに追加していけるので今後も簡単に更新できそう！

タイトルとキャプションはあとで表示させることもできるので必要なら入力しておいて下さい。この時「Custom Target」を［FooBox］にしておくことでプラグインのLight boxが機能するようになります。

カスタマイズ性能

そして6つの無料テンプレートから1つ選びましょう。［Gallery Setting］小窓からお気に入りのテンプレートを選択します。
今回は“Responsive Image Gallery”を選びますが、選んだテンプレートによってカスマイズ方法が変わってきます。勝手に公開される事はないので試しに選択してみるのもいいと思います。

この［Gallery Preview］を選択するとカスタマイズしている内容をプレビューしながら作業を進めることができます。

他にもカスマイズが色々できます！
英語での表記ですが、こちらもプレビューしながらできるのでわかりやすいです。

ショートコードの貼り付け

さて、こうして作成したオリジナルのギャラリーをどうやって記事に貼り付けるのでしょうか？？

右側のフィールドにある［Gallery Shortcode］にあるショートコード。これをコピーします。あとはそのショートコードを記事内の好きなところに貼るだけです！めちゃめちゃ簡単！

ショートコードなしでギャラリーを表示させる方法

ショートコードをコピーし忘れた！！という時があっても大丈夫です！作成する記事の編集画面に［Add FooGallery］が追加されてますので選択しましょう。

すると作ったギャラリーが一覧で表示されます。追加したいギャラリーを選択し［Insert Gallery］から追加します。

はい、追加されましたね！すごく簡単！！

まとめ FooGallery で洗練されたフォトギャラリーを作ろう

Foogalleryはダウンロードから導入までがとても簡単でWordPress初心者でもすぐに使いこなせるプラグインです。シンプルだけどそのシンプルさの中でさりげなくカスタマイズできる。そんなところが僕はすごく好きですね。ギャラリーで迷ってるかたは是非この『FooGallery』を試してみてください！！！