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

2020年9月26日

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

CTAとは、

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

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

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

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

前提条件

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

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

”メディアと文章”ブロックを選択する

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

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

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

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

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

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

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

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

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

画像を挿入する

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

画像挿入すると、右のブロックパネルに関連情報が表示されるようになります。

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

”モバイルでは縦に並べる”をOFFにすると、スマートフォンでも画像と文章が横並びのままとなりますが、横に圧縮された不自然な表示となるので、ONのままでよいでしょう。

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

この場合は、表示されるディスプレイの大きさに応じて画像の切り取られ方が変わりますので設定は難しくなります。したがってOFFのままでよいでしょう。

あと、画像の上のツールバーでは、画像の左配置・右配置を選択することができます。デフォルトでは左配置となっています。

文章を入力する

コンテンツエリアに文章を入力しましょう。

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

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

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

ボタンを設置する

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

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

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

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

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

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

次にボタンの位置を中央寄せに変更します。ボタンの外側（右外あたり）をクリックすると、次のように変わります。ボタンの１つ外側のブロックが選択され、ツールバーでボタンの配置を変更できます。中央寄せとしましょう。

もし、ボタンの１つ外側のブロック、が何なのかわかりにくければ、画面左上のブロックナビゲーションを見てみましょう。

ブロックナビゲーションを見るとわかるように、メディアと文章ブロックは、

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

といった構成になっているのがわかります。ボタンブロックが2重構造になっているのもこれを見るとよくわかりますね。

このブロックナビゲーションで任意のブロックをクリックするとそのブロックを選択することもできます。

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

Web表示して確認

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

スマホ表示です。

正直いうと、マージン余白が微妙ですね。でもカスタムCSSで調整してやればよいでしょう。

まとめ

”メディアと文章”ブロックを使用したCTAの作成方法を解説してみました。

まだまだ改善の余地はありますが、Gutenbergではクラシックエディターでは実現できなかったコンテンツを作成することができることがわかりますよね。

ぜひ、Gutenbergを使いこなして、あなたのサイトづくりに生かしてみてはいかがでしょうか。