Wordpressにギャラリーを表示!|ワードプレスの使い方を画像付きで徹底解説

WordPressにギャラリーを表示!|ワードプレスの使い方を画像付きで徹底解説

Ad

WordPressにギャラリーを表示!作り方を画像付きで徹底解説

ワードプレスにギャラリーを表示する方法を、画像付きでご紹介します。

ギャラリーは、写真のアルバム代わりに使ってみたいり、作品を一覧で表示する場合にも便利な方法です。

写真や画像毎に、題名やメッセージを付けることもできます。

 

今回はデフォルトでワードプレスに備えられているギャラリー機能と、プラグインを使う方法の2種類をご紹介します。

どちらの方法も簡単ですので、好みに合わせて使ってみてくださいね。

 

ワードプレスのギャラリー機能を使う

ワードプレスにデフォルトで備え付けられている「ギャラリー」は、「メディアライブラリ」の機能の1つです。

ワードプレスで投稿内に画像や写真を挿入すると、自動でメディアライブラリに保存されています。この保存されている画像や写真を、一覧表示できるのが、ギャラリーの機能になります。

ギャラリー例

このように、画像を任意の数で並べて表示することができ、それぞれの画像に題名やメッセージを追加できます。

メディアライブラリーのギャラリーは、使用しているワードプレスのテーマによりデザインが異なるため、一度試しにページを作ってみると良いでしょう。

・あらかじめある機能なので、新規インストールが不要
・3ステップで簡単に使える
・投稿や固定ページの好きな場所に、自由に追加できる
・写真の枚数や制限が無い

メディアライブラリーのギャラリーは3ステップ作成

メディアライブラリーのギャラリー機能は、3ステップで簡単に作ることができます。

  1. ギャラリーの新規作成
  2. ギャラリーに表示する画像や写真の選択と、題名などの設定
  3. 表示したい投稿へ挿入

では、さっそく詳しい作り方をみていきましょう。

ギャラリーの新規作成

ダッシュボード > 投稿 >新規追加 をクリック

ギャラリー追加

投稿の新規作成画面が表示されます。投稿欄の上部にあるボタンメニューから、

「メディアを追加」をクリック

ギャラリー追加2

メディアの選択画面が表示されます。左のメニュー一覧から、

「ギャラリーを作成」をクリック

ギャラリー追加3

ギャラリーを作成の画面が表示されます。

すでにメディアライブラリにアップしている写真や画像の中から、ギャラリーに追加したい写真を選択しましょう。新規アップロートもできます。

写真・画像を選択する > 「ギャラリーを作成」をクリック

ギャラリー追加5

ギャラリーの編集画面が表示されます。

先ほど選択した画像・写真だけが表示された状態になっています。

右側には、ギャラリーの設定項目が表示されていますので、変更の必要があれば設定を変更しておきましょう。

  1. リンク先:ギャラリーの画像をクリックした際に表示される画面の遷移先です。メディアファイル自体を表示させる、もしくはリンク設定なしも選択できます。
  2. カラム:ギャラリーに表示する列の数を指定します。最大9列まで選ぶことができます。
  3. ランダム:ギャラリーの表示順をランダムに設定できます。
  4. サイズ:ギャラリーに表示する場合の画像のサイズを変更できます。デフォルトはサムネイル(正方形)。

設定を確認 > 「ギャラリーを挿入」をクリック

ギャラリー追加6

投稿画面に無事に、ギャラリーが表示されているかと思います。

ギャラリー追加7

ブラウザ表示では、若干ギャラリーの表示が変わる場合はあるんで、必ず公開後の画面も確認しておきましょう。

ギャラリーの内容を編集する

作ったギャラリーの内容を編集したい場合も、ご紹介しておきます。

先ほど作成しましたギャラリーの挿入された、投稿の編集画面を開きます。

ギャラリーをダブルクリックする > 鉛筆マークをクリック

ギャラリー追加8

ギャラリーに新しい写真を追加したい場合は、「ギャラリーに追加」を、

ギャラリーを編集したい場合は、「ギャラリーを編集」をクリックします。

ギャラリー追加9

後は、ギャラリーの新規追加と同様の方法で、追加や編集したい画像・写真をクリックして、最後に「更新」をクリックして完了です。

Ad

プラグイン「Robo Gallery」を使ってギャラリーを作る

次にご紹介するのは、ワードプレス プラグイン「Robo Gallery」を使った、ギャラリーの追加方法です。

こちらのRobo Galleryは、ワードプレスのメディアライブラリーのギャラリーよりも、かなり細やかな設定ができます。

インストールや使い方も簡単ですので、もう少しこだわったギャラリーを求めている方は、こちらを利用してみてください。

