WordPressの写真を列と行で表示する方法

WordPressの写真を列と行で表示したいですか？

デフォルトでは、WordPress は画像を縦に積み重ねて追加します。しかし、ブログ記事に複数の写真を投稿する場合、見た目がすっきりせず、ユーザーはたくさんスクロールする必要があります。

この記事では、WordPressの写真を簡単に列と行で表示する方法をご紹介します。

WordPressの写真を列と行で表示する必要がある理由

デフォルトでは、複数の画像をWordPressのブログ記事に追加すると、それらは互いに隣接して、または重なって表示されます。

これはあまり見栄えが良くなく、ユーザーは複数の画像や写真を表示するためにたくさんスクロールする必要があります。

グリッドベースのレイアウトを使用して、写真を複数行・複数列で表示することで、この問題を簡単に解決できます。これにより、画像がコンパクトに表示され、ウェブサイトのユーザーエクスペリエンスが向上します。

写真サイトをお持ちの場合は、ポートフォリオをより魅力的な方法で表示できます。または、オンラインストアで商品画像を複数表示する場合、それらを縦横に並べて表示できます。

それを踏まえて、WordPressの写真を直接またはWordPressプラグインを使用して列と行で表示する方法を見てみましょう。お好みのセクションにジャンプするには、以下のリンクをクリックしてください。

1. プラグインなしで写真を行と列に表示する

この方法では、WordPressウェブサイトにプラグインをインストールする必要はありません。複数の写真を頻繁に追加しない場合は、これで十分です。

カラムブロックに手動で画像を追加することも、WordPressのデフォルトのギャラリーブロックを使用することもできます。

画像をカラムブロックに追加

まず、写真を表示したい新しい投稿を作成するか、既存の投稿を編集する必要があります。コンテンツエディタ画面に入ったら、「+」ボタンをクリックしてカラムブロックを追加します。

次に、希望する列数とそのレイアウトを選択できます。

たとえば、50/50の比率、33/66の比率、25/50/25の比率などを選択できます。

その後、各カラムに画像ブロックを追加できます。

「+」ボタンをクリックして、「画像」ブロックを選択するだけです。

次に、ブロックに画像を追加する必要があります。

「アップロード」ボタンをクリックしてコンピューターから画像を追加するか、「メディアライブラリ」オプションを選択して既存の写真を使用できます。

メディアライブラリが開いたら、好みの画像を選択して「選択」ボタンをクリックするだけです。

画像最適化のベストプラクティスの1つは、画像にaltテキストを追加することです。これにより、検索エンジンのボットが画像を理解し、画像検索結果に表示できるようになります。

これで、画像がカラムブロックの1つに表示されるはずです。

これで、カラム内の他のブロックに対しても同様の操作を行い、さらに画像を追加できます。

ギャラリーブロックに画像を追加する

WordPressには、画像を列や行で表示するために使用できるデフォルトのギャラリーブロックも用意されています。

まず、「+」ボタンをクリックして、コンテンツエディターにギャラリーブロックを追加します。

次に、画像をアップロードするか、メディアライブラリから選択する必要があります。

このチュートリアルでは、「メディアライブラリ」オプションを選択します。

次に、ギャラリーに追加して行と列で表示したい画像を選択するだけです。

画像を選択したら、「新しいギャラリーを作成」ボタンをクリックします。

次に、WordPressは各画像のキャプションを入力し、写真の順序を並べ替えるように求めます。

その後、「ギャラリーを挿入」ボタンをクリックするだけです。

これで、ギャラリーブロックに画像が表示されるはずです。

右側の設定パネルのスライダーをクリックして、行数を調整できます。

完了したら、投稿を公開するだけで、画像が行と列に表示されます。

サイトにアクセスして、実際に表示されていることを確認してください。

この方法はほとんどの初心者にとって有効です。しかし、写真ブログを運営している場合や、ウェブサイトで頻繁に写真を共有する場合は、この方法ではいくつかの重要な機能が不足しています。

例えば、写真の外観はWordPressテーマに依存し、その特定のレイアウトとスタイルに限定されます。

画像はライトボックスポップアップで開かず、ユーザーは新しいページとして読み込んでから、元のページに戻るために戻るボタンを押す必要があります。

よりプロフェッショナルで美しいユーザーエクスペリエンスのためには、プラグイン方式を試すことをお勧めします。

2. プラグインを使用して写真を列と行で表示する

写真を縦横に並べて追加するのに最適なプラグインはEnvira Galleryです。これは最も人気のあるWordPressギャラリープラグインで、非常に使いやすく、多くの機能を提供しています。

まず、Envira Galleryプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化後、ライセンスキーを入力するには Envira Gallery » 設定 ページにアクセスする必要があります。このキーは Envira Gallery のウェブサイトのアカウントから取得できます。

これで、美しい画像ギャラリーを作成する準備ができました。

WordPressダッシュボードからEnvira Gallery » Add Newにアクセスするだけで、最初のギャラリーを作成できます。

まず、一番上にギャラリーの名前を入力する必要があります。ここから、コンピュータからファイルを選択してアップロードするか、WordPressのメディアライブラリから選択できます。

写真をアップロードすると、下のギャラリー設定ボックスに表示されます。

次に、「設定」タブをクリックして、写真の表示方法をカスタマイズする必要があります。

Envira Galleryでは、さまざまなギャラリーレイアウトを選択できます。画像をグリッド表示するには、グリッド、メイソン、スクエアレイアウトを選択できます。

レイアウトを選択した後、「ギャラリーのカラム数」ドロップダウンメニューをクリックして、表示したいカラム数を選択できます。

下にスクロールすると、ギャラリーをカスタマイズするための追加オプションが表示されます。例えば、ギャラリーの寸法とサイズを編集する設定があります。

その後、「公開」ボタンをクリックすると、写真ギャラリーをWordPressサイトに追加する準備が整います。

次に、投稿を編集するか、新しい投稿を作成する必要があります。コンテンツエディターに入ったら、単に「+」ボタンをクリックして「Envira Gallery」ブロックを追加します。

ここから、ドロップダウンメニューをクリックして、先ほど作成したギャラリーを選択できます。

これで投稿を保存し、プレビューして、美しいモバイル対応の写真ギャラリーで写真を列と行で表示できます。

これで、ユーザーが写真のサムネイルをクリックすると、美しいポップアップで開きます。ページを離れることなく画像を閲覧することもできます。

ボーナス：画像カラム＆行付きカスタムテーマを作成

画像を列や行で追加するためのプレースホルダーを備えたカスタムWordPressテーマを作成することもできます。

カスタムテーマを作成する最良の方法は、SeedProdを使用することです。これは、事前に構築されたテーマと多くのカスタマイズオプションを提供する、最高のドラッグアンドドロップウェブサイトビルダーです。

SeedProd を使用してランディングページのデザインにカラムブロックを追加し、行とカラムに画像を追加できます。SeedProd には、これに使用できるギャラリーブロックも組み込まれています。

詳細については、コードなしでカスタムWordPressテーマを作成する方法に関するガイドをご覧ください。

この記事が、WordPressの写真を縦横に並べて表示する方法を学ぶのに役立ったことを願っています。また、WordPressで一般的な画像の問題を修正する方法や、中小企業向けの最高のデザインソフトウェアに関するガイドもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。