WordPress(ワードプレス)の標準機能にもギャラリーの作成機能はありますが、プラグインを追加することで、より見栄えの良いギャラリーサイトを作成することができます。今回はプラグイン「 Photo Gallery by 10Web – Mobile-Friendly Image Gallery 」の利用法をについて、できるだけ図を使いながら簡単に説明します。

レスポンシブ対応ギャラリーの簡単設定
Photo Gallery by 10Web

1.Photo Gallery by 10Web とは

10Webの開発しているレスポンシブ対応でモバイルフレンドリーな写真ギャラリーになります。すでに30万ダウンロード以上の実績のあるワードプレス用プラグインになります。有料でより便利な機能を追加することができますが、無料でもかなり利用できます。

2.Photo Gallery by 10Web のインストール

ワードプレスダッシュボードの「プラグイン」>「新規追加」から「Photo Gallery」と入れて検索すると上位でヒットします。

「今すぐインストール」をクリックし「有効化」します。以上で完了です。

3.Photo Gallery by 10Web の使用方法

1)Photo Gallery by 10Web の操作場所

ワードプレスダッシュボードに「Photo Gallery」が表示されるようになるのでクリックします。

最初、下記のような画面になりますが、特に必要ないので「Skip」をクリックします。

プレミアム機能へのお誘いが設置されていますが、今回は無料で利用するので設定しません、 Skip しましょう。

2)ギャラリーを作成する

Photo Gallery by 10Web は、ワードプレスのインストールフォルダの「wp-content\uploads\photo-gallery」の下に、専用の画像格納フォルダを作りそこで写真を管理します。

ギャラリーを作成するには Galleries と書かれた横の「Add New」をクリックします。

ギャラリーを簡単に作成するために行うことは大きくは4つだけです。

(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、リダイレクト、タグ」を設定できます。そのままでももちろん構いません。

ギャラリーの作成は以上で終わりで、今度はサイトに配置します。

3)ギャラリーをサイトに配置する

ワードプレスの「投稿」>「新規追加」をクリックし、新しい投稿を作成します。(あるいは固定ページでも構いません)

ビジュアルディタで「+(ブロックの追加)」をクリックします。

 

一般ブロックに Photo Gallery by 10Web の「Photo Gallery」が新たに追加になっています。それをクリックします。

下記の画面が表示されるので、各項目を変更し、「Insert into post」をクリックします。最低限、Gallery で作成したギャラリーを選びましょう。

  • View type : ギャラリーのフォーマットを選択します
  • Gallery : どのギャラリーを表示するのか選べます
  • Tag : タグを設定した画像を選択できます
  • Theme : Light か Dark か選べます
  • Use default options : Options で自分で設定したものか、このギャラリー用にここで設定するかを選べます

無料では設定できない項目を選んだ場合は、フリーバージョンでは設定できないといわれます。

ブロックエディター上に下記のようにアイコンが表示されたら設置完了です。

4.設定変更による表示変化

下記で設定を変更すると面白そうな機能のみ設定方法を記載しておきます。

1) Options > Gallery

(1) View type

View type を変更することで、ギャラリーの画像の並べ方を変えます。無料のは下記の3パターンです。

①Thambails

③Image Browser

②Slideshow

(2) Pagination

1ページに表示しきれない画像の読み込み方法を変更します。

  • Simple :このオプションを有効にすると、ページ番号と次/前のボタンがギャラリーに追加されます。
  • Load More :「More」ボタンを設置します。クリックするとギャラリーから次の一連の画像を表示します。
  • Scroll Load :訪問者がギャラリーの最後までスクロールすると次の一連の画像が表示されます。
(3) Show “Order by” dropdown list
訪問者が自分で写真の並び順を変更する機能を設置できます。

2)Lightbox

(1) Show Next / Previous buttons

次へと前へのボタンを常時表示するか、マウスオーバーしているときだけ表示するか選べます。

(2) Show Display Original Image button

オリジナルイメージを表示するボタンを設置します。

3)Adovanced > Advertisement

画像に広告(透かし状のリンク)を設置できます。表示上では重なりますが、ウォーターマークと違い 画像自身には設置されません。

(1) Advertisement type

テキストによるものか画像によるものか選べます。

(2) Advertisement opacity

透かしの透け具合を調整できます。

(3) Advertisement link

ここにアドレスを設定すると、テキストあるいは画像をクリックするとリンクするようになります。

4)Watermark

画像にウォーターマーク(透かし)を設置できます。画像自身に設置されます。設定すると画像を再作成します。

(1) Watermark type

テキストによるものか、画像によるものか選べます。

Photo Gallery by 10Web は写真のギャラリープラグインとしてかなり高機能です。有料にするとさらに良いのですが、無料でもかなり便利に使えます。

Photo Gallery by 10Web も良いのですが、他にも無料でインストールできる、表示の綺麗な写真ギャラリープラグインを5つ選んでみました。

表示の綺麗な写真ギャラリー 無料プラグイン Top 5 2019 ワードプレス

ワードプレスで WebP を簡単に作成する方法 EWWW Image

WordPress(ワードプレス)初心者向けに、今回はワードプレスで次世代フォーマットでの画像配信を簡単に行う方法、「EWWW...

ワードプレス無料ギャラリー Robo Gallery 設定と機能

Wordpress(ワードプレス)の無料ギャラリープラグインにはいろいろありますが、Robo...
photoshop-animation-gif-logo01

Photoshopを使ってコマ送り動画 を作成する アニメーションGif

今回は Photoshop を使って複数の写真からコマ送り動画を作成する方法を図解します。最終的にアニメーション Gif として保存します。Photoshop...

オンラインでWebMに動画変換する方法 Convertioを利用

動画を次世代フォーマットの WebM に変換する方法はいろいろありますが、オンラインファイルコンバーターの「Convertio」を利用することで、オンライン上で簡単に...

画質比較 Compress JPEG & PNG プラグインのインストール

WordPress(ワードプレス)に画像圧縮のためのプラグイン「 Compress JPEG & PNG...

Responsive Photo Gallery 操作が簡単なワードプレスの無料写真ギャラリー

今回は操作がわかりやすくて使いやすいギャラリープラグインの「Responsive Photo Gallery – Images Gallery...

Pin It on Pinterest