WordPress(ワードプレス)で写真を綺麗に魅せるサイトを作るには、ギャラリープラグインを使うのも有効です。今回は、数あるギャラリープラグインの中から「Gallery Plugin for WordPress – Envira Photo Gallery」について図解説します。 2019年春現在で、最も簡単で綺麗な写真ギャラリーを作成できるプラグインだと思います。

2019年春現在 ワードプレスの最も簡単で綺麗な写真ギャラリー Envira Photo Gallery

1.Envira Photo Gallery とは

Envira Photo Gallery は、アルバム、タグ、ソーシャルメディアの統合、ギャラリーレイアウト、ディープリンク、ページネーション、eコマース、画像プルーフなど、必要となるすべての機能を備えた Envira Pro プラグインの簡易版です。無料でもかなりの機能を利用できます。とにかく設定が簡単でビジュアルエディタにも対応しています。

2.Envira Photo Gallery のインストール

ワードプレスのダッシュボードの「プラグイン」>「新規追加」から「Envira」と入力して下記の Envira Photo Gallery を検索します。

「今すぐインストール」をクリックして、インストールが終わったら「有効化」します。

ワードプレスのダッシュボードに「Envira Gallery」ができあがります。

クリックすると下記のように表示されると思いますが、登録したくなければ「×」を押して閉じてしまって構いません。

3.ギャラリーを作成しサイトに配置する

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

(1) Add New をクリックする
ワードプレスのダッシュボードに「Envira Gallery」をクリックします。

表示される画面の左上方にある「Add New」をクリックします。

(2) タイトルを入力する

「タイトルを追加」にタイトルを入力します。(日本語でも構いません)

(3) ギャラリーに写真を追加する

下記のパネルに写真ファイルをドラッグ&ドロップして追加します。あるいは「Select Files from Your Computer」をクリックしてエクスプローラーを表示して選択します。

あるいは「Select Files from Other Sources」をクリックすると、ワードプレスのメディアギャラリーが表示され、そこから選択することができます。

あるいは Pro 版の場合は「External Gallery」を選ぶと Instagram との連携もできます。
(4) 写真が Images に並ぶ

写真を追加すると、Images に追加した写真が並びます。

(5) 公開する
公開パネルの「公開」をクリックしてギャラリーを公開します。
Envira gallery published と表示されてギャラリーが公開されます。

詳細な設定は後の補足で説明するとして、先にサイトへの配置方法へ進むことにします。

2)ギャラリーをページに配置する

(1) Envira Gallery のブロックを追加する

ワードプレスのビジュアルエディタで「+」(ブロックの追加)をクリックします。

一般ブロックに「Envira Gallery」があるので、それをクリックします。

(2) 作成したギャラリーを選択する

下記のパネルが表示されるので、下矢印をクリックして、先ほど作成したギャラリーを選択します。

下記のようにギャラリーがページに追加されプレビュー表示されます。

以上の手順で本当に簡単に、下記のような素晴らしいギャラリーを配置できます。

(3) ギャラリーブロックを設定する

ビジュアルエディターのブロックの設定から、下記の設定が可能です。

Search for a Gallery で表示させるギャラリーを選べます。
Select Layout でサムネイル表示のカラムの数を選べます。
Set Row Height で上記の Layout が Automatic の時にカラムの高さを設定できます。
Gallery Margins でサムネイルの各写真の間隔を調整できます。

Lightbox でライトボックス表示(拡大表示)を設定できます。

有料版ではライトボックステーマも選択できます。

2019年春現在、最も簡単で綺麗な無料の写真ギャラリープラグインだと思います。本当に簡単なのでおすすめです。

Envira Photo Gallery 公式サイト : https://enviragallery.com/

補足.ギャラリーの詳細設定方法

各ギャラリーの詳細設定を変更する画面へは下記手順で移動できます。

ワードプレスのダッシュボードの「Envira Gallery」をクリックします。
ギャラリーのリストが表示されるので、編集したいギャラリーの「編集」をクリックします。

1)Config 設定

(1) Config 設定の場所
左メニューの「Config」をクリックします。
(2) Number of Gallery Columns

ギャラリーカラム数の設定を行えます。Automatic にすると最適なカラム数に自動設定されます。

(3) Enable Lazy Loading

画像の遅延ロードを設定します。画像のロードを遅らせることでサイトの表示を早くします。

(4) Lazy Loading Delay

画像の遅延ロードの遅らせる時間を設定します。

(5) Automatic Layout: Row Height

オートマチックレイアウトの時に、それぞれのカラムのサムネイルの高さを設定します。

(6) Automatic Layou: Margins

オートマチックレイアウトの時に、それぞれのカラムのサムネイルの間の間隔を設定します。

(7) Image Size

サムネイル画像のサイズを設定します。(どのサイズの画像を読み込むかの設定)

(8) Image Dimensions

サムネイル画像の表示サイズを設定します。

(9) Crop Images

上記のディメンションで表示させるときに、画像の切り抜きを行うかどうかの設定。

2)Lightbox 設定

(1) Lightbox 設定の場所
左メニューの「Lightbox」をクリックします。
(2) Enable Lightbox

ライトボックス表示(拡大表示)を使うかどうかの設定をします。

(3) Gallery Lightbox Theme

ライトボックス表示(拡大表示)のテーマを選びます。Pro になると複数のテーマから選べます。

(4) Image Size

Image Size でライトボックス表示(拡大表示)の最大表示サイズを選びます。デフォルトでは元画像を表示します。

(5) Caption Position

画像キャプションの表示位置を設定します。

3) Misc 設定(Miscellaneous Settings)

(1) Gallery Title

ギャラリーのタイトルを設定します。

(2) Gallery Slug

ギャラリーのスラグを設定します。日本語のギャラリーの場合は、英語のスラグを設定しておくことをおすすめします。

(3) Custom Gallery Classes

カスタムCSSを設定する場合はここに記載できます。

(4) Enable RTL Support

RTL(右から左表示の言語サポート)のサポートを設定します。

Envira Photo Gallery はワードプレスサイトに無料で簡単に素敵なギャラリーを設置できますが、有料にするとさらにいろいろな機能をアドオンできます。複数の表示テーマも選択できます。検討してみても良いでしょう。

無料でインストールできる、表示の綺麗な写真ギャラリープラグインを5つ選んでみました。参考にしてみてください。

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

WebM動画に変換する方法 Internet Friendly Media Encoder

今回は無料のアプリを利用して簡単に 次世代フォーマットの WebM に動画を変換する方法について図解します。「 Internet Friendly Media Encoder...
WP-Divi-elegant-themes-logo

写真サイトを作るのにワードプレスのDiviがおすすめな理由

今回はワードプレスの「Divi(by Elegant...

ワードプレスの素敵なギャラリー Unite Gallery にできること

今回はWordpress(ワードプレス)のギャラリープラグイン「Unite Gallery」について図解説したいと思います。Unite Gallery には無料の「Unite Galley...

Photo Gallery by 10Web レスポンシブギャラリー設定

WordPress(ワードプレス)の標準機能にもギャラリーの作成機能はありますが、プラグインを追加することで、より見栄えの良いギャラリーサイトを作成することができます。今回はプラグイン「...
photoshop-animation-gif-logo01

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

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

Pin It on Pinterest