WordPressでテキストと画像を並べる方法

商品レビュー、比較表、チュートリアル、旅行記、インフォグラフィックス、教育コンテンツなどをカバーする際、テキストと画像を並べる必要があるかもしれません。WordPressでこれを行う方法は数多くあります。

この記事では、WordPressでテキストと画像を並べる効果的な方法をいくつかご紹介します。最後までお付き合いください。きっとエキサイティングなことを学べるはずです。

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

方法1:メディアとテキストブロックを使う

メディア&テキスト は、Gutenbergブロックエディタのデフォルトブロックです。このブロックを使えば、サードパーティのツールに依存することなく、テキストと画像を並べることができる。

ステップ01: メディアとテキストをエディターに追加する

をクリックする。 プラス(+)アイコン と入力する。タイプ メディア&テキスト を検索バーに追加します。エディターにブロックを追加します。

WordPressにメディア&テキストブロックを追加する

ステップ 02: ブロックに画像を追加/アップロードする

画像を追加するには、ローカルドライブ、メディアライブラリ、または特集からアップロードすることができます。お好きなオプションをお選びください。

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

画像がブロックに追加されているのがわかるだろう。

メディア&テキストブロックに画像が追加される

ステップ03:メディア&テキストブロックにテキストを追加する

ブロックの右カラムにお好きなテキストを書いてください。テキストの色や配置などは自由にカスタマイズできます。

メディア&テキストブロックにテキストを追加する

ステップ04:テキストファイルとメディアファイルの位置を入れ替える

このブロックでは、ツールバーの各オプションをクリックすることで、テキストファイルとメディアファイルの位置を交互に変更することができます。


方法2:列ブロックを使う

について コラム もエディターのデフォルトブロックです。WordPressのコンテンツ作成で最もよく使われるブロックの一つです。

ステップ01:エディターに列ブロックを追加する

を追加することで、テキストと画像を並べて表示することができます。 パラグラフ そして イメージブロック カラムブロック内で別々に

だから 列ブロックを追加する 編集長へ

カラム・ブロックをエディターに追加する

2段組レイアウトを選択する。

2段組レイアウトを選択する

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

左側に表示したほうがいい。だから 画像ブロックを追加する を左の列に追加する。

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

ここでも、ローカルドライブ、メディアライブラリ、またはURLから、希望の画像を追加する。

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

画像がブロックに追加されているのがわかります。

カラム・ブロックに画像が追加される

ステップ03:Cloumnsブロックにテキストを追加する

を追加する。 段落ブロック を右カラムに追加する。これでテキストを追加できる。

段落ブロックを列ブロックに追加する

テキストが列に追加されているのがわかるだろう。

列ブロックにテキストが追加される

次に、画像やテキストを含むカラムブロックをカスタマイズすることができます。


方法3:Tablebergブロックを使う

テーブルバーグ は、あなたのウェブサイトのための多数の部分を設計することができます素晴らしいテーブルビルダープラグインです。このプラグインは、テキストと画像を並べて配置することもできます。下のバナーのボタンをクリックしてプラグインをダウンロードしてください。

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

今すぐチュートリアルに従おう。

ステップ01: エディターにTablebergブロックを追加する

このプラグインはTablebergという名前のブロックをGutenbergブロックライブラリに追加します。 Tablebergブロックを追加 to the editor.

GutenbergエディタにTableBergブロックを追加する

レイアウトに必要な列と行の数を選択します。ここでは2*1を選択します。

行と列の数を設定する

列と行の準備ができたのがわかるだろう。

エディタに行と列が追加される

ステップ 02: テーブルのセルに画像を追加する

Tablebergでは、セルにいくつかのカスタムブロックを追加することができます。ブロックの プラス(+)アイコンを見つける。 画像ブロックを追加する をセルのひとつに加える。

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

ローカルドライブ用の画像をアップロードするか、メディアライブラリから画像を追加します。

Tablebergに画像をアップロードまたは追加する

画像を追加しましたので、ご覧ください。

画像がテーブルに追加される

ステップ03: テーブルにテキストを追加する

段落ブロックを使って右カラムにテキストを追加するだけです。

Tablebergにテキストを追加

ステップ 04: Tableberg ボーダーの変更

テーブルの境界線を取り除くか、コロンとさせることで、この部分をより魅力的にすることができる。 こちらへ その スタイルタブ.

カム・トゥ・テーブル・ボーダー タブを下にスクロールしてください。これらのオプションから、テーブルの境界線を削除したり、色付けしたりするオプションが表示されます。

テーブルからボーダーを取り除く

このように、WordPressではテキストと画像を並べるウェブセクションを作成することができます。


結論

確かに、デフォルトのGutenbergブロックを活用して、ウェブ記事やページを作成・デザインすることができる。しかし、多くの高度な機能が欠けているため、多くのエキサイティングな機能を備えた追加のブロックプラグインが必要になることがよくあります。

Tablebergはこのような場合に使えるエキサイティングなプラグインだ。Ultimate Blocksはもう一つの素晴らしいブロックプラグインです。この2つのプラグインの無料バージョンは、以下のボタンをクリックしてご覧ください。

こちらもお読みください:



テーブルバーグ・チーム