Gutenberg エディターで画像とテキストを横並びにする方法3選【WordPress】

WordPressで記事を編集する際、文章と関連画像を並べて配置したい場合があると思います。
そんなときに役立つ画像と文章を横並びレイアウトにする方法を3つ紹介します。

それぞれ手軽さや特徴に違いがありますが、3番目のカラムを使う方法は万能で汎用性が高く、当記事でもこの方法を使ってレイアウトしていますのでぜひ取り入れてみてください。

方法1：「画像」の配置指定による方法

画像ブロックのツールバー項目「配置を変更」で左寄せ又は右寄せに指定した場合、CSSのfloatによる後続要素の回り込みが発生することで横並びレイアウトを実現できます。

操作が単純なため比較的簡単に利用できますが、floatの挙動を把握していない場合は予期しないレイアウトになってしまう場合があります。

この方法を使用した場合、横並びにしたくない要素まで回り込んでしまう場合はひと工夫必要になってきます。回り込み解除の具体的な方法については別の記事を参考にしてみてください。

メディアとテキストの配置は左右入れ替えることができます。

画像サイズは選べますが実際に表示されるサイズは「メディアの幅」で指定した数値に依存します。

カラム内に様々なブロックを配置して横並びにでき、2カラム以上のレイアウトも実現できます。

この記事内で画像とテキストが横並びになっている箇所は「カラム」を使った方法でレイアウトしています。