WordPressに自由度の高い画像ギャラリーを設置できるプラグイン：FooGallery

前回の記事では、ワードプレスの標準機能を使って

サイト内に、画像ギャラリーを設置する方法を解説しました。

 

簡単操作で画像を綺麗に表示できて、便利な機能ではあるのですが

表示させた画像にリンクを設置できないなど、微妙に惜しい部分もありました。

 

 １．FooGallery のインストール方法

FooGallery は、ワードプレスの公式プラグインです。

プラグイン追加ページまたは、プラグインをダウンロードしてインストールしましょう。

サイトリンクFooGallery プラグインページ

 

プラグインのインストール方法がわからない方はこちら。

参考ページWordPressにプラグインをインストールする2つの方法

 

FooGallery の公式サイトでは有料プランも紹介されていますが、無料プランだけでも十分使えます。

 

今すぐインストールをクリックするとこのような画面が表示されますが、そのまま スキップ をクリックしましょう。

 

 

FooGallery のインストールが終わったら、続けて FooBox もインストールしましょう。

 

FooBox は、Lightbox という機能を使って画像を拡大表示させるためのプラグインです。

FooGallery とセット運用が基本だと思ってもらったらOKです。

 

管理画面左側メニューに項目が追加されているので、FooGallery ＞ Extensions と進んで、FooBoxFree の Download ボタンをクリックしましょう。

 

ダウンロードが終わると、ボタンが Activate（有効化）に変化するので、もう一度クリックします。

 

先ほどと同じ画面が表示されるので、もう一度スキップをクリックします。

 

３．FooGallery の設定方法と使い方

FooGallery では、投稿ページを編集するような感じで、ギャラリーごとに画像を管理することが出来ます。

 

新しくギャラリーを作るには、まず管理画面から FooGallery ＞ Add Gallery と進みましょう。

 

新しいギャラリーを追加画面が開きました。

これらのメインの設定項目を、以下の３つに分けて解説していきます。

 

３－１ Add New Gallery

ギャラリーのタイトルです。

このタイトルはギャラリーには表示されないので、自分がわかりやすい名前を付けましょう。

 

３－２ Gallery Items

ここで、ギャラリーに表示させる画像を選択していきます。

普段投稿ページに画像を設置するときと同じ方法で、ギャラリーに画像を追加することが出来ます。

アイテムの管理	追加した画像の並べ替えなどができます
ギャラリープレビュー	実際に設置した時の表示を確認できます
メディアライブラリから追加	このボタンからギャラリーに画像を追加します

 

ギャラリーに追加したい画像を選択したら、メディアを追加ボタンをクリックします。

 

 

ギャラリーに追加した画像は、このようにドラッグ&ドロップで直感的に並べ替えすることが可能。

※画面をクリックで動画が再生されます。

 

３－３ Gallery Settings

最後にギャラリー設定で、表示方法やデザイン等を細かく設定していきます。

Gallery Settings

画像ギャラリー全体のデザインを設定します。

９項目表示されますが、無料で使えるのは「PRO」が付いていない上から６つです。

 

 

続いて、ギャラリーの各項目の設定を確認しましょう。

 

上で選択したギャラリーデザインによって設定項目は変わりますが、

ここでは、1番標準的な「 Responsive Image Gallery 」の各項目を解説します。

General（一般設定）

画像サイズや Lightbox の使用の有無などを設定する項目です。

Thumbnail Size	サムネイル画像の表示サイズを設定します（px）
Link To	画像のリンク先を設定します
Lightbox	Lightbox 使用の有無を設定します
Spacing	画像の間隔を設定します（px）
Alignment	左寄せ・中央寄せ・右寄せを設定します

 

Gallery Settings（外観設定）

ギャラリー全体のデザインなどを設定する項目です。

Theme	ギャラリー全体のテーマを設定します
Border Size	サムネイル画像の周りの枠の幅を設定します
Rounded Comers	サムネイル画像の角の丸さを設定します
Drop Shadow	サムネイル画像の周りの影を設定します
Inner Shadow	サムネイル画像の中の影を設定します
Loading Icon	画像が読み込まれる時のアイコンを設定します
Loaded Effect	画像が表示された時の挙動を設定します

Lightbox

Lightbox は有料版のみ使える項目なので、無料版で操作することはできません。

 

Hover Effects（ホバーエフェクト）

マウスホバー（マウスのポインターをサムネイル画像の上に持ってきた時）の、エフェクト（効果）の設定項目です。

Effect Type	マウスホバーエフェクトの有り無しを設定します
Theme	ホバーエフェクトのテーマを設定します
Color Effect	マウスホバーエフェクトの色を設定します
Scaling Effect	マウスホバー時のサムネイル画像のアニメーションを設定します
Caption Visibility	キャプション(画像の説明文)の表示スタイルを設定します（下の Captions の設定に反映されます）
Transition	ホバーエフェクトのアニメーションを設定します
Icon	マウスホバー時に画像の上に表示されるアイコンを設定します

 

Captions（画像の説明文）

画像に表示させる、タイトルと説明文の引用元を設定する項目です。

Title	画像に表示させるタイトルの引用元を設定します
Description	画像に表示させる説明文の引用元を設定します
Limit Caption Lingth	説明文の文章の長さを制限するか否か

 

Paging（ページ設定）

画像ギャラリーの表示数を制限して、複数のページで分割表示させるかどうかの設定項目です。

Paging Type	ページング表示するか否かを設定します（None を選択すると他の設定項目は閉じます）
Page Size	１ページに表示させるサムネイル画像の数を設定します
Position	ページングのドットマークを表示させる位置を設定します
Theme	ページングマークのテーマを指定します
Scroll To Top	トップにスクロールするか否かを設定します
Paging Output	ページングの出力形式を設定します

 

 

Filtering（フィルタリング）

フィルタリングも有料版専用の項目になります。

Video（ビデオ）

Video 機能では、YouTube などの動画をギャラリーに埋め込む事ができますが、こちらも有料版の機能になります。

Advanced（高度な設定）

高度な設定では、ギャラリーごとにクラスを設定したり、画像の遅延読み込みを無効にするなどの設定をすることができます。

よくわからない場合は、特にいじらなくても普通に使うことが出来ます。

 

設定がすべて終わったら、画面右側の公開ボタンをクリックしましょう！

４．FooGallery をサイトに表示させる方法

FooGallery で作成した画像ギャラリーは、ショートコードを使ってサイトのどこにでも設置することができます。

 

今作ったギャラリーを、実際に表示させたのがこちらです。

 

ギャラリーは、元からレスポンシブ表示に対応しているので、

PC でもスマホでもデザインが崩れることなく、綺麗に整列して表示されます。

 

これを応用すると、このようにリンク付きのボタンを作成することも可能です。

 

さいごに

無料機能だけでも、自由度の高い画像ギャラリーをサイトに設置することが出来る

FooGallery の設定方法と使い方について解説しました。

 

今回ご紹介したデザイン以外にも、さまざまな表示スタイルが選択できます。

 

ワードプレス標準のギャラリー機能に、物足りなさを感じていた方にとっては

まさに理想的なプラグインだと言えるのではないでしょうか。

 

このページのまとめです。

 

 

注目の記事WordPressで画像を横並びにしてギャラリーを簡単に作る方法

注目の記事サイトの表示速度を改善！無料で超お手軽に画像ファイルを圧縮する方法がこれ