塚原 藍子塚原 藍子

サイトにギャラリーを追加したい。
イラストサイトみたいな見栄えにするには
どうすればいいんだろう?

このような悩みに答えます。

 

本記事の内容
  • FooGalleryとFooBoxの使い方が分かる
  • 使っている実例が分かる
  • イラストの上達方法が分かる

 

 

ポートフォリオサイトには欠かせない

ギャラリー、その中でもWordpressで

人気の「FooGallery」プラグインに

ついて解説していこうと思います。

 

また、このプラグインの作者は

LightBoxプラグイン「FooBox」も

作成しており、2つは相性が良いので

同時に「FooBox」プラグインも

解説していきますね。

※この記事は3分で読み終わります。




FooGalleryとFooBoxの使い方を解説!イラストサイトに必須!

では早速、導入方法を解説していきます。

FooGalleryの使い方とインストール方法

1.メニューから「プラグイン」>「新規追加」を選択し「FooGallery」を検索、「今すぐインストール」ボタンを押します。

インストール後の「有効化」も忘れずに!!

2.メッセージが表示されますが、気にせず「Skip」して大丈夫です。

以上で「FooGallery」のインストールは完了なのですが、

ギャラリー追加設定画面を見てみると「LightBox」の選択画面が「Not Installed」となっていますよね。

ですので、同じ作者で相性の良い

「FooBox」もインストールしちゃいましょう。

FooBoxの使い方とインストール方法

1.メニューから「プラグイン」>「新規追加」を選択し「FooBox」を検索、「今すぐインストール」ボタンを押します。

インストール後の「有効化」も忘れずに!!

2.メッセージが表示されますが、気にせず「Skip」して大丈夫です。

以上でインストールは完了です。

FooGalleryとFooBoxの使い方とカスタマイズ

以下の図の様に設定します。

↑図を見ながらやってみてください。

  1. メニューから「FooGallery」>「Add Gallery(ギャラリーの追加)」を選択
  2. 画像ファイルをドラッグ&ドロップで放り込む
  3. ギャラリーの種類を選択
  4. ギャラリーの細かな設定を行う。
    (とりあえずデフォルトのままでも構いません。色々弄ってうちに覚えると思います。)
  5. 最後に「公開」ボタンを押します。

FooGallery設定のやり方について

英語は下手くそですがなんとなく訳しました。

FooBox設定などは特になし

FooBoxのほうが特に私は変更していませんが、

キャプションを出すか?とか、

記事内のありとあらゆる画像をFooBoxでポップアップするか?とか、

そういう設定ができます。

あと画像下の1/3とかの記述の表記とか。

FooGallery設定各項目説明と公開方法

サイドバーに現れる「FooGallery」をクリックすると現れるページの上部にある「Add Gallery」でギャラリーを作成することができます。

作ったギャラリーを一旦保存すると、サムネイルがこちらが設定した画像の一枚目になります。

最初はデフォルトの画像が表示されています。

 

あとはショートコードをコピーして、ギャラリーを表示したい投稿ページに張り付けるだけです。

FooGalleryは一番お勧めのギャラリープラグイン

私もいろいろなワードプレス用のギャラリープラグインを導入しては変更して、導入しては変更して、と繰り返してきましたが、どれもデザインがいまいちだったり操作性があまりよくなかったりして、なかなかしっくりくるものがありませんでした。

 

そんな中、出会ったのが今回ご紹介した「Foo Gallery」です。実際に使ってみると機能もデザインも最高なプラグインだと思います。

 

FooBoxのLightbox(画像が拡大されて表示される機能)はスマホにも最適化されているので、非常にシンプル&オシャレで使い勝手が非常に良いです。

FooGalleryは、そこらのプラグインよりもデザイン性が高く、高性能な上、管理しやすい万能のギャラリープラグインなので是非ご活用して頂ければいいと思います。

まとめ:イラストサイトはFooGalleryとFooboxで見栄えUP

ここでは「FooGallery」「FooBox」の2つのプラグインの使い方について解説しました。

このプラグインはイラスト以外でも写真など表示するにも使えるので、多様性のあるプラグインになりますので是非導入して頂ければいいと思います。

 

この2つのプラグインを導入しつつ、イラストスキルを上げていきましょう。

↑記事でイラスト上達方法について解説しています。