Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

EnviraでレスポンシブWordPressイメージギャラリーを簡単に作成する方法

WordPressで画像ギャラリーを作成することは、ビルトイン機能があなたのニーズを満たさない場合、イライラすることがあります。多くのギャラリープラグインは素晴らしい結果を約束しますが、しばしば使いにくく、サイトを遅くします。

Envira Galleryはシンプルなソリューションを提供します。WordPressで魅力的でレスポンシブな画像ギャラリーを簡単に作成することができます。

この投稿では、Enviraを使ってイメージギャラリーを素早くセットアップし、カスタマイズする方法をご紹介します。

How to easily create responsive WordPress image galleries with Envira

なぜEnvira Galleryが優れているのか?

もしあなたが、たくさんの写真を掲載する写真サイトやポートフォリオサイトを運営しているのであれば、画像ギャラリーを作成する際に生じるトラブルはすでにご存知でしょう。

例えば、サイトのスピード、整理整頓の欠如、ブラウザーとの互換性、端末との互換性、セットアップの難しさなどの問題に遭遇するかもしれない。

他のギャラリープラグインとは異なり、Enviraはレスポンシブデザイン、ライトボックス、スライドショー機能、ドラッグアンドドロップビルダー、テンプレート、動画サポートなどの機能を満載しながらも、非常に高速です。

また、画像の保護に役立つプロテクトなどのアドオンもあります。一方、タグアドオンでは、画像をすべて整理したり、ディープリンク、フルスクリーン、スーパーサイズにすることができます。

Enviraは、Instagram、Dropbox、WooCommerce、Pinterestといった他のツールやプラットフォームとも簡単に統合できる。

このことを念頭に置いて、Enviraでイメージギャラリーを作成するプロセスを見てみましょう。

Envira Galleryでレスポンシブ画像ギャラリーを追加する

Envira Galleryは、市場で最高のWordPress用画像ギャラリープラグインです。

このチュートリアルでは、より多くの機能をアンロックするためにEnvira Gallery Proバージョンを使用します。しかし、Envira Galleryの無料バージョンを使用してイメージギャラリーを作成することもできます

Envira Gallery website

まず、Envira Galleryプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドを参照してください。

有効化した後、Envira Gallery Settingsに行き、Envira Galleryアカウントエリアにあるライセンスキーを入力する必要があります。

Add the Envira Gallery license key

ここでキーを入力し、「Verify Key」ボタンをクリックします。

新しいギャラリーを作成するには、WordPressダッシュボードからEnvira Gallery ” Add Newに移動する必要があります。

Add new gallery

上部にギャラリーの名前を入力し、「コンピューターからファイルを選択」ボタンをクリックすると、ギャラリーに画像がアップロードされます。

Envira Galleryでは、ギャラリー用に他のソースから画像を選択することもできます。WordPressのメディアライブラリに画像をアップロードするだけで、ギャラリーに使用することができます。

Enviraギャラリーの画像ギャラリー設定の編集

画像を選択すると、画像のサムネイルが表示されます。

View images in the gallery

表示したい順番にドラッグ&ドロップするだけで、画像を並べ替えることができます。

鉛筆アイコンをクリックすると、さらに多くのオプションが表示されます。例えば、タイトルやaltタグなどの画像のメタデータを挿入することができます。

Envira Galleryでは、画像タイトルにHTMLを追加したり、’画像ハイパーリンク’フィールドに任意のページやサイトへのリンクを追加することができます。

Add metadata to gallery images

メタデータに満足したら、’設定’タブをクリックし、イメージギャラリーの設定を行うことができます。

あなたはこの特定のギャラリーを表示する 方法を選択することができます。例えば、様々なギャラリーレイアウトから選択でき、 遅延ローディングと遅延ローディングディレイを有効化 できます

Set up config settings

下にスクロールすると、さらに多くの設定が表示されます。

Envira Galleryでは、行の高さや余白の変更、イメージギャラリーの説明の表示、イメージの寸法やサイズの編集などが可能です。

Additional config settings for gallery

次に、’Lightbox’ タブに切り替えて、画像をクリックしたときに全画像を表示するライトボックスの設定を行います。

テーマの選択、キャプションまたはタイトルの表示、画像サイズ、矢印表示の有効化、ライトボックスギャラリーツールバーの非表示または表示、ライトボックスの開閉エフェクトの選択などのオプションがあります。

Lightbox settings for image gallery

ライトボックスの設定が終わったら、ライトボックスタブの一番下までスクロールして、サムネイルセクションに移動します。

これらのサムネイルは、ユーザーが画像をクリックすると、ライトボックスの下に表示されます。サムネイル画像をクリックすると、ユーザーはギャラリーを閲覧することができます。

