【高機能】WordPressにギャラリーを追加できる「FooGallery」の使い方

「少し凝った、レスポンシブな画像ギャラリーを簡単に作成したい。」

こういった方向けの内容です。

ワードプレスには標準でギャラリーを設置する方法がありますが、少しカスタマイズしないとレスポンシブに対応しきれていない場合があります。

そうなるとCSSのカスタマイズが必要となるため、初心者には少し厳しい...
ですが、「FooGallery」という高機能プラグインを使うことで、この問題は一発で解決します。

というわけで、この記事ではFooGalleryの使い方について解説していきます。



FooGalleryを選んだ理由

ギャラリーのプラグインには種類がありますが、FooGalleryを選んだ理由を少しお伝えしておきます。

主な理由は下記です。

  • レスポンシブ対応
  • デザインが豊富
  • カスタマイズ性が高い

分かりやすく3点にわけましたが、つまりは「高機能」であるということです。

ワードプレスの標準のギャラリーはレスポンシブにカスタマイズが必要だったりするので、必須条件であるレスポンシブが手間なしで実装されているのはありがたいですね。

デザインが豊富なこととカスタマイズ性が高いことで幅も広がりますし、どんな用途でもある程度対応できる使いやすさは大きなポイントでしょう。

これに加えて、ユーザー数も10万オーバーと多いこともいい点ですね。

多くの人が使っているプラグインは、安全性な可能性が高いですし、アップデートが止まる可能性も低いので。

というわけで「FooGallery」を選んだわけですが、ここからは実際にインストール方法と使い方について解説していきます。

FooGalleryのインストール

まずはプラグインのインストールを行なっていきます。

  • STEP.1
    プラグインを検索

    ワードプレスの管理画面から、「プラグイン」→「新規追加」を選択し、「FooGallery」を検索します。

  • STEP.2
    インストール

    検索した「FooGallery」をインストールします。
    インストールしたら有効化しておきましょう。

インストール後にポップアップが出ますが、ここはスキップして大丈夫です。
これで使用できる状態になりました。

FooGalleryの使い方

FooGalleryの使い方は、以下の2点を抑えておけばOKです。

  • ギャラリーの作り方
  • 記事への設置方法

それでは1つずつ解説していきます。

ギャラリーの作り方

  • STEP.1
    作成画面へ移動

    ギャラリーを作成するには、ワードプレスの管理画面から「FooGallery」→「Add Gallery」を選択します。
    ここでタイトルを入力しておきましょう。

  • STEP.2
    写真の選択

    ギャラリーに使用する写真を選択していきます。
    ※画像の並びはドラッグ&ドロップで並び替えることができます。

  • STEP.3
    デザインを選択

    デザインを6種類の中から選びましょう。

これで完成。と言いたいところですが、説明が不十分なので「デザインについて」と「ギャラリーの詳細設定について」少しお伝えしておきます。

デザインについて

デザインはデフォルトで下記の6種類となっています。

  • Responsive Image Gallery:すべてサムネイル表示
  • Image Viewer:1枚のみを表示して矢印で切り替える表示
  • Justified Gallery:幅いっぱいの表示(縦並びです)
  • Masonry Image Gallery:レンガ表示(ピクセル指定もできる)
  • Simple Portfolio:キャプション(説明文)を入れれるサムネイル表示
  • Single Thumbnail Gallery:1枚のみを表示してクリックするとスライド表示

プレビューを見ながら切り替えれるので、この辺は実際に見ながら決めることができます。

用途と好みで選べますが、使いやすいのは「Responsive Image Gallery」と「Masonry Image Gallery」あたりかと思います。

ギャラリーは詳細に設定もできます

FooGalleryはギャラリー作成時の「Gallery Settings」という項目で、表示方法を変えることもできます。

具体例をあげておくと下記のような感じです。

  • 画像を丸にしたい:[Appearance]→[Rounded Corners]→[Full]
  • 影をつけたい:[Appearance]→[Drop Shadow]
  • カーソルをあてると浮き出る:[Hover Effects]→[Scaling Effect]→[Scaled]

上記内容でもごく一部という感じで、カスタマイズの範囲は非常に広いです。
ちなみにCSSによってカスタマイズすることが可能なので、コーディングができる方だと広がりはさらに半端ないですね。

ひとまず設定に関しての、重要な内容はここまでです。
デザインが決まったら、ギャラリーを保存してショートコードをコピーしておきましょう。

記事への設置方法

記事内への設置はショートコードを挿入するだけです。

  • STEP.1
    ショートコードの確認

    作成したギャラリーのショートコードは、管理画面の「FooGallery」→「Galleries」からも見ることができます。
    作成時にコピーをしていな場合はここでショートコードのコピーをとっておきましょう。

  • STEP.2
    記事にショートコードを挿入

    コピーしたショートコードを、記事内の入れたい場所にカーソルを入れて貼り付けます。

これで記事内にギャラリーが追加されました。

実際に確認してみるとこんな感じです。

上手くギャラリーの設置ができました。

今回の内容はこれで以上となります。
レスポンシブのギャラリーを手間をかけずに設置したいという方は、ぜひ試してみてください。

人気記事【初心者ブログにおすすめ】ワードプレスの有料テーマ5選+無料テーマ3選

人気記事【初心者向け】ゲームブログを収益化する方法+運営のコツを解説



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA