フォトギャラリーが簡単に作れる!WordPressプラグインFoo Gallery

2019-07-04

たくさん撮りためた貴重な撮影画像を整理して、写真ギャラリーを作成しててみましょう。今回はこのサイトで使っている「Foo Gallery」で写真ギャラリーとアルバムを作成する方法を紹介します。

※「Foo Gallery」のインストールが済んだ状態から説明します。

1.写真の大きさを調整しよう

まずはとりためたデジカメやiPhoneの写真ファイルをWeb用に加工(リサイズ)して使いやすくしましょう。
面倒な解説を省き、誤解を恐れず定義すると、すべての写真の横幅を1200pxに統一してしまうのです。
通常デジカメやiPhoneの写真は横幅が4000px以上あって、Webで処理するには大きすぎますので、これをホームページで使用するのに適した大きさに縮小(リサイズ)します。ただし、縦横比はそのままで変更しません。

※pxとは:ピクセルと言い、コンピュータで画像を扱うときの最小単位、写真画像の大きさを表します。

<参考>各メディアの物理的な解像度
ハイビジョンモニタ・・・物理的な解像度 :横1,920 × 縦1080px
iPhone 6 Plus・・・ブラウザサイズ:414 × 736px
物理的な解像度 :1,080 × 1,920px 解像度、401ppi、5.5インチ
iPhone 6  ・・・ブラウザサイズ :375 × 667px
物理的な解像度 :750 × 1,334px  解像度、326ppi、4.7インチ
iPhone 5系 ・・・ブラウザサイズ :320 × 568px
物理的な解像度 :640 × 1,136px  解像度、326ppi、4インチ

2.写真ギャラリーのプラグイン「Foo Gallery」

写真ギャラリーのプラグイン「Foo Gallery」は、操作も分かりやすく、いろいろ細かい調整もしやすいです。
このプラグイン単体だと、写真のスムーズな移動が可能なLightbox機能が動作しないため「Foo Gallery」プラグインと併せて「FooBox Image Lightbox」も同時にインストールします。
ギャラリーとは数十枚の写真集、アルバムとはギャラリーの集まりです。
ギャラリーに名前を付けると、アルバムには先頭の写真が表示され、その写真の下部にギャラリー名が上書きされます。

3.FooGalleryから写真を追加します

プラグインを有効化すると、ダッシュボードの左側に「Foo Gallery」の項目が新たに追加表示されます。
まずは「Add New Gallery」から、ギャラリーを新規作成します。
ギャラリーのタイトルは、管理しやすいお好きなタイトルを入力してください。
あとはGallery Items から写真のアップロードします。
次に、Gallery Setting からギャラリーテンプレートの選択をします。無料版では5パターンのギャラリーデザインが選べます。
各設定がすんだら、作成したギャラリーのショートコードを表示したいページにペーストします。

4.各種表示方法のGallery Templateが用意されています。

1.Responsive Image Gallery(デフォルト)
レスポンシブに対応した、使いやすいデザイン。サムネイルの枠線のテイストや四角い窓は丸い窓か選べます。
サムネイルのサイズも変更できるので、どんなサイトのデザインに合わることが可能です。
2.Masonry Image Gallery
サムネイルの横幅を統一して、希望の表示幅で整頓して表示されます。Masonry(メイソンリー)とは石造建築のこと。
オンマウスで、サムネイルがズームさせるかさせないかも選択可能。スマホ表示も最適化してくれます。
3.Simple Portfolio
シンプルにサムネイル一覧のデザインです。画像アップロード時に、「キャプション」「説明」に書いたテキストが、そのままテキスト表示されるので商品リストに最適です。
4.Justified Gallery
横の列に揃うように自動的に敷き詰めて表示してくれます
5.Single Thumbnail Gallery
ページ上に一覧は表示せず、lightboxで表示させるようユーザーに促します。

Extensionsで追加したGallery Template(無料)

6.Polaroid Template(街並み)Polaroid Template
ポラロイドカメラで撮ったような画枠で表示されます。
7.Qwl Carousel Template(街並み2)Qwl Carousel
クリックすることによりカルーセルの動作で左右に移動します。Carousel(カルーセル)とは回転木馬のこと。

5.アルバムの作成

FooGallery→Album→新規作成 新しく作るアルバムの名前を入力します。

6.こだわりの変更箇所

FooBox Image LightboxはFooBox中に設定項目がありますが、とくにデフォルトを変更するところはありません。

7.まとめ

フォトギャラリーが必要なサイトを運営される方は、ぜひとも試してみてください。
簡単だし、使いこなせばとても便利ですよ。
以上です。