Adjust thumbnails settings

Envira Galleryでは、ギャラリーがモバイルでどのように見えるかの設定を変更することもできます。

モバイル’タブに切り替え、モバイルレスポンシブギャラリー画像の作成、モバイル寸法の編集、行の高さの調整、タイトルの有効化などのオプションを有効化するだけです。

Mobile gallery settings

最後に、’Misc’タブで画像ギャラリーの追加設定を表示することができます。

例えば、ギャラリースラッグの変更、カスタムCSSの入力、ギャラリーのインポートなどのオプションがあります。

Miscellaneous settings in Envira

ギャラリーをエクスポートして画像をコピーすることもできます。

ギャラリーの設定に満足したら、このギャラリーを利用可能にするために’公開する’ボタンを押してください。

Publish your image gallery

公開すると、投稿、ページ、ウィジェットに挿入してギャラリーを表示するためのショートコードが表示されます。

詳しくは、WordPressにショートコードを追加する方法をご覧ください。

Copy image gallery shortcodes

WordPressで投稿やページに直接ギャラリーを追加する

Enviraギャラリーを使用して画像ギャラリーを作成したので、次のステップではそれをブログ投稿やランディングページに追加します。

WordPressのコンテンツエディターに入ったら、「+」ボタンをクリックしてEnviraギャラリーブロックを追加します。

Envira gallery block

ブロックを追加した後、Envira Galleryブロックのドロップダウンメニューをクリックしてギャラリーを選択することができます。

すると、ブロックエディターにイメージギャラリーのプレビューが表示されます。外観に満足したら、投稿またはページを公開するだけです。その後、あなたのサイトにアクセスし、レスポンシブ画像ギャラリーを実際に見ることができます。

Image gallery preview

WordPressでEnviraギャラリーを使うためのボーナスヒント

Envira Galleryには、機能を拡張し、より多くの機能を提供するプレミアムアドオンも付属しています。

例えば、Envira Galleryを使用して画像の右クリックを無効化することで、画像の盗難を防ぐことができます。また、透かしアドオンを使用して、ギャラリー内の画像に透かしを追加することもできます。

また、Envira GalleryをWooCommerceと統合して、魅力的な商品画像ギャラリーを作成することもできます。これにより、カスタマイズした商品画像を様々なレイアウトで表示することができます。

タグを使ってギャラリーを整理したり、フィルター可能なポートフォリオを作成することもできます。複数のギャラリーを持っていて、ユーザーが興味のある項目を簡単に並べ替えたい場合にとても便利です。

Preview of a Filterable Portfolio Gallery

WPBeginnerの専門チームが、あなたのビジョンを魅力的なWordPressサイトに変えます!私たちの才能あるデザイナーが、あなたのブランドを完璧に体現するサイトを作成します。 カスタマイザーからSEOのベストプラクティスまで、私たちがすべてを管理します。美しいサイトの構築を今すぐ始めましょう

この投稿が、Enviraを使ってWordPressでレスポンシブ画像ギャラリーを作成するのにお役に立てば幸いです。WordPressの投稿日やページに複数のギャラリーを追加する方法や、WordPressにFlickrウィジェットを追加する方法についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

33件のコメント返信を残す

  1. THANKGOD JONATHAN

    Please how about embeded images. Can I use embeded images to create gallery with Envira plugin. If not how do I ensure the images does not affect my website speed. In cases where I have large number of galleries in a photography blog.

  2. Jiří Vaněk

    Just recently, I was creating a website for a kindergarten, and part of the website included an extensive gallery. I ended up using Elementor and found my way around it. However, the organization of photos isn’t very good. Thank you for the tip. If I’m doing a redesign of the website or creating another one with a large gallery, I will definitely give this plugin a try.

    • WPBeginner Support

      We hope you find it helpful :)

      管理者

  3. Ralph

    This looks really nice. I won’t use it as i don’t have almost any images for my blog (it is technical) but my wife blogs about furniture so this may find a good use!

    • WPBeginner Support

      We hope she finds it helpful :)

      管理者

  4. Moinuddin Waheed

    I have used many image plugins back in 2017 and due to heavy load time on my website I left most of them. I don’t know if installing all these plugins make the website somewhat slower or it is good to install and the code itself takes care of the speed of the website.
    The problem comes with the quality of the image. usually we get high quality images on our phones and when we upload those on our websites it get stuck due to its image size. if we crop do something we compromise with the image quality.
    I hope all these hurdles will be fixed by envira plugin.

    • WPBeginner Support

      We hope you find the plugin suits your needs :)

      管理者

  5. Sameer Hussain

    Now this is something that can come handy any day. Because images are a big part of your website and ultimately blogging success. Thanks for this.

    • WPBeginner Support

      You’re welcome!

      管理者

  6. R Taylor

    We have read this several times and watched the videos and still can’t figure out how to add caption and have it actually show when published. We have Pro but are screen is different, example when it says to “add gallery” (block beside “add media”) our version doens’t show it this way. We aren’t sure if that is where are issue starts or not.

    • WPBeginner Support

      Envira has likely updated their interface since this article was created so you could check with Envira’s support. More than likely there could be a styling issue where your theme does not show the caption for some reason.

      管理者

  7. Marilyn Pongracz

    An Envira tech person got back to me, and I had to disable Essential Grid to make it work in the Highend Theme.

  8. Marilyn Pongracz

    I tried a gallery and it was easy to create, but with some long and some short captions, it didn’t look very good. Lightbox didn’t work, either, even when I disabled my theme’s lightbox. Then I tried disabling Envira, and my theme’s lightbox won’t work.

  9. Kenny Lambert

    Envira is a piece of rubbish – would not work on my website and even though I have deleted the gallery and the plugin this [envira-gallery id=”91″] still shows on my homepage and I can’t get rid of it

    • WPBeginner Support

      Hi Kenny,

      Envira uses shortcodes to display galleries. You have to add these shortcodes to display galleries and you can remove them by simply editing the post and page and removing the shortcode. Hope this helps.

      管理者

  10. William

    thanks to Envira for the gallery option. Save a lot of time.

  11. Amber

    I love the Envira Plugin, but I can’t figure out how to have the gallery images link to the attachment page/post – it just links to the image, which is great if using lightbox (which I don’t want to do)…any ideas?

    • Editorial Staff

      The best way to get support for Envira Gallery is through their customer support system :)

      管理者

  12. Rohit Kumar

    I have been using theme “Being Hueman” on my blog but images are cut off. you can visit my blog and see yourself. I am not able to fix it and moreover, I have not seen any help on google so I have to write this comment to seek your help.

    Regards,

    Rohit Kumar

  13. WPBeginner Staff

    Shortcodes are not enabled by default for widgets. To enable shortcodes in widgets please add this code in your site’s functions.php file or a site-specific plugin.

    add_filter(‘widget_text’,’do_shortcode’);

  14. Mathias

    How can I insert the shortcode for the gallery into a widget in my sidebar? It did not work when I copied the short code into a text widget in my sidebar. thanks

  15. WPBeginner Staff

    Envira Gallery works on any standard compliant WordPress theme. It is not an eCommerce plugin itself, but it works with most popular eCommerce plugins and themes.

  16. Elise

    Hi! I’m creating a site for an art gallery. I would like to use the Envira plug in. Can you recommend a good theme to use or purchase that would go well with the Envira plug in? And at some point I would like to add ecommerce, does Envira support that or is that a theme issue?

  17. Roma Cantuaria

    Hello. I’m trying the Envira Lite right now. The design is perfect and the program is very easy to use. However, I’m facing two problems. Firstly, my photos are taking too long to load. Secondly, even after the page is completely loaded, a kind of loading icon under my gallery continues to appear. I’d like a little help from you guys.

    The link to my gallery: http://www.casasemparede.com/teste-7/

  18. Kaley Perkins

    Just bought the plugin but never saw a place to enter the code for the 20% off. Not a big deal for sure with all of the AMAZING value you provide, and QUITE possibly user error on my behalf being so eager to get it downloaded and working, but heads-up.

  19. Stephen Starr

    I’m testing Envira Lite, on a custom these. Not sure where this code belongs:

    You can also place this gallery into your template files by using the template tag(s) below:

    if ( function_exists( ‘envira_gallery’ ) ) { envira_gallery( ‘467’ ); }
    if ( function_exists( ‘envira_gallery’ ) ) { envira_gallery( ‘posada-life-in-picture’, ‘slug’ ); }

    Here’s my gallery that doesn’t have the lightbox function:
    http://posadalife.stephenbstarrdesign.info/posada-life-in-pictures/

    • WPBeginner Support

      Its working fine on our side, we can see your gallery and photos. Seems like you resolved the issue you were having.

      管理者

  20. Clare Chate

    Hey there, the two main features I’m currently looking for in a good gallery for my clients, is

    (1) Categories / Folders (that may be a given, excuse my ignorance! :-) )
    and
    (2) Social media sharing on images

    Does this one have those options?

    • WPBeginner Support

      It allows you to enable Tags using the tags addon. Using this feature you can allow users to sort gallery into tags. For the time being, there is no social sharing on the images.

      管理者

      • Clare

        Thankyou for the info!
        Clare

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。