SEO対策なら株式会社ペコプラ > Webサイト制作 > Webデザイン > WordPressでギャラリーを作る方法を解説！おすすめのプラグインも紹介！

WordPressでギャラリーを作る方法を解説！おすすめのプラグインも紹介！

Webサイト制作

Webデザイン

2021.04.09

WordPressで写真をアップしようと思った時に、どうしますか?

「1枚ずつ挿入したけど面倒くさいし、見栄えも悪い」「もっと綺麗に写真を並べる方法ってないの?」とお悩みの方もいるのではないでしょうか。

そこでおすすめなのが「ギャラリー」という機能を使って、写真をアップする方法です。

今回は、Wordpressでギャラリーを作る方法を、おすすめのプラグインと共に紹介していきます。

ギャラリーとは

WordPressのギャラリーとは、複数の画像をまとめて一覧として表示させることができるメディアライブラリ機能のことです。

ギャラリーのイメージ

本来写真を本文に挿入すると1枚ずつ縦に画像が並びますが、ギャラリー機能を使うと、画像の大きさや列数を指定しながら、複数枚の画像を見栄え良く並べることが可能です。

また、画像1つ1つに説明ページが自動で作成され、タイトル・キャプション・説明などを入力することも可能で、画像に興味を持ったユーザーを後押しすることに繋げることもできます。

ギャラリー編集画面

画像をギャラリー機能を使って一覧で表示させることによって、閲覧性がよくなります。

そのため、ユーザーは目を通しやすく、関連したコンテンツへのアクセスの期待もできるので、ギャラリーは写真を多く掲載するようなサイトにおすすめです。

使用するWordpressのテーマによってギャラリーの表示方法が若干異なるので、注意が必要です。

WordPressのギャラリー機能を使って作成する方法

ギャラリーは

WordPressのギャラリー機能を使う
WordPressのプラグインを使う

という2通りの方法で作成することができます。

まずはWordpressのギャラリー機能を使用して作成する方法から説明していきます。

ギャラリー作成画面へアクセス

WordPressの管理画面へログインをして、左に表示されている「投稿」から「新規投稿」を選択する。
「メディアを追加」をクリックし、「メディアライブラリ」画面の左に表示されている「ギャラリーを作成」を選択する。

新規追加

メディアを追加

ギャラリーを作成

ギャラリーを作成する

ギャラリー表示させる画像を選択する(選択されると右上にチェックマークがつく)
右下に表示されている「ギャラリーを作成」を選択する。

画像の選択

ギャラリーを編集する

「ギャラリーを編集」というページに移動したら、画像をドラッグ＆ドロップで画像の順番を入れ替えることができる。

画像をクリックすると、画面右側に「ギャラリーの設定」が表示される。

ここで

ギャラリーのリンク先(3つから選択)
カラム(列数)
画像の表示サイズ(3つから選択)
代替テキスト(画像が表示されなかったときに表示される文字)
タイトル(添付ファイルのタイトルに表示される)
キャプション(サムネイル画像の下部・添付ファイルページに表示される)
説明(メディアライブラリーの管理用・添付ファイルページに表示される)

の設定ができる。

ギャラリーの編集画面

代替テキストは、検索エンジンが評価対象にしている項目でもあるので、SEO効果を高める場合はしっかり入力しておくことがおすすめです。

▼関連記事

alt属性とSEOの関係性とは？alt属性の設定方法も解説

alt属性は、ページに画像を表示するために必要となるHTMLタグの要素のうちの一つです。使用頻度が多く、WEBコンテンツを作成する上で知っておく…

ギャラリーを挿入する

設定が終わったら、右下の「ギャラリーを挿入」を選択し、ギャラリーの作成は完了です。

管理画面と実際にブラウザで見るものとでは、表示のされ方が異なる場合があるため、必ずブラウザ表示をして確認をすることが大切です。

WordPressのプラグインを使って作成する方法

次にWordpressのプラグインを使用してギャラリーを作成する方法を紹介していきます。

プラグインを使うと、より細かい設定ができるので、こだわったページを作りたい方はプラグインを使って作成することをおすすめします。

プラグインは使用しているテーマや、他のプラグインとの兼ね合いでうまく利用できない場合もありますので、インストールする際にはしっかりと確認するようにしましょう。

プラグインをインストールする

WordPressの管理画面へログインをして、左に表示されている「プラグイン」から、画面上部に表示される「新規追加」を選択する。
画面上部右側にある検索窓に、利用したいプラグイン名を入力する。
表示されたプラグインの「今すぐダウンロード」を選択する。
表示が「有効化」に変わったら「有効化」を選択することで、プラグインを使うことができる。

ギャラリーをつくるのにおすすめのプラグイン5選

では実際にギャラリーを作るにはどんなプラグインを利用すればいいのか、おすすめのプラグインを5つ紹介していきます。

