みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、WordPressで画像の横にテキストを配置する方法をお伝えいたします。
![メディアとテキストブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_media-text.png)
画像の真横に文章を載せたい時は「メディアとテキスト」ブロックです。
![画像を小さくして左か右に寄せると、テキスト回り込みになる](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-align-left.png)
「WordPressの画像挿入・編集方法」のページで説明したように、画像を左か右寄せにして文章を記載すれば、スマートフォン以外では画像にテキストを回り込みできました。
しかし「画像の真横にテキストを入れたい」「画像の横に別の要素を入れたい」といった場合もあるでしょう。
![画像の横に別の要素を入れたレイアウト例](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-layout-image.png)
それを実現するのがこの「メディアとテキスト」ブロックです。
「メディアとテキスト」ブロックの挿入
![プラスボタンから「メディアとテキスト」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-add-2.png)
![左上のプラスボタンからメニューを開いて「メディアとテキスト」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-add-1.png)
ブロックを挿入したら、メディアエリアにアップロードするか、メディアライブラリから選択ください。画像だけでなく、動画も可能です。
※YouTubeなどの外部埋め込みは除きます。YouTubeの横に配置する場合は、カラムブロックをご利用ください。
「コンテンツ…」とあるエリアには、テキストを入力できます。
![メディアとテキストブロック挿入後の画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-block-new.png)
「メディアとテキスト」ブロックへの変換
画像ブロックからの変換もできます。
![画像:ブロックタイプまたはスタイルを変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-block-tool-change.png)
![ブロックの変換から「メディアとテキスト」を選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-block-tool-change-select.png)
![画像ブロックを「メディアとテキスト」ブロックに変換完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-img-change-after.png)
![「画像」ブロックを「メディアとテキスト」ブロックに変換(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/XlD2b6tjiz-min.gif)
メディアとテキストの配置
![ブロックツールでのメディアとテキストの配置変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-layout.png)
ブロックツールバーで、メディアを左か右に配置を選択できます。
デフォルトは左側です。
![メディアとテキストの配置変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/z4v9577qCz-min.gif)
垂直配置
「メディアを左に配置」の横にあるアイコンは、メディアとテキストの垂直配置を調節できます。
![垂直配置を変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-vertical-align.png)
- 上揃え
メディアとコンテンツブロック両方の上を揃える - 中央揃え
両方のブロックの中央に揃える - 下揃え
両方のブロックの下に揃える
![垂直配置を変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/e2pNS1rdan-min.gif)
リンクの挿入
![メディアとテキスト ブロックツールのリンク挿入](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-link-insert.png)
ブロックツールバーの「🔗」アイコンで、メディアのリンク先を設定できます。
画像のリンク挿入方法とほぼ同じです。
![メディアとテキストブロックの画像リンク設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/AfFHan2n5S-min.gif)
詳しくはこちらの画像リンク挿入方法をご参照ください。
メディアの置換
![メディアとテキストブロックツールの置換](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-block-tool-replacement-1024x326.png)
「置換」でメディアを差し替えられます。
WordPressへアップ済みのメディアに差し替えるなら「メディアライブラリを開く」を、新しいメディアをアップロードするなら「アップロード」を選択します。
![メディアライブラリから画像を選択する](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-replacement-library.jpeg)
メディアの幅
メディアの幅を変えたい時は、メディアとテキスト側の間(青い丸があるところ)をドラッグで調節しましょう。
![メディアとテキストの幅を調整](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-width-change.png)
![メディアとテキストブロックの画像幅を調整(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/S5iSCikb9n-min.gif)
![メディアの幅](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-right-side-menu-width.png)
右メニューバーの「メディアの幅」でも可能です。
![右メニューバー「メディアの幅」での調整(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/5oEid7Ychs-min.gif)
テキスト側の編集
![メディアとテキストブロック挿入後の画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-block-new.png)
テキスト側には、デフォルトで大きなフォントサイズの段落ブロックが入っていますが、もちろん消せます。新しく「テーブル」や「ボタン」など、他のブロックも追加できます。
![メディアとテキストの「テキスト」側に様々なブロックを追加](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-block-edit-987x1024.png)
![メディアとテキストの「テキスト」側を編集(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/yLFA9aG5Gj-min.gif)
では、右のメニューバーでいろいろ調整しましょう。
色設定
![右メニューバーの色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-color-select.png)
ブロックの背景と文字の色を変えられます。
![メディアとテキストの色設定変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/luhB0ZSMsl-min.gif)
モバイルでは縦に並べる
![モバイルでは縦に並べる](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-mobile-setting.png)
チェックをONにすると、スマートフォンのみメディアとテキストを縦に並びかえます。
![「モバイルでは縦に並べる」のチェックON(エディターでのモバイルプレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-mobile-check-preview.jpg)
![「モバイルでは縦に並べる」のチェックOFF(エディターでのモバイルプレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-mobile-check-off-preview.jpg)
![「モバイルでは縦に並べる」チェックありなしの比較(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Vxb1ajBBwC-min.gif)
横並びだと見えにくくなる場合が多いです。理由がない限り、基本的にONでいいでしょう。
カラム全体を塗りつぶすように画像を切り抜く
![カラム全体を塗りつぶすように画像を切り抜く](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-column-fill.png)
画像とテキスト側の高さが合うように調節します。
![テキスト側がメディア側より長くなったメディアとテキストブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-content-long-842x1024.png)
主に、テキスト側がメディア側よりも長くなったときに使います。
チェックを入れると、メディア(画像)側がテキスト側の高さにあわせて大きくなります。
![「カラム全体を塗りつぶすように画像を切り抜く」にチェックON](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-column-fill-on.png)
画像によっては、見せたい部分が隠れてしまうことがあります。
その時は「焦点ピッカー」 で、切り抜く場所の焦点を調節しましょう。
青い丸の部分が焦点の中心です。その下の「左」「上」のテキストボックスでも調節できます。
![焦点ピッカーの調整(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/WPQ5Wib9lb-min.gif)
その他の設定
![Alt テキスト (代替テキスト)と画像サイズの設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-alt-size.png)
あとは、代替テキストの記述と画像サイズのチェックをしておきましょう。
![画像サイズのプルダウンメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-img-size.png)
以上、画像や動画の横にテキストなどを並べられる、「メディアとテキスト」ブロックを解説しました。
画像を複数並べたり、画像の上にテキストを被せたり、画像以外の複数ブロックを並べたりする方法は、こちらの記事をご覧ください。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。