Envira Gallery

商品コード: envira-gallery カテゴリー:

Envira Gallery プラグインは、複数の画像や動画を整列させて見やすく表示するギャラリーを作成します。

設定を変更することで、グリッド表示やスクロール表示など様々な一覧表示を選ぶことができ、一覧に並ぶ画像の順序をマウスのドラッグ&ドロップ操作で簡単に操作することが可能です。

投稿や固定ページに追加されるギャラリーは、スマートフォンやタブレットなどデバイスの画面サイズに応じて最適化され、ページのユーザビリティを向上させることができます。

複数の画像を表示するページや、画像を一覧で表示する機能をサイトに追加したい管理者向けのプラグインです。

画像の一覧をギャラリーで設置

CSSやHTMLなどのWebページに関する知識がなくても、 Envira Gallery プラグインを利用することで、複数の画像を効果的に配置して表示するギャラリーをページで利用することができます。

新しくアップロードする画像や、既にWordPressのメディアに追加されている画像を使って、プラグインの設定ページからギャラリーを簡単に作成することが可能です。

また、ギャラリーとしてページに配置した画像は、クリックして大きいサイズの画像をポップアップさせて表示することができます。

ドラッグ&ドロップで画像の並びを自由にカスタマイズ

ギャラリーに表示される画像の並び順を、ドラッグ&ドロップ操作で簡単に変更することができます。

HTMLやCSSなどのWebページに関する知識がなくても設定画面を使って、グリッド表示やスクロール表示など画像を整列して表示することができます。

また、[ライトボックス] 設定を使って画像が選択された場合に拡大表示やナビゲーション表示など詳細にカスタマイズをすることが可能です。

レスポンシブ対応で、デバイスに最適化されて表示

キャラリーの [モバイル] 設定を使って、レスポンシブにギャラリーの表示に対応します。

スマートフォンやタブレット、パソコンなど様々なデバイスの画面に対応して最適なサイズで画像を一覧表示することが可能です。

Envira Gallery プラグインを導入することで、HTMLやCSSなどのWebページに関する知識なしで、複数の画像を整列して表示するギャラリーを作成して投稿や固定ページに配置することができます。

配置されるギャラリーはレスポンシブルに対応して、スマートフォンやタブレットなど様々なデバイスの画面に応じて表示方法を最適化し、常に見やすい画像で表示を行うことが可能です。

また、画像をクリックした際に拡大表示をしたり、他の画像へのナビゲーションを行う設定をすることができます。

Envira Galleryの使い方

ギャラリーを新規作成

プラグインを利用してサイト内にギャラリーを新しく追加するには、次の手順で行います。

画像をアップロードしてギャラリーを作成

  1. WordPress管理画面の [Enviraギャラリー] > [新規追加] メニューを選択します。
    画像をアップロードしてギャラリーを作成
  2. 表示された [Enviraギャラリーの新規追加] 画面の [タイトルを追加] に追加するギャラリーの名前を入力します。
    画像をアップロードしてギャラリーを作成
  3. [ネイティブ Envira ギャラリー] タブ内の [ご使用のパソコンからファイルを選択] をクリックします。
    画像をアップロードしてギャラリーを作成
  4. 表示された [開く] 画面で、追加する画像を選択します。
  5. [ギャラリー] タブに、画像が追加されます。
    画像をアップロードしてギャラリーを作成
  6. [公開] をクリックして、新しいギャラリーを追加します。
    画像をアップロードしてギャラリーを作成

WordPressメディア内の画像でギャラリーを作成

  1. WordPress管理画面の [Enviraギャラリー] > [新規追加] メニューを選択します。
    WordPressメディア内の画像でギャラリーを作成
  2. 表示された [Enviraギャラリーの新規追加] 画面の [タイトルを追加] に追加するギャラリーの名前を入力します。
    WordPressメディア内の画像でギャラリーを作成
  3. [ネイティブ Envira ギャラリー] タブ内の [他ソースからファイルを選択] をクリックします。
    WordPressメディア内の画像でギャラリーを作成
  4. 表示された [メディアを追加] 画面の [メディアライブラリ] タブ に表示された画像の一覧から追加する画像を選択して [ギャラリーに挿入] をクリックします。
    WordPressメディア内の画像でギャラリーを作成
  5. [ギャラリー] タブに、画像が追加されます。
    WordPressメディア内の画像でギャラリーを作成
  6. [公開] をクリックして、新しいギャラリーを追加します。
    WordPressメディア内の画像でギャラリーを作成

Envira Galleryの画像にメタデータを含める方法

プラグインで作成されるギャラリーの画像には、メタデータを追加することができます。

メタデータは画像データに付与される情報で、例えば [タイトル] や [撮影日時] など様々な情報を追加することができます。またメタデータを付与することで、Googleなどの検索エンジンに対する効果があり、検索順位などに影響を与えることができます。