Robo Gallery見本

・プラグインをインストールするだけで簡単に使える
・メディアライブラリーの写真・画像をギャラリーにできる
・表示の設定やメニューなど細かい表示設定ができる
・無料で使える(一部有料プランあり)
・高さの違う画像も、自動で整列して表示できる
・レスポンシブ対応(スマホ表示最適化)している

Robo Galleryのインストール

それではさっそく、Robo Galleryをインストールしてみましょう。

ダッシュボード > プラグイン > 新規追加をクリック

Robo Gallery1

プラグインの検索画面に「Robo Gallery」と入力して、検索

Robo Gallery2

「今すぐインストール」>「有効化」をクリック

Robo Gallery3 Robo Gallery4

Robo Galleryでギャラリーの作成

続いて、ギャラリーの作成を行います。

ダッシュボード > Robo Gallery > Add Gallery / Images をクリック

Robo Gallery5

「タイトル」を入力 > 「Manage Images」をクリック

Robo Gallery6

メディアライブラリが表示されますので、ギャラリーに使いたい画像・写真を選択します。

画像・写真を選択 > 「ギャラリーに追加」をクリック

Robo Gallery8

選択した画像・写真が一覧で表示されます。

「この画像のキャプショ」をダブルクリックし、題名や説明を記入する

Robo Gallery9

「公開」をクリック

Robo Gallery10

こちらギャラリーの作成は完了です!では続けて、作ったギャラリーを、投稿や固定ページに表示してみましょう。

Ad

 

Robo Galleryで作ったギャラリーをページへ表示する

ギャラリーを追加したい、投稿ページ・固定ページの編集画面を表示してください。

投稿欄の上部のボタンメニューから「Add Robo Gallery」をクリック

Robo Gallery15

選択画面から追加したいギャラリーの名前を選択 > 「Insert」をクリック

Robo Gallery16

追加したい箇所に、

No Images.
Please upload images in images manager section. Click on Manage Images button on the right side of the gallery settings.
Please make sure that you didn't enabled option: Images of the Current Gallery. Option should have Show value to show images.

とショートコードが追記されていればOKです。

Robo Gallery17

公開 もしくは 更新 をクリック

Robo Gallery18

以上で完了です。

さっそくギャラリーを追加したページを確認してみてくださいね。

 

プラグイン「Robo Gallery」をもう一工夫

今回使用しているRobo Galleryは、無料で使えて、かなり細かな表示設定ができます。

せっかくですので、いくつか表示のカスタマイズもご紹介しておきます。

 

ギャラリーページのURLを英語に変える

Robo Galleryでギャラリーを作ると、ギャラリー専用のページが作成されます。

もし、ギャラリーの名前を日本語にした場合、ギャラリー専用ページのURLも日本語になってしまいます。

その場合、多くのブラウザでは文字化けした状態のURLになってしまいますので、英語のURLへ変更してきましょう。

該当のギャラリーの編集ページを表示してください。

パーマリンク > 「編集」をクリック

Robo Gallery12

URLの部分を英語表記に変える

Robo Gallery13

以上で完了です。最後に「更新」をクリックしておきましょう。

 

ギャラリーページのメニューを非表示にする

デフォルトでは、ギャラリーの上に青色のメニューが表示されています。
私はこのメニューが必要ないため、非表示に設定しています。

(↓赤い囲み部分が不要…)

roboGallery不要メニュー

該当のギャラリーの編集ページを表示してください。

Menu Options > Menu Labels > RootLabel [Hide]Menu Options > Menu Labels > SelfLabel [Hide]

label消す

最後に「更新」をクリックして完了です。

 

この他にも、写真・画像の上に表示する、キャプショの表示・非表示や、画像の影の濃さなども設定できますので、ぜひお時間のあるときにカスタマイズしてみてくださいね。

無料でここまで細かく設定できるのは、かなり貴重なプラグインですので、ぜひぜひお試しください。

Ad

 

 

WordPressにギャラリーを表示!作り方を画像付きで徹底解説 まとめ

今回はワードプレスのサイトに、ギャラリーを表示する方法を2種類ご紹介しました。

デフォルトでワードプレスに用意されている、メディアライブラリーのギャラリー機能は、すぐに使えて便利な機能です。プラグインも不要なので、気軽にトライできます。

無料で使えるプラグインRobo Galleryは、細かな設定や、アップする画像の表示を自動で整列してくれるのも嬉しい、優れたギャラリーです。プラグインに抵抗の無い方は、ぜひ一度使ってみてくださいね。

 

 

Wordpressにギャラリーを表示!|ワードプレスの使い方を画像付きで徹底解説
最新情報をチェックしよう!
Ad