WordPress（ワードプレス）の標準機能にもギャラリーの作成機能はありますが、プラグインを追加することで、より見栄えの良いギャラリーサイトを作成することができます。今回はプラグイン「 Photo Gallery by 10Web – Mobile-Friendly Image Gallery 」の利用法をについて、できるだけ図を使いながら簡単に説明します。
レスポンシブ対応ギャラリーの簡単設定
Photo Gallery by 10Web
１．Photo Gallery by 10Web とは
10Webの開発しているレスポンシブ対応でモバイルフレンドリーな写真ギャラリーになります。すでに30万ダウンロード以上の実績のあるワードプレス用プラグインになります。有料でより便利な機能を追加することができますが、無料でもかなり利用できます。
２．Photo Gallery by 10Web のインストール
ワードプレスダッシュボードの「プラグイン」＞「新規追加」から「Photo Gallery」と入れて検索すると上位でヒットします。
「今すぐインストール」をクリックし「有効化」します。以上で完了です。
３．Photo Gallery by 10Web の使用方法
１）Photo Gallery by 10Web の操作場所
 | ワードプレスダッシュボードに「Photo Gallery」が表示されるようになるのでクリックします。 |
最初、下記のような画面になりますが、特に必要ないので「Skip」をクリックします。
 | プレミアム機能へのお誘いが設置されていますが、今回は無料で利用するので設定しません、 Skip しましょう。 |
２）ギャラリーを作成する
Photo Gallery by 10Web は、ワードプレスのインストールフォルダの「wp-content\uploads\photo-gallery」の下に、専用の画像格納フォルダを作りそこで写真を管理します。
ギャラリーを作成するには Galleries と書かれた横の「Add New」をクリックします。
ギャラリーを簡単に作成するために行うことは大きくは４つだけです。
(1) ギャラリータイトルをつける
上図の「Gallery title」にタイトルを入力します。
(2) プレビュー画像（ギャラリーのカバーイメージ）を設定する
 | Preview image の「Add」をクリックします。 |
下記のパネルが表示されるので、表示させたい写真をドラッグドロップします。あるいは「Choose or Drag」の部分をクリックすると、ファイル選択のためのパネルが開きます。複数選択しアップロードすることがすることが可能です。
写真をアップロードすると、ギャラリー用のサムネイルとイメージデータとが自動でリサイズされ作成されます。その際に作成されるピクセルサイズは、アップロードする際に上図の下記の部分に入力しているサイズとなります。変更したい場合は変えてください。（※オリジナルデータもサーバー上には残ります）
写真が追加されると、下記のようにサムネイルが表示されるので、追加したい写真を選択して「Add」をクリックします。
 | 左のようにプレビュー用画像がセットされます。画像の横の「×」をクリックするとその画像選択を取り消すことができます。 |
 | プレビュー画像の下の「Published（公開）」は「Yes」のままにします。 |
（※ Published に No を選ぶと公開しないギャラリーとなります）
(3) ギャラリーに写真を追加する
「Add Images」をクリックします。
プレビュー画像の追加と同様の画面が表示されるので、「Upload files」をクリックします。表示される画面でやはり同様に、画像ファイルを選択しアップロードします。
アップロードされると、下記のように画像一覧にサムネイルが表示されるようになるので、ギャラリーに追加したい画像をクリックして選択（CtrlやShiftで複数選択）していき、最後に「Add select images to gallery」をクリックします。
ギャラリーに写真がつかされ、下記のように一覧が表示されます。この画面で「Alt/Title、Description、リダイレクト、タグ」を設定できます。そのままでももちろん構いません。
ギャラリーの作成は以上で終わりで、今度はサイトに配置します。
３）ギャラリーをサイトに配置する
ワードプレスの「投稿」＞「新規追加」をクリックし、新しい投稿を作成します。（あるいは固定ページでも構いません）
 | ビジュアルディタで「＋（ブロックの追加）」をクリックします。 |
 | 一般ブロックに Photo Gallery by 10Web の「Photo Gallery」が新たに追加になっています。それをクリックします。 |
下記の画面が表示されるので、各項目を変更し、「Insert into post」をクリックします。最低限、Gallery で作成したギャラリーを選びましょう。
- View type ： ギャラリーのフォーマットを選択します
- Gallery ： どのギャラリーを表示するのか選べます
- Tag ： タグを設定した画像を選択できます
- Theme ： Light か Dark か選べます
- Use default options ： Options で自分で設定したものか、このギャラリー用にここで設定するかを選べます
 | 無料では設定できない項目を選んだ場合は、フリーバージョンでは設定できないといわれます。 |
ブロックエディター上に下記のようにアイコンが表示されたら設置完了です。
４．設定変更による表示変化
下記で設定を変更すると面白そうな機能のみ設定方法を記載しておきます。
１） Options ＞ Gallery
(1) View type
View type を変更することで、ギャラリーの画像の並べ方を変えます。無料のは下記の３パターンです。
①Thambails
③Image Browser
| ②Slideshow
|
(2) Pagination
１ページに表示しきれない画像の読み込み方法を変更します。
- Simple ：このオプションを有効にすると、ページ番号と次/前のボタンがギャラリーに追加されます。
- Load More ：「More」ボタンを設置します。クリックするとギャラリーから次の一連の画像を表示します。
- Scroll Load ：訪問者がギャラリーの最後までスクロールすると次の一連の画像が表示されます。
(3) Show “Order by” dropdown list
 | 訪問者が自分で写真の並び順を変更する機能を設置できます。 |
２）Lightbox
(1) Show Next / Previous buttons
次へと前へのボタンを常時表示するか、マウスオーバーしているときだけ表示するか選べます。
(2) Show Display Original Image button
オリジナルイメージを表示するボタンを設置します。
３）Adovanced ＞ Advertisement
画像に広告（透かし状のリンク）を設置できます。表示上では重なりますが、ウォーターマークと違い 画像自身には設置されません。
(1) Advertisement type
テキストによるものか画像によるものか選べます。
(2) Advertisement opacity
透かしの透け具合を調整できます。
(3) Advertisement link
ここにアドレスを設定すると、テキストあるいは画像をクリックするとリンクするようになります。
４）Watermark
画像にウォーターマーク（透かし）を設置できます。画像自身に設置されます。設定すると画像を再作成します。
(1) Watermark type
テキストによるものか、画像によるものか選べます。
 | Photo Gallery by 10Web は写真のギャラリープラグインとしてかなり高機能です。有料にするとさらに良いのですが、無料でもかなり便利に使えます。 |
Photo Gallery by 10Web も良いのですが、他にも無料でインストールできる、表示の綺麗な写真ギャラリープラグインを５つ選んでみました。 |  |
