WordPressの画像を列と行で表示する方法

WordPressの画像を列と行で表示する方法

画像などのビジュアルコンテンツが、コンセプトや物語を伝える上で強力な役割を果たすことは、もはや周知の事実だ。テキストコンテンツだけでは読者を魅了できないことも多い。そのため、ブログ記事やページに関連する画像を組み込むことが必須となっている。

WordPressでは、様々な方法でサイトに画像を追加することができます。その中でも最も効果的な方法のひとつが、画像を列や行に分けて追加する方法です。これにより、画像を整理された形で表示することができます。

このブログ記事では、WordPressの画像をカラムと行で表示する複数の方法を紹介します。

美しいテーブルを作る
ブロックエディター付き

方法1:カラムブロックを使ってWordPressで画像を表示する

WordPressにはデフォルトのカラムブロックがあります。その中に画像ブロックを含む多くのブロックを追加することができます。ここにガイドがあります。

ステップ01: Gutenbergカラムブロックを追加する

探す カラムブロックを追加 をクリックしてください。

Gutenbergカラムブロックを追加する

列ブロックに追加したい列のバリエーションの数を選択します。このチュートリアルでは、50/50のカラムバリエーションを選択します。

列ブロックの列数を選択する。

ステップ 02: 画像ブロックを列ブロックに追加する

カラムブロックの中に他のGutenbergブロックを入れることができます。今すぐ、 click the plus (+) icon カラム内の検索と 画像ブロックを追加する to it.

画像ブロックを列ブロックに追加する

メディアライブラリまたはローカルドライブから画像を追加できます。お好きなようにどうぞ。

Upload image to the column block

ステップ03:カラムブロック内の画像ブロックをスタイライズする

画像を追加したことがわかります。ツールバーの整列オプションを使って画像を中央に配置することができます。エッジサークルのアイコンを使って画像のサイズを変更します。最後に、「スタイル」タブのオプションを使用して、画像をさらにスタイル化することができます。

カラム・ブロック内の画像ブロックをスタイライズする

同じように、もう一方の列にも画像を追加する。

他の列に画像を追加する

WordPressにはデフォルトのギャラリーブロックがあり、同じブロックレイアウトで複数の画像を追加することができます。

ステップ 01: ギャラリーブロックを追加する

上記の方法と同様に、検索して エディタにギャラリーブロックを追加する.

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

の画像をアップロードできるようになります。 ローカルドライブ または Media Library.このチュートリアルでは、メディアライブラリから画像をアップロードします。

画像のアップロード

ステップ 02: 画像の選択とアップロード

画像を選択する ギャラリーブロックにアップロードしたい画像を選択します。画像はいくつでも選択できます。完了したら 新しいギャラリーを作成ボタンをクリックします。.

ギャラリーブロックの画像を選択する

各画像にキャプションを追加することもできます。何も付けなくても問題ありません。を押してください。 ギャラリー挿入ボタン at the end.

ギャラリー挿入

ギャラリーに画像が追加されていることがわかります。次に、画像ブロックをカスタマイズします。 設定 そして スタイルタブ on the right sidebar.

願わくば、あなた一人でやってほしい。

ギャラリーに画像を追加

方法3:TableBergプラグインを使ってWordPressで画像を表示する

TableBergは使いやすいテーブルビルダープラグインです。テーブルセルに様々なカスタムブロックを追加して、多機能なテーブルを作成することができる。ここでは、TableBergプラグインを使ってWordPressで画像を追加する方法を紹介する。

ステップ01: TableBergプラグインのインストールと有効化

こちらへ プラグイン > 新規プラグインの追加. Type テーブルバー in the search box. インストール そして アクティブ化 プラグインが下に表示されたら

TableBergプラグインをインストールして有効化する

ステップ 02: TableBerg ブロックを投稿/ページに追加する

このプラグインには、TableBergという名前のGutenbergブロックが付属しています。を見つけて タベルバーグ・ブロック を編集者に送る。

TableBergブロックを見つけて、Gutenbergエディタに追加します。

テーブルの行番号と列番号を定義する。このプロセスはデフォルトのテーブルブロックと同様です。自分でやってみましょう。

行番号と列番号を設定する

ステップ03:画像ブロックを見つけてテーブルに追加する

テーブルの準備ができたでしょうか。画像を追加したいセルを選択してください。セルを選択すると プラス(+)アイコン が表示される。

プラス(+)アイコンをクリック.イメージブロックが表示されます。 イメージブロックを押す.

Add the Image block to the table

ローカルドライブまたはメディアライブラリから画像をアップロードするオプションが表示されます。お好きなオプションをクリックして画像をアップロードしてください。

ブロックに画像をアップロードする

ステップ 04: アップロードした画像をスタイライズする

うまくいけば、画像はすでにテーブルにアップロードされています。右サイドバーのスタイルタブに来てください。デュオトーン、ボーダー、半径など、画像ブロックをスタイリングするためのオプションが見つかります。

アップロードした画像をスタイライズする

このプラグインを使えば、WordPressのテーブルに画像をアップロードすることができます。調べる WordPressでチームメンバーセクションを作成する方法 カラムブロックを使って。

最後のコメント

ウェブサイトをうまく維持するためには、コンテンツをさまざまな方法でアップロードし、提示する必要がある。同じコンテンツでも、投稿やページによって見せ方を変えなければならないこともある。そして、それは画像ブロックも同じです。

このチュートリアルを読めば、WordPressで様々な方法で画像ブロックを追加し、コンテンツにバリエーションを持たせることができるようになるでしょう。



テーブルバーグ・チーム