注目度の高い記事
Wordpressに自由度の高い画像ギャラリーを設置できるプラグイン:FooGallery
この記事では、ワードプレスを使ったサイトに、画像ギャラリーを設置できるプラグイン「 FooGallery 」の設定方法と使い方を解説しています。

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

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

 

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

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

 

わかば
あれはあれで使いやすいんですけど、確かにもう少し機能が良かったらなーとは感じましたね

山本
今回紹介する「 FooGallery 」は、そういった意味でも、かゆいところに手が届きまくりの画像ギャラリー用プラグインなんだよ

わかば
うわーそれは楽しみですねー!!
FooGallery でできること
  • 自由度の高い画像ギャラリーをサイトに設置できる
  • ギャラリーごとにデザインを変更するのも簡単
  • 複数の画像ギャラリーの一括管理
  • サイトのメニューボタンを作ることも可能

 1.FooGallery のインストール方法

FooGallery のインストール方法

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

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

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

 

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

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

 

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

FooGallery のインストール方法

 

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

FooGallery のインストール方法

 

 

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

 

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

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

 

Easy FancyBox プラグインを使っている場合は、FooBox の機能と競合してしまうので、先にアンインストールしておきましょう。

 

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

FooGallery のインストール方法

 

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

FooGallery のインストール方法

 

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

FooGallery のインストール方法

山本
これで FooGallery を使う準備は完了です

 

3.FooGallery の設定方法と使い方

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

 

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

FooGallery の設定方法と使い方

 

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

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

  1. Add New Gallery(ギャラリーのタイトル)
  2. Gallery Items(ギャラリーに表示する画像)
  3. Gallery Settings(ギャラリー設定)

FooGallery の設定方法と使い方

 

3-1 Add New Gallery

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

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

FooGallery の設定方法と使い方

 

3-2 Gallery Items

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

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

FooGallery の設定方法と使い方

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

 

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

FooGallery の設定方法と使い方

 

 

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

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

 

3-3 Gallery Settings

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

Gallery Settings

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

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

FooGallery の設定方法と使い方

 

山本
表示サンプルを用意しておいたので、気になる項目をチェックしてみてください
Responsive Image Gallery
レスポンシブ画像ギャラリー
Image Viewer
画像ビューア
Justified Gallery
Justifeid Gallery
Masonry Image Gallery
Masonry Image Gallery
Simple Portfolio
Simple Portfolio
Single Thumbnail Gallery
Single Thumbnail Gallery

 

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

 

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

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

General(一般設定)

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

FooGallery の設定方法と使い方

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

 

Gallery Settings(外観設定)

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

FooGallery の設定方法と使い方

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

山本
Border Size を「 None 」に設定しておくと、サムネイル画像が綺麗に表示されます

Lightbox

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

 

Hover Effects(ホバーエフェクト)

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

FooGallery の設定方法と使い方

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

 

Captions(画像の説明文)

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

FooGallery の設定方法と使い方

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

 

Paging(ページ設定)

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

FooGallery の設定方法と使い方

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

 

山本
たとえば、”ページサイズを4” に設定すると、16個の画像がこのように表示されます

FooGallery の設定方法と使い方

 

Filtering(フィルタリング)

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

Video(ビデオ)

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

Advanced(高度な設定)

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

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

 

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

FooGallery の設定方法と使い方

4.FooGallery をサイトに表示させる方法

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

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

 

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

山本
画像をクリックすると、Lightbox で大きく表示されます

 

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

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

 

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

山本
サンプルボタンのリンク先は、すべてわー研。のトップページに設定してます

 

さいごに

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

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

 

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

 

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

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

 

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

  • FooGallery のインストール方法
  • FooBox もあわせてインストールしておく
  • FooGallery の設定方法と使い方
  • 通常の画像ギャラリーの他にリンクボタンなどにも応用可能

 

わかば
これだけの機能が無料で使える、FooGallery ってちょっとすごすぎますね!

山本
応用次第で、いろんな使い道が考えられるよね

わかば
夢が広がりますねー♪
さっそく私のブログにもインストールして使ってみたいと思います

山本
僕は有料版も使ってるから、またそっちの方も解説するよ

 

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

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

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事