WordPress・SEOの情報発信サイト

ワードプレスでギャラリーを作ろう!プラグイン5選と作り方

ギャラリーのイメージ

ワードプレスでギャラリーを使う場面

展示会、イベント、オフ会などに参加した際の記事を作成しようとした時に「どんな風に写真をのせようかなぁ」と迷った方は多いのではないでしょうか?

アーティストの方は自身のwebサイトに作品をどのように載せるのかと迷ったことがあるでしょう。コーポレートサイトやポートレートの載せ方はサイトイメージにも大きく関わってきます。

センス良く展示することができれば、よく見てもらえる、再訪してもらえる機会も増えるでしょう。

そんな時に非常に便利に活用できるのがギャラリー機能です。

ワードプレスには、標準でギャラリー作成機能が付いている他、プラグインを活用することで、より複雑なことも可能になります。

沢山の写真を効率よく載せられるギャラリー機能の使用方法とおすすめのプラグインを紹介します。

ギャラリープラグイン5選

FooGallery

FooGallery – Image Gallery WordPress Plugin

FooGallery

豊富なレイアウトパターンに対応しているギャラリープラグイン「FooGallery」

見やすい管理作成画面と拡張機能Extensionsが豊富に揃っています。拡張プラグイン「FooBox  Image Lightbox」を活用することでサムネイルの拡大表示ができる「LightBox」にも対応します。

より高機能な設定ができる有料版も用意されています。

Photo Gallery by WD

Photo Gallery by WD – Responsive Photo Gallery

Photo Gallery by WD

デフォルトのギャラリー機能よりも多彩でセンスが光る「Photo Gallery by WD」

動画と画像のミックス表示もできる点が良いですね。

無料版と有料版がリリースされています。無料版では、5パターンの表示形式より好きなデザインを選択することができます。

シンプルでも少し拘ったデザインのギャラリーにしたい方には無料版が最適です。

Portfolio Gallery

Portfolio Gallery – Photo Gallery

Portfolio Gallery

ポートフォリオの表示最適化した「Portfolio Gallery」

今回紹介したギャラリー作成プラグインの中では唯一、ポートフォリオ作成に特化したプラグインになっています。

キャプションの入れ方や表示方法を豊富なパターンからカスタムできるので活用方法はアイデア次第でかなり広がります。

海外では、学生がこういったプラグインを活用して就職活動の際に自分のポートフォリオとしてwebサイトを作って見せるなんてこともあるんだそうです。

NextGEN Gallery

NextGEN Gallery – WordPress Gallery Plugin

NextGEN Gallery

ギャラリー機能だけでなくアルバム機能が使えるのも嬉しい「NextGEN Gallery」

ギャラリーをまとめたアルバムを作ることができるので、各ギャラリーを入れ子にして表示することができます。

アルバム機能を簡単に作成したい方には最適なプラグインと言えるでしょう。画像のスライド機能も綺麗です。

Easy FancyBox

Easy FancyBox

Easy FancyBox

ギャラリーの画像をクリックした時の動きが面白い「Easy FancyBox」

サムネイル画像をクリックした時に画像にアニメーションがついて表示されるところがクールなプラグインです。

機能は至ってシンプルですが、その分このアニメーションは「ついついクリックしたくなる」感覚があっていいのではないでしょうか。

プラグインなしでギャラリーを作る方法

ワードプレスには予めメディアアップローダーにギャラリー作成機能が実装されています。
この機能を使うことによってシンプルなギャラリーを簡単に作成することができます。

ワードプレス管理画面より新規投稿画面、または固定ページの画面など、ギャラリーを追加したいページを選択します。

投稿画面で記事タイトル下に表示されている「メディアを追加」をクリックします。

メディアを追加

メディアの挿入画面に切り替わるので「ギャラリーを作成」を選択します。

ギャラリーを作成

ギャラリーに追加したい画像をクリックすると右上にチェックマークが入り、下の「◯点を選択済」に表示されます。

もしもチェックした画像を削除したい場合はチェックマークにカーソルを合わせると「-」マークが表示されるので、そちらをクリックしてチェックを外します。

チェックが完了したら画面右下の「ギャラリーを作成」をクリックします。

ギャラリーを作成

ギャラリーの外観を整える編集画面に切り替わります。

画像を追加したい場合は画面左側の「ギャラリーに追加」をクリックします。

ギャラリーに追加

画面右側に表示されている「ギャラリーの設定」項目を説明します。

1番目の「リンク先」の項目には上から「添付ファイルのページ」「メディアファイル」「なし」とあります。

添付ファイルのページを選択すると下の画像のように表示されます。

メディアファイルを選択した場合は下の画像のように表示されます。もしもギャラリーを作成する場合は「メディアファイル」をおすすめします。

メディアファイル

「なし」を選択すると画像にカーソルを合わせても、クリックしたとしてもアクションは起こりません。

次の「カラム」という項目は画像を横にいくつ並べるかの設定画面です。画像のサイズによっても左右されますが、もしも記事をワンカラムで表示する場合はある程度のカラム数を設定しても綺麗に表示されるのでおすすめです。

サイドバーのあるページなら3カラムくらいが良いと思います。

次の「ランダム」は、画像の表示順をランダムにするかどうかの項目です。ランダムで表示したい方はチェックをいれましょう。

一番下の「サイズ」は画像の表示するサイズを指定します。

サイズは「サムネイル」「中」「大」「フルサイズ」とありますので、この中から選択します。

ただし、こちらのサイズはテーマによって左右されます。記事の表示範囲が通常のテキスト記事に最適な600px程度のサイズの場合は「サムネイル」サイズになりますので、通常は「サムネイル」を選択していれば問題ないでしょう。

全ての設定が完了したら「ギャラリーを挿入」をクリックして記事にギャラリーを挿入します。

ギャラリーを挿入

もしも再度ギャラリーを編集したいと思った時はギャラリー上で1クリックするとギャラリーが囲まれて「えんぴつ」マークが表示されます。

鉛筆マーク

こちらをクリックすると先ほどの編集画面に戻ることができます。

編集が完了したら「公開」もしくは「更新」をクリックして作業完了です。

下のように投稿ページにギャラリーが追加されました。

ギャラリー完成

比較的簡単な操作でギャラリーを作れるので便利ですね。

ワードプレスのギャラリーについてのまとめ

ワードプレスのギャラリー機能についての紹介でした。

無料でもここまで多機能なことが非常に嬉しいワードプレス。機能をセンス良く活用することができれば、それだけでも独自の価値が生まれてくるのは間違いなく「この人のサイトはいつもおしゃれだなぁ」とか「気がつくと、このサイトの記事を見てるんだよなぁ」というような気持ちにさせられたら、とても有利ですね。

見た目で人を楽しませることができる画像や動画などのメディアを上手に使うことや、人とと違う使い方をすることが大きなポイントになってくるのではないでしょうか。

上手く活用してユーザーにとってメリットのあるサイトを目指しましょう!