Robo Gallery

無料プラグインの中では数少ない、グリッドデザインが標準装備されたプラグインです。

ページを格子状に分割して画像やテキストエリアを設定することができ、形の異なる画像を綺麗に並べることもできるため、グリッドデザインがあるととても便利です。

また、グリッドデザインはレスポンシブ対応のため、モバイル端末でも綺麗に表示させることが可能です。

他にも

画像間
影を付ける
角を丸くする
ギャラリーの横幅
枠線の有無
配置位置

などのあらゆる設定が無料でできるので、自分好みのギャラリーを作ることが可能で、ギャラリー系のプラグインの中でも人気の高いプラグインです。

有料版では更に細かい設定をすることも可能です。

NextGEN Gallery

「写真家のためのプラグイン」という売りで、写真を多く使う場合はこのプラグインが使いやすく、おすすめです。

「ギャラリー」「サムネイル」「スライド」の3種類から選ぶことができ、

タグクラウド機能
一括アップロード
画像ソート
アルバム機能

などの機能もあり多機能なため、人気が高く、様々な機能を最小限のプラグイン数で使いたいという人におすすめのプラグインです。

FooGallery

6種類のテンプレートがあり、そこから細かくカスタマイズができるため、初心者でも簡単にギャラリーを作成することが可能です。

レスポンシブ対応のため、スマホからの読者をターゲットとしている場合はこのプラグインがおすすめです。

表示位置
画像間
画像をローディングする際のインジケーター
角を丸くする

などの細かい設定が可能で人気も高いですが、注意点として「FooBox Image Lightbox」というプラグインと一緒でないと動かないので、プラグインの数を最小限にしたい方には向かないプラグインです。

Photo Gallery by 10Web

シンプルな手順でギャラリーを作成することができ、テンプレートから直感的にギャラリーを作成することが可能です。

レスポンシブ対応なので、スマホ表示もしっかり設定することができ、無料版でもカスタマイズの数が豊富です。

基本的な設定は勿論のこと、透かし(著作権表示やリンク広告)を入れることも可能です。

Easy FancyBox

クリックすると画像やサムネイルをポップアップ(画面上に浮かび上がらせる)ことができる機能が搭載されたプラグインです。

ページを切り替えることなく画像を拡大することができ、ユーザーが画像を見やすく、細かい部分までチェックすることができるため、ユーザーの満足度を上げることが可能です。

一般的な画像ファイルだけでなく、

といった形式にも対応。

さらに

YouTube
Dailymotion
Vimeo

といった動画をギャラリーへ追加することも可能です。

とても便利なプラグインですが、他のプラグインとの相性が出やすいプラグインのため、不具合が出ないか注意が必要です。

おすすめプラグインNextGEN Galleryでのギャラリーの作り方

実際に先ほど紹介したNextGEN Galleryのプラグインを使っての、ギャラリーの作り方を紹介していきます。

基本的な流れは、Wordpressのギャラリー機能を使った作成方法と同じなので、簡単に作成することが可能です。

画像をアップロードする

先ほど紹介した方法でインストールが完了したら、Wordpressの管理画面へログインをして、左に表示されている「Gallery」から「Add Gallery/Images」を選択する。

NextGEN GalleryのAdd Gallery/Images

「Upload Images」は画像をデスクトップからアップロードする
「IMPORT FROM MEDIA LIBRARY」は画像をWordpressのメディアファイルからアップロードする
「IMPORT FOLDER」は画像をフォルダーごとアップロードする

という違いがあるので、好きな方法で画像をアップロードしてください。

NextGEN Galleryへの画像の保存

NextGEN Galleryのギャラリーの作成

ギャラリーを編集する

画像のアップロードが出来たら、Wordpressの管理画面左に表示されている「Gallery」から「Manage Galleries」を選択する
編集するギャラリー名を選択する
編集する画像を選択し、「Bulk actions」から編集内容を選択する
編集が終わったら「APPLY」(実行)ボタンを選択
「SAVECHANGES」(セーブ)ボタンを選択

これで編集が完了です。

NextGEN Galleryのギャラリー選択

NextGEN GalleryのBulk actions

Bulk actionsの中に出てくる編集内容は

Set watermark	署名を追加
Create new thumbanails	新しいサムネイルを追加
Resize images	サイズ変更
Recover from backup	元に戻す
Delete images	写真を消す
Import metadata	メタデータを入れる
Rotate images clockwise	時計回りに回転
Rotate images counter-clockwise	反時計回りに回転
Copy to…	画像を選択した場所にコピーする
Move to…	画像を選択した場所に移動する
Add tags	タグをつける
Delete tags	タグを消す
Overwrite tag	タグを上書きする
一括最適化	まとめて最適化する