商品レビュー、比較表、チュートリアル、旅行記、インフォグラフィックス、教育コンテンツなどをカバーする際、テキストと画像を並べる必要があるかもしれません。WordPressでこれを行う方法は数多くあります。
この記事では、WordPressでテキストと画像を並べる効果的な方法をいくつかご紹介します。最後までお付き合いください。きっとエキサイティングなことを学べるはずです。
方法1：メディアとテキストブロックを使う
メディア＆テキスト は、Gutenbergブロックエディタのデフォルトブロックです。このブロックを使えば、サードパーティのツールに依存することなく、テキストと画像を並べることができる。
ステップ01: メディアとテキストをエディターに追加する
をクリックする。 プラス（＋）アイコン と入力する。タイプ メディア＆テキスト を検索バーに追加します。エディターにブロックを追加します。
ステップ 02: ブロックに画像を追加/アップロードする
画像を追加するには、ローカルドライブ、メディアライブラリ、または特集からアップロードすることができます。お好きなオプションをお選びください。
画像がブロックに追加されているのがわかるだろう。
ステップ03：メディア＆テキストブロックにテキストを追加する
ブロックの右カラムにお好きなテキストを書いてください。テキストの色や配置などは自由にカスタマイズできます。
ステップ04：テキストファイルとメディアファイルの位置を入れ替える
このブロックでは、ツールバーの各オプションをクリックすることで、テキストファイルとメディアファイルの位置を交互に変更することができます。
方法2：列ブロックを使う
について コラム もエディターのデフォルトブロックです。WordPressのコンテンツ作成で最もよく使われるブロックの一つです。
ステップ01：エディターに列ブロックを追加する
を追加することで、テキストと画像を並べて表示することができます。 パラグラフ そして イメージブロック カラムブロック内で別々に
だから 列ブロックを追加する 編集長へ
2段組レイアウトを選択する。
ステップ02：画像ブロックを列ブロックに追加する
左側に表示したほうがいい。だから 画像ブロックを追加する を左の列に追加する。
ここでも、ローカルドライブ、メディアライブラリ、またはURLから、希望の画像を追加する。
画像がブロックに追加されているのがわかります。
ステップ03：Cloumnsブロックにテキストを追加する
を追加する。 段落ブロック を右カラムに追加する。これでテキストを追加できる。
テキストが列に追加されているのがわかるだろう。
次に、画像やテキストを含むカラムブロックをカスタマイズすることができます。
方法3：Tablebergブロックを使う
テーブルバーグ は、あなたのウェブサイトのための多数の部分を設計することができます素晴らしいテーブルビルダープラグインです。このプラグインは、テキストと画像を並べて配置することもできます。下のバナーのボタンをクリックしてプラグインをダウンロードしてください。
美しいテーブルを作る
ブロックエディター付き
今すぐチュートリアルに従おう。
ステップ01: エディターにTablebergブロックを追加する
このプラグインはTablebergという名前のブロックをGutenbergブロックライブラリに追加します。 Tablebergブロックを追加 to the editor.
レイアウトに必要な列と行の数を選択します。ここでは2*1を選択します。
列と行の準備ができたのがわかるだろう。
ステップ 02: テーブルのセルに画像を追加する
Tablebergでは、セルにいくつかのカスタムブロックを追加することができます。ブロックの プラス（＋）アイコンを見つける。 画像ブロックを追加する をセルのひとつに加える。
ローカルドライブ用の画像をアップロードするか、メディアライブラリから画像を追加します。
画像を追加しましたので、ご覧ください。
ステップ03: テーブルにテキストを追加する
段落ブロックを使って右カラムにテキストを追加するだけです。
ステップ 04: Tableberg ボーダーの変更
テーブルの境界線を取り除くか、コロンとさせることで、この部分をより魅力的にすることができる。 こちらへ その スタイルタブ.
カム・トゥ・テーブル・ボーダー タブを下にスクロールしてください。これらのオプションから、テーブルの境界線を削除したり、色付けしたりするオプションが表示されます。
このように、WordPressではテキストと画像を並べるウェブセクションを作成することができます。
方法4：スライダーバーグ・ブロックを使う
インタラクティブなスライダーでテキストと画像を並べて見せたいですか？スライダーの スライダーバーグ プラグインを使えば、おなじみのMedia & Textブロックを使って、自由自在にそれを実現できます。ほんの数分で設定できる方法をご紹介します：
ステップ1：Sliderbergプラグインをインストールして有効化する
まず プラグイン → 新規追加 をクリックします。 Install Now.それからプラグインを有効にしてください。
ステップ 2: スライダーバーグブロックを挿入する
投稿またはページを編集するをクリックしてください。 + ボタンをクリックし、"Sliderberg" を検索して、スライダーを表示したい場所に Sliderberg ブロックを挿入します。
ステップ3：「ブロックスライダー」タイプを選択する
プロンプトが表示されたら ブロック・スライダー オプションを追加します。これにより、各スライド内に任意のGutenbergブロックを追加できます。
ステップ 4: スライダーの背景色を選択する
サイトのスタイルに合わせてスライダーの背景色を選ぶか、透明にしてすっきりと見せましょう。
ステップ5：スライダー内に「メディア＆テキスト」ブロックを追加する
最初のスライドで + ボタンをクリックし メディア＆テキスト ブロックに入った。
ステップ 6: スライダーに画像とテキストを追加する
メディア＆テキストブロックを使って画像をアップロードし（左側）、テキストを追加します（右側）。見出し、段落、ボタン、その他必要なブロックを使用できます。
ステップ 7: スライドの追加と複製
もっとスライドを見たい？クリック スライドを追加 で新しいものを作成するか スライドの複製 で既存のレイアウトをコピーします。
ステップ 8: スライダーをカスタマイズして公開する
お好みに合わせてスライダーの設定（アニメーション、自動再生、ナビゲーション・アローなど）を微調整してください。準備ができたら 出版 ライブを開始する！
スムーズでレスポンシブなスライダーは、テキストと画像を並べて表示することができ、チームのショーケース、製品、お客様の声などに最適です。
プロのアドバイスだ： を使うことができる。 いずれも メディア＆テキストだけでなく、Sliderbergスライドの中にブロックを追加できます！ボタン、アイコン、カラム、サードパーティ製ブロックもクリエイティブに。
結論
確かに、デフォルトのGutenbergブロックを活用して、ウェブ記事やページを作成・デザインすることができる。しかし、多くの高度な機能が欠けているため、多くのエキサイティングな機能を備えた追加のブロックプラグインが必要になることがよくあります。
Tablebergはこのような場合に使えるエキサイティングなプラグインだ。Ultimate Blocksはもう一つの素晴らしいブロックプラグインです。この2つのプラグインの無料バージョンは、以下のボタンをクリックしてご覧ください。
こちらもお読みください:
