「WordPressの標準機能でギャラリーを作ってみたけど物足りない。もう少し凝った、レスポンシブな画像ギャラリーを簡単に作成できないかなぁ。」
こういった方向けの内容です。
ワードプレスには標準でギャラリーを設置する方法がありますが、少しカスタマイズしないとレスポンシブに対応しきれていない場合があります。
そうなるとCSSのカスタマイズが必要となるため、初心者には少し厳しい...
ですが、「FooGallery」という高機能プラグインを使うことで、この問題は一発で解決します。
というわけで、この記事ではFooGalleryの使い方について解説していきます。
スポンサーリンク
目次
数あるプラグインの中から「FooGallery」を選んだ理由
まずはじめに「FooGallery」を選んだ理由を少しお伝えしておきます。
ギャラリープラグインはいくつかありますが、コレを選んだ理由としては下記のとおり。
- レスポンシブ対応可能
- デザインの種類が豊富
- カスタマイズ性が高い
分かりやすく3点にわけましたが、一言でいってしまえば「高機能」であるということです。
ワードプレスの標準のギャラリーはレスポンシブにカスタマイズが必要だったりするので、必須条件であるレスポンシブが手間なしで実装されているのはありがたいですね。
デザインが豊富なこととカスタマイズ性が高いことで幅も広がりますし、どんな用途でもある程度対応できる使いやすさは大きなポイントでしょう。
これに加えて、ユーザー数も10万オーバーと多いこともいい点ですね。
多くの人が使っているプラグインは、安全性な可能性が高いですし、アップデートが止まる可能性も低いので。
というわけで「FooGallery」を選んだわけですが、ここからは実際にインストールする方法や使い方について解説していきます。
WordPressにFooGalleryをインストールする
まずはプラグインのインストールを行なっていきましょう。
手順は以下の2ステップです。
- STEP.1プラグインを検索
ワードプレスの管理画面から、「プラグイン」→「新規追加」を選択し、「FooGallery」を検索します。
- STEP.2インストール
検索した「FooGallery」をインストールします。
インストールしたら有効化しておきましょう。
インストール後にポップアップが出ますが、ここはスキップして大丈夫です。
これで使用できる状態になりました。
FooGalleryを使ってギャラリーを追加する方法【使い方】
FooGalleryを使ったギャラリーの追加方法についてですが、基本的には以下の2点を抑えておけばOKです。
- ギャラリーを作る方法
- 記事内に設置する方法
たったこれだけ?と思うかもしれませんが、これを理解しておくだけで「FooGallery」の使い方については問題なしです。
というわけで、ここからは上記の内容について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記事にショートコードを挿入
コピーしたショートコードを、記事内の入れたい場所にカーソルを入れて貼り付けます。
これで記事内にギャラリーが追加されました。
実際に確認してみるとこんな感じです。
上手くギャラリーの設置ができました。
というわけで、今回の内容はこれで以上です。
レスポンシブのギャラリーを手間をかけずに設置したいという方は、ぜひ試してみてください。
コメントを残す