ワードプレス　画像と文章を並べてCTAを作成する方法（”メディアとテキスト”ブロックの使い方）

2022年2月9日

ブロックエディター（Gutenberg）の”メディアとテキスト”ブロックを使用すれば、CTAを簡単に作成することができます。

CTAとは、

”画像と文章を横に並べて、ついでにクリックしてもらうボタンをつける”、

てな感じで、ユーザーにアクションを促すコンテンツですね。

例えばamazon musicのCTAの事例です。

こんな風に画像と文章を並べてみましょう。

※この記事はワードプレス5.9リリースに伴い、2022年2月に最新情報へリライトしました。

前提条件

ワードプレスはバージョン5.9、テーマは何でもいいですが、シンプルな事例としてTwenty Nineteenを使用します。

それでは早速ブロックエディターを開けて、次の作業をしていきましょう。

”メディアとテキスト”ブロックを選択する

ブロックエディターが開いたら、次の手順で”メディアとテキスト”ブロックを選択します。

①画面左上の+マークをクリック
②ブロック一覧を下へスクロールして、メディアの一覧を出す。
③”メディアと文章”をクリックする

ちなみに、”メディアとテキスト”にマウスオーバーした段階で、次のようにプレビューが表示されます。

このプレビューを見ても、画像と文章が横並びになっているのがわかりますね。

”メディアと文章”ブロックに入力していく

”メディアと文章ブロック”を選択して設置した直後は次のようになっています。

本文入力欄には、”メディアとテキスト”ブロックが表示されます。左側の”メディアエリア”が画像を挿入するエリア、その右の”コンテンツ”が文章（見出しや段落ブロック）やボタンブロックなどを入力するエリアです。

画面右には、”メディアと文章”ブロックの情報をコントロールする、設定パネルが表示されています。

もしこの設定パネルが表示されていない場合は、画面右上の歯車マーク（設定）をクリックすると、表示・非表示を切り替えできますので覚えておきましょう。

画像を挿入する

メディアエリアに画像を挿入します。通常の画像ブロックと同じように、”メディアライブラリ”をクリックして画像を挿入します。

画像挿入すると、右の設定パネルの設定項目が増えます。画像関連の設定項目なので、以下説明していきます。

モバイルでは縦に並べる

”モバイルでは縦に並べる”はデフォルトではONなっています。この状態だと、スマートフォンのように縦長のディスプレイで表示させたときに、メディア（画像）とコンテンツ（文章など）が自動的に縦並びとなります。

”モバイルでは縦に並べる”をOFFにすると、スマートフォンでも画像と文章が横並びのままとなります。この場合画像が小さくなったりテキストが不自然に改行されたりするので、デザイン的にあえて狙うのでなければ、ONのままがよいでしょう。

カラム全体を塗りつぶすように画像を切り抜く

”カラム全体を塗りつぶすように画像を切り抜く”をONとすると、画像全体が表示されずに、このメディアエリアの面積に応じて画像が切り取られ、一部のみが表示されるようになります。

詳しくは、画像よりコンテンツの高さが大きい場合を参照ください。

Altテキスト

画像につける代替テキストを設定します。Googleに画像の意味を正しく伝えることによりSEO上意味のある設定です。

メディアライブラリですでに設定しているAltテキストを使う場合は、ここで設定する必要はありません。

画像サイズとメディアの幅

デフォルトではメディアの幅は50％に設定されています。メディアとテキストブロック全体幅の50％が画像幅だという意味です。

これを考慮して適正な画像サイズを選択するとよいでしょう。例えば、テーマで設定されるコンテンツ幅（ブログ記事であれば本文が表示される最大幅）が1000pxであれば、画像の横幅は500pxということです。したがって、フルサイズでなく大サイズで十分となります。

ツールバーでの設定

画像上に表示されているツールバーでは次の設定が可能です。

• 配置の変更・・・通常幅のほか、テーマによって幅広または全幅が設定可能です。
• 垂直配置を変更・・・上揃え（デフォルト）、中央揃え、下揃えが設定できます。
• メディアを左（右）に表示・・・画像の表示を左（デフォルト）か右かを設定できます。