ギャラリーに追加した画像ファイルにメタデータを含めるには、次の手順で行います。

  1. WordPress管理画面の [Enviraギャラリー] メニューを選択します。
    Envira Galleryの画像にメタデータを含める方法
  2. 表示された一覧からメタデータを追加するギャラリーの [タイトル] リンクをクリックします。
    Envira Galleryの画像にメタデータを含める方法
  3. [Enviraギャラリー] 画面内の [現在ギャラリー内にある画像] 内に表示されている画像の [画像の変更] アイコン(青い鉛筆アイコン)をクリックします。
    Envira Galleryの画像にメタデータを含める方法
  4. 表示された [メタデータの編集] 画面で [タイトル] や [キャプション]、[代替テキスト]  などの項目に付与する情報を入力します。
    Envira Galleryの画像にメタデータを含める方法
  5. [メタデータを保存] をクリックします。
    Envira Galleryの画像にメタデータを含める方法
  6. 画面右上の [×] をクリックして [メタデータの編集] 画面を閉じます。
    Envira Galleryの画像にメタデータを含める方法

Envira Galleryのカスタマイズ方法

表示する画像のカスタマイズ

追加した画像の表示方法やサイズなどをカスタマイズすることができます。

  1. WordPress管理画面の [Enviraギャラリー] メニューを選択します。
    Envira Galleryのカスタマイズ方法
  2. 表示された一覧からメタデータを追加するギャラリーの [タイトル] リンクをクリックします。
    Envira Galleryのカスタマイズ方法
  3. [Enviraギャラリー] 画面内の [構成] タブをクリックします。
    Envira Galleryのカスタマイズ方法
  4. 表示された [ギャラリー設定] 内の [ギャラリーのレイアウト] で表示される画像の表示スタイルを変更します。(既定値は [Automatic] )
    Envira Galleryのカスタマイズ方法
  5. 多くの画像を一覧で表示する場合には [遅延読み込みを有効にしますか?] 設定を有効にしてページを表示するパフォーマンスを上げることができます。
  6. [自動レイアウト(行の高さ、マージン、最後の行)] を変更して表示されるギャラリーがページ内に収まるように調整します。
    Envira Galleryのカスタマイズ方法
  7. [ギャラリーの説明を表示しますか?] 設定を有効にしてギャラリーの上下に説明コンテンツを追加することができます。
  8. [画像サイズ] 設定を変更してギャラリーに表示される画像の大きさを編集します。
    Envira Galleryのカスタマイズ方法
  9. [更新] をクリックします。

画像クリック時のカスタマイズ

ギャラリー内の画像をクリックした場合の表示スタイルを [ライトボックス] 設定でカスタマイズすることができます。

  1. WordPress管理画面の [Enviraギャラリー] メニューを選択します。
    Envira Galleryのカスタマイズ方法
  2. 表示された一覧からメタデータを追加するギャラリーの [タイトル] リンクをクリックします。
    Envira Galleryのカスタマイズ方法
  3. [Enviraギャラリー] 画面内の [ライトボックス] タブをクリックします。
    Envira Galleryのカスタマイズ方法
  4. 表示された [ライトボックスの設定] 内の [ライトボックスを有効にしますか?] を有効(チェックを付ける)にします。
    Envira Galleryのカスタマイズ方法
  5. [画像サイズ] や [ライトボックスの開閉効果] などの設定を変更してギャラリーの画像をクリックした際の効果について変更を行います。
    Envira Galleryのカスタマイズ方法
  6. [更新] をクリックします。
  7. ギャラリーで表示された画像をクリックした場合に、大きなサイズで画像が表示され次の画像や前の画像へのナビゲーションするコンテンツが自動で表示されるようになります。
    Envira Galleryのカスタマイズ方法

Envira Galleryをページや投稿に埋め込む方法

作成したギャラリーを投稿や固定ページに追加するには、次の手順で行います。

  1. 追加したギャラリーを公開していない場合には編集画面の [公開] をクリックします。
    Envira Galleryをページや投稿に埋め込む方法
  2. 編集ページ内の [Envira コード] 内のショートコードをコピーします。
    Envira Galleryをページや投稿に埋め込む方法
  3. 固定ページ(または投稿)を作成します。
  4. [ショートコード] ブロックを追加します。
    Envira Galleryをページや投稿に埋め込む方法
  5. 手順2 でコピーしたショートコードを貼り付けます。
    Envira Galleryをページや投稿に埋め込む方法
  6. [下書き保存] をクリックしてページを保存します。
  7. [プレビュー] > [新しいタブでプレビュー] を選択します。
  8. ショートコード部分にギャラリーが表示されます。
    Envira Galleryをページや投稿に埋め込む方法

Envira Gallery プラグインの [ギャラリー] を設定することで、CSSやHTMLなどを使用せずに複数の画像を整列させて固定ページや投稿に表示することが簡単にできます。

追加した画像には、[キャプション] や [代替テキスト] などのメタデータを付与して、SEOを意識した画像表示が可能になります。

また [ライトボックス] 設定を使うことで、画像をクリックした場合に画像を拡大したり、他の画像へのナビゲーションするコンテンツを自動で表示させることができ、ユーザビリティーを意識した画像表示を行うことができます。