WordPressで画像と文章の横並びが簡単にできる「メディアと文章ブロック」の活用例

WordPressのページ作成時に画像と文章を横並びにレイアウトしたいことがあります。たとえば、お客様の声、サービス紹介、アフィリエイト商材の紹介ページなどで次のようなレイアウトをイメージしている場合です。

画像と文章を横並びにしたい
画像と文章を横並びにしたい

このようなレイアウトは難しそうに思うかもしれませんが、Gutenbergのメディアと文章ブロックを使えば簡単です。CSSなどのコードを書く必要もなく、ブロックをドラッグアンドドロップして画像を選んだり文字を入力していけば完成です。ここでは、「メディアと文章ブロック」の活用例を紹介します。

画像と文章を横並びにする「メディアと文章ブロック」

Gutenbergのメディアと文章ブロックとは画像と文章を横並びにレイアウトできるブロックです。「ブロックの追加」‐「レイアウト要素」メニューでメディアと文章ブロックを選ぶと次のような画面が開きます。

画像と文章を左右にレイアウトする「メディアと文章ブロック」
画像と文章を左右にレイアウトする「メディアと文章ブロック」

画像を選んで文章を入力すれば完成です。画像は左右どちらでも設定できます。以下、使用例を紹介します。参考にしてください。

メディアと文章ブロックの活用例

「お客様の声」に

わかりやすい用途は「お客様の声」でしょうか。お客様の画像と感想を横並びにすれば完成です。

メディアと文章ブロックで「お客様の声」を作成
メディアと文章ブロックで「お客様の声」を作成

ちなみに、「文章」には他のブロック(見出し・箇条書き・ボタン)を追加できるので、どのようなレイアウトにするかはアイデア次第です。

見出しとボタンを追加
見出しとボタンを追加したお客様の声

言うまでもありませんが画像は左だけでなく右にも表示できます。

お客様の声の画像を左右にレイアウト
お客様の声の画像を左右にレイアウト

「サービス紹介」に

「サービス紹介」にも使えそうですね。「複製」メニューでブロックをコピーできるので、同じようなレイアウトの繰り返しで構成されるサービス紹介ページの作業も効率的で楽しくなります。

メディアと文章ブロックで「サービス紹介」を作成
メディアと文章ブロックで「サービス紹介」を作成

「ご利用の流れ」に

「ご利用の流れ」のようにステップで説明するコンテンツにも使えます。

メディアと文章ブロックで「ご利用の流れ」を作成
メディアと文章ブロックで「ご利用の流れ」を作成

ちなみにステップ間の矢印は画像ですが、再利用ブロックに設定しておけば同じ画像を呼び出すのも簡単です。

アフィリエイト商材の紹介に

画像、見出し、説明文の組み合わせで書籍などアフィリエイト商材の紹介にも使えそうですね。

アフィリエイト商材の紹介にも
アフィリエイト商材の紹介にも

メディアと文章ブロックのレスポンシブ

このブロックはスマホでも画像と文章が横並びになってしまいます。

スマホでも画像と文章が横並び
スマホでも画像と文章が横並び

レスポンシブ対応にするにはインスペクタの「メディアと文章の設定」で「モバイルで重ねる」を有効にします。

「モバイルで重ねる」を有効に
「モバイルで重ねる」を有効に

スマホでは横並びが解除されます。

スマホでは横並びが解除される
スマホでは横並びが解除される
メディアと文章ブロックの横並びは「float: left;/float: right;」によって制御されているわけではありません。「display: grid;」のグリッドレイアウトで制御されています。ブロックに対してCSSを指定する場合は注意してください。このあたりの仕組みは別の記事に書きたいと思います。

あとは、みなさんのアイデア次第です。使い方がわからないときはご相談ください。

Gutenbergの使い方