文章を入力する

コンテンツエリアに文章を入力していきます。

画像の右側のコンテンツの部分をクリックすると、自動的に段落ブロックが表示されて入力できる状態となります。

画面右側の設定パネルに”段落”と表示があるように、通常の段落ブロックと全く同じように文字入力や文字装飾をすることができます。また、見出しブロックなど、他のブロックに変更することも可能です。

今回は下記のように２つの段落を使って文字入力をしました。１つ目段落の入力後リターンを押すと、次の段落に入力できます。テキスト配置は中央寄せとしています。

ボタンを設置する

段落の下にボタンを設置して”詳細はこちら”と表示させます。次の手順で設置します。

①2つ目の段落内にカーソルがある状態で、画面左上の+マークをクリック
②ブロック一覧を下へスクロールして”デザイン”グループを表示させる
③”ボタン”をクリック

するとボタンが設置されます。画面右のブロックパネルでは、”ボタン”と表示されています。

ボタン内にカーソルがありますので、このままテキストを入力します。

ボタンのスタイルは右の設定パネルで次のように実施しました。好みに応じて変更できます。
・スタイルは塗りつぶし
・色設定は黒
・角丸半径をゼロとしてボタンを長方形にする

また、ボタンをクリックしたときのリンク先も、ボタンの上のツールバー内で設定することができます。

ボタン完成後の見映えです。

ここで一度リスト表示してみて、作成したメディアとテキストブロックの構造を確認してみましょう。

画面左上のリスト表示ボタンをクリックするとリスト表示されます。

リスト表示でわかるように、メディアとテキストブロックは、

メディアとテキスト（ここに画像が入っている）
ーー段落（”東京ナイトビューツアー”）
ーー段落（”2022年2月24日19時～21時半開催”）
ーーボタン（ボタンの外側）ーーボタン

といった構成になっているのがわかります。ボタンブロックが2重構造になっているのはボタンブロックの仕様です。

リスト表示で任意のブロックを選択や削除、移動をすることもできます。

複雑な構造のブロックで使うと便利ですね。

Web表示して確認（見映えとCSSの確認）

今回作成したCTAをWeb表示させて確認します。まずパソコン表示です。

Google Chromeの開発者ツールでHTMLとCSSを確認するとgrid構造となっているのがわかります。

gridは左側の列が50％、残りが右側の１列という設定です。

スマホ表示です。

スマホ表示（デバイス幅600px以下）では、gridの幅が100％の１カラムの設定となり、画像とコンテンツが縦に並ぶことになります。

grid構造であることを理解して、カスタムCSSを使えばいろいろなデザインにカスタマイズできそうですね。

画像よりコンテンツの高さが大きい場合

コンテンツの高さが画像高さより大きくなると次のような見映えとなります。

当然ですが、画像の高さよりもコンテンツが下にはみ出した形になっています。

これを避けるには、コンテンツ高さに合わせて画像の高さがもっと大きい画像に変更する、というのも１つの方法ですが、ここでは、”カラム全体を塗りつぶすように画像を切り抜く”設定を使ってみましょう。

下記のように”カラム全体を・・・”をONにすると、焦点ピッカーが開くので切り抜き位置を指定します。

すると次のように、コンテンツ高さに合わせて画像が切り取られて表示されます。
（画面幅を２通り表示。画面幅に合わせて画像の縦横比が変わって切り取られる）

画面幅によって切り取り領域が変化するので、焦点ピッカーでどこを指定するのかをよく考えておく必要があります。

HTMLとCSSを確認すると、画像は背景画像として表示されているのがわかります。サイズはカバーです。

まとめ

”メディアとテキスト”ブロックを使用したCTAの作成方法を紹介してきました。

パソコン表示では画像とテキストを横並び、スマホでは縦並びとなるコンテンツを簡単に作成できるのがわかりますね。

表示する画像は、画像としてだけでなく、背景画像での表示も選択できます。