WordPressの写真をカラムや行で表示したいですか？
初期設定では、WordPressは画像を縦列に重ねて追加します。しかし、ブログ投稿に複数の写真を追加する場合、これはあまりきれいに見えませんし、ユーザーにとって多くのスクロールが必須となります。
この投稿では、WordPressの写真をカラムと行で簡単に表示する方法をご紹介します。
カラムと行のWordPress写真が必要な理由
初期設定では、WordPressのブログ投稿に複数の画像を追加した場合、画像は互いのすぐ隣や上に表示されます。
これでは見栄えが悪く、ユーザーは複数の画像や写真を表示するためにたくさんスクロールしなければなりません。
グリッドベースのレイアウトを使用して写真を行と列に表示することで、この問題を簡単に解決することができます。こうすることで、画像がコンパクトなレイアウトで外観され、サイトのユーザーエクスペリエンスが向上します。
写真サイトをお持ちなら、ポートフォリオをより魅力的に見せることができます。また、オンラインショップでは、商品画像を列やカラムに表示することで、より多くの商品画像を見せることができます。
それでは、WordPressの写真をカラムや行に手動で表示する方法、またはWordPressプラグインを使用する方法を見ていきましょう。以下のリンクをクリックして、お好きなセクションに進んでください。
1.プラグインなしでカラムと行に写真を表示する
この方法では、WordPressサイトにプラグインをインストールする必要はない。複数の写真を頻繁に追加しないのであれば、この方法で問題ないだろう。
手動でカラムブロックに画像を追加することも、WordPressの初期設定のギャラリーブロックを使用することもできます。
カラムブロックへの画像の追加
まず、写真を表示したい投稿を新規作成するか、既存の投稿を編集する必要があります。コンテンツエディター画面に入ったら、’+’ボタンをクリックしてカラムブロックを追加します。
次に、カラムの数とレイアウトを選択します。
例えば、50/50の比率、33/66の比率、25/50/25の比率などを選ぶことができる。
その後、各カラムに画像ブロックを追加することができる。
をクリックし、「Image」ブロックを選択するだけです。
次に、ブロックに画像を追加する必要があります。
アップロード」ボタンをクリックしてコンピューターから画像を追加するか、「メディアライブラリ」オプションを選択して既存の画像を使用することができます。
メディアライブラリが開いたら、お好みの画像を選択し、「選択」ボタンをクリックします。
画像最適化のベストプラクティスの一つは、画像にaltテキストを追加することです。これにより、検索エンジンのボットがあなたの画像を理解し、画像検索結果に表示することができます。
これでカラムブロックの1つに画像が表示されるはずです。
次に、カラム内の他のブロックにも同じことをして、さらに画像を追加することができる。
ギャラリーブロックに画像を追加する
WordPressには、画像を列や行に表示するために使用できる初期設定のギャラリーブロックもあります。
開始するには、’+’ボタンをクリックし、コンテンツエディターでギャラリーブロックを追加します。
次に、画像をアップロードするか、メディアライブラリから選択する必要があります。
このチュートリアルでは、「メディアライブラリオプション」を選択します。
から、ギャラリーに追加したい画像を選択し、行と列に表示するだけです。
画像を選択したら、’新規ギャラリー作成’ボタンをクリックします。
次にWordPressは、各画像にキャプションを入力し、写真の順番を並べ替えるよう求める。
そうしたら、’Insert gallery’ボタンをクリックするだけです。
ギャラリーブロックに画像が表示されるはずです。
右側の設定パネルにあるスライダーをクリックすると、行数を調整できます。
投稿が完了したら、投稿を公開するだけで、画像をカラムと行で表示することができます。
あなたのサイトを訪問して、その動きを見てください。
この方法はほとんどの初心者に有効だろう。しかし、もしあなたが写真ブログを運営していたり、サイトで頻繁に写真を共有しているのであれば、この方法にはいくつかの重要な機能が欠けている。
例えば、写真の外観はWordPressのテーマに依存し、その特定のレイアウトとスタイルに制限されます。
画像はライトボックスのポップアップでは開かず、ユーザーは新しいページとして画像を読み込み、元のページに戻るには戻るボタンを押す必要があります。
よりプロフェッショナルで美しいユーザーエクスペリエンスを求めるなら、プラグイン方式を試すべきだ。
2.プラグインを使って写真をカラムや行に表示する
カラムや行に写真を追加するのに最適なプラグインはEnvira Galleryです。最も人気のあるWordPressギャラリープラグインで、とても使いやすく、たくさんの機能を提供しています。
まず、Envira Galleryプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した場合、Envira Gallery ” 設定ページにアクセスし、ライセンスキーを入力する必要があります。このキーはEnvira Galleryサイトのアカウントから取得できます。
これで、美しい画像ギャラリーを作成する準備が整いました。
最初のギャラリーを作成するには、WordPressダッシュボードからEnvira Gallery ” 新規追加にアクセスしてください。
まず、上部にギャラリーの名前を入力する必要があります。ここから、コンピューターからファイルを選択してアップロードするか、WordPressメディアライブラリから選択することができます。
写真をアップロードすると、下のギャラリー設定ボックスに写真が表示されます。
次に、「設定」タブをクリックして、写真の表示方法をカスタマイズする必要があります。
Envira Galleryでは、異なるギャラリーレイアウトを選択することができます。画像を行と列で表示するには、グリッド、メイソン、スクエアレイアウトを選択できます。
レイアウトを選択した後、「ギャラリーカラム数」ドロップダウンメニューをクリックし、表示したいカラム数を選択することができます。
下にスクロールすると、ギャラリーをカスタマイズするためのオプションが表示されます。例えば、ギャラリーの寸法とサイズを編集する設定があります。
その後、’公開する’ボタンをクリックして、フォトギャラリーをWordPressサイトに追加できる状態にします。
投稿を編集するか、新規投稿を作成する必要があります。コンテンツエディターに入ったら、’+’ボタンをクリックして’Envira Gallery’ブロックを追加します。
ここからドロップダウンメニューをクリックし、以前に作成したギャラリーを選択することができます。
投稿を保存してプレビューすると、美しいモバイル・レスポンシブ・フォトギャラリーで写真をカラムや行で見ることができるようになりました。
ユーザーが写真のサムネイルをクリックすると、美しいポップアップが表示されます。また、ページを離れることなく画像を閲覧することができます。
ボーナス：カラムと行をイメージしたカスタムテーマの作成
カラムや行に画像を追加するためのプレースホルダーを持つカスタマイザーWordPressテーマを作成することもできます。
カスタムテーマを作成する最良の方法は、SeedProdを使用することです。これは、事前に構築されたテーマと多くのカスタマイズオプションを提供する最高のドラッグアンドドロップウェブサイトビルダーです。
SeedProdを使ってランディングページのデザインにカラムブロックを追加し、行やカラムに画像を追加することができます。SeedProdにはギャラリーブロックがビルトインされており、このために使用することができます。
さらに詳しく知りたい方は、コードなしでカスタムWordPressテーマを作成する方法についてのガイドをご覧ください。
WordPressで写真をカラムや行に表示する方法について、この投稿がお役に立てれば幸いです。WordPressでよくある画像の問題を解決する方法や、中小企業に最適なデザインソフトウェアについてのガイドもご覧ください。
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.
Muhammad Hammad
I believe custom theme creation is time taking and the EnviraGallery plugin is a more favorable option.
However, I am wondering if you can create custom layouts within the EnviraGallery plugin or just select from the pre-installed gallery templates?
WPBeginner Support
Envira Gallery does not have a custom placement of images if that is what you are wanting from the plugin but there are many different gallery options that would scale to the user’s browser.
管理者
Asad
This was the complete beginner’s guide
WPBeginner Support
Glad you think so
管理者
Chris Thom
Using the default gallery is there a way to control the margin/padding between images?
WPBeginner Support
You would need to manually modify the CSS for your content.
管理者
Chris Thom
Good information but on the stock WP galley how can I adjust the padding between images? Right now they’re butted right up against each other.
WPBeginner Support
You would need some knowledge of CSS, for a better understanding, we would recommend taking a look at our article below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
gedi
problem is u can’t put url behind image – wp won’t give option – can’t be edited execpt in html which is drawn out… good though if you dont want someone to cliick thru
WPBeginner Support
At the moment WordPress does not have the option to add individual links by default to the gallery which is why we show Envira Gallery which does have that option
管理者
Agnieszka
Hi!
I tried to set up a gallery and even though I set the number of columns when I eventually update and preview my page all images show in just 1 column..no matter what I do!!
I tried to change the layout and number of columns but every time it is just 1 column and I have no idea how to fix it. Could you please help?
Shannon Ball
I would like to have a grid of images so that when a reader clicks on an image it takes them to an external url with more info. (like a grid of ads/sponsors) at the bottom of a post…
Any suggestions?
Isaiah Hammons
I want the same exact thing you’re talking about..
sean sewell
I am desperately after the same thing! If you ever find out please let me know!
Michelle
Just curious… I am sure you have already tried this, but on the media tab inside of wordpress have you clicked on the photo and under the information there is a spot to put a URL so someone can click on it. I know it is kind of hidden and not that intuitive, but that might work for you.
Cathrine
My gallery still won’t post in multiple columns, any idea why that might be?
Vasilis
That’s my problem also…
Anybody there?
Eileen
Wow – the gallery button function is a hidden gem I didn’t know about! Thank you.