
前回の記事では、ワードプレスの標準機能を使って
サイト内に、画像ギャラリーを設置する方法を解説しました。
簡単操作で画像を綺麗に表示できて、便利な機能ではあるのですが
表示させた画像にリンクを設置できないなど、微妙に惜しい部分もありました。
- 自由度の高い画像ギャラリーをサイトに設置できる
- ギャラリーごとにデザインを変更するのも簡単
- 複数の画像ギャラリーの一括管理
- サイトのメニューボタンを作ることも可能
目次
1.FooGallery のインストール方法
FooGallery は、ワードプレスの公式プラグインです。
プラグイン追加ページまたは、プラグインをダウンロードしてインストールしましょう。
サイトリンクFooGallery プラグインページ
プラグインのインストール方法がわからない方はこちら。
参考ページWordPressにプラグインをインストールする2つの方法
FooGallery の公式サイトでは有料プランも紹介されていますが、無料プランだけでも十分使えます。
今すぐインストールをクリックするとこのような画面が表示されますが、そのまま スキップ をクリックしましょう。
FooGallery のインストールが終わったら、続けて FooBox もインストールしましょう。
FooBox は、Lightbox という機能を使って画像を拡大表示させるためのプラグインです。
FooGallery とセット運用が基本だと思ってもらったらOKです。
Easy FancyBox プラグインを使っている場合は、FooBox の機能と競合してしまうので、先にアンインストールしておきましょう。
管理画面左側メニューに項目が追加されているので、FooGallery > Extensions と進んで、FooBoxFree の Download ボタンをクリックしましょう。
ダウンロードが終わると、ボタンが Activate(有効化)に変化するので、もう一度クリックします。
先ほどと同じ画面が表示されるので、もう一度スキップをクリックします。
3.FooGallery の設定方法と使い方
FooGallery では、投稿ページを編集するような感じで、ギャラリーごとに画像を管理することが出来ます。
新しくギャラリーを作るには、まず管理画面から FooGallery > Add Gallery と進みましょう。
新しいギャラリーを追加画面が開きました。
これらのメインの設定項目を、以下の3つに分けて解説していきます。
- Add New Gallery(ギャラリーのタイトル)
- Gallery Items(ギャラリーに表示する画像)
- Gallery Settings(ギャラリー設定)
3-1 Add New Gallery
ギャラリーのタイトルです。
このタイトルはギャラリーには表示されないので、自分がわかりやすい名前を付けましょう。
3-2 Gallery Items
ここで、ギャラリーに表示させる画像を選択していきます。
普段投稿ページに画像を設置するときと同じ方法で、ギャラリーに画像を追加することが出来ます。
アイテムの管理 | 追加した画像の並べ替えなどができます |
---|---|
ギャラリープレビュー | 実際に設置した時の表示を確認できます |
メディアライブラリから追加 | このボタンからギャラリーに画像を追加します |
ギャラリーに追加したい画像を選択したら、メディアを追加ボタンをクリックします。
ギャラリーに追加した画像は、このようにドラッグ&ドロップで直感的に並べ替えすることが可能。
※画面をクリックで動画が再生されます。
3-3 Gallery Settings
最後にギャラリー設定で、表示方法やデザイン等を細かく設定していきます。
Gallery Settings
画像ギャラリー全体のデザインを設定します。
9項目表示されますが、無料で使えるのは「PRO」が付いていない上から6つです。
続いて、ギャラリーの各項目の設定を確認しましょう。
上で選択したギャラリーデザインによって設定項目は変わりますが、
ここでは、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 | 1ページに表示させるサムネイル画像の数を設定します |
Position | ページングのドットマークを表示させる位置を設定します |
Theme | ページングマークのテーマを指定します |
Scroll To Top | トップにスクロールするか否かを設定します |
Paging Output | ページングの出力形式を設定します |
Filtering(フィルタリング)
フィルタリングも有料版専用の項目になります。
Video(ビデオ)
Video 機能では、YouTube などの動画をギャラリーに埋め込む事ができますが、こちらも有料版の機能になります。
Advanced(高度な設定)
高度な設定では、ギャラリーごとにクラスを設定したり、画像の遅延読み込みを無効にするなどの設定をすることができます。
よくわからない場合は、特にいじらなくても普通に使うことが出来ます。
設定がすべて終わったら、画面右側の公開ボタンをクリックしましょう!
4.FooGallery をサイトに表示させる方法
FooGallery で作成した画像ギャラリーは、ショートコードを使ってサイトのどこにでも設置することができます。
今作ったギャラリーを、実際に表示させたのがこちらです。
ギャラリーは、元からレスポンシブ表示に対応しているので、
PC でもスマホでもデザインが崩れることなく、綺麗に整列して表示されます。
これを応用すると、このようにリンク付きのボタンを作成することも可能です。
さいごに
無料機能だけでも、自由度の高い画像ギャラリーをサイトに設置することが出来る
FooGallery の設定方法と使い方について解説しました。
今回ご紹介したデザイン以外にも、さまざまな表示スタイルが選択できます。
ワードプレス標準のギャラリー機能に、物足りなさを感じていた方にとっては
まさに理想的なプラグインだと言えるのではないでしょうか。
このページのまとめです。
- FooGallery のインストール方法
- FooBox もあわせてインストールしておく
- FooGallery の設定方法と使い方
- 通常の画像ギャラリーの他にリンクボタンなどにも応用可能
さっそく私のブログにもインストールして使ってみたいと思います
注目の記事WordPressで画像を横並びにしてギャラリーを簡単に作る方法
注目の記事サイトの表示速度を改善!無料で超お手軽に画像ファイルを圧縮する方法がこれ