ブロックエディターでランディングページ（LP）を作成＆再利用で新スタイルに変更

今回は、以前紹介したブロックエディターの機能を使って、ランディングページ（LP）を作成します。LPは、イベント予約、商品紹介、キャンペーン、求人募集などのでよく使用される、スクロールで見せる広告です。

では、早速ですが、完成したDEMOページをご覧ください。今回は、架空のJazz Consertの告知用ページを作成しました。（最近マンガの「BLUE GIANT」を読んでいたので、この題材にしました。）

今回のデザインは、シンプルにブロックエディターの機能と画像のみを使用して作成しています。CLASSの付与もしていません。また、レスポンシブデザインになっているので、SPとPCでレイアウトが変更になります。

では、DEMOページの編集画面を元に、前回紹介していなかったブロックエディターの機能「カバーブロック」を中心に説明します。

カバーブロック

その名の通り、全面を写真、背景色で覆い尽くす機能です。Webサイトの背景色は、基本的にはページごとに変更することはないですが、LPの場合、デザインに合わせて変更していきます。写真を設定すると、指定した全面に写真が表示されます。

もう一つ大きな特徴が、カバーの上に、見出し、テキスト、カラムなどのブロックエディターの機能を配置することができることです。これらを組み合わせてLPを作成します。

まず、設置方法から説明します。左上の「＋」マークをクリックし、メディア＞カバーを選択します。バックに写真を入れる場合、「メディアライブラリ」から写真を選択します。背景のみの場合は下のパレットから任意の色をクリックすると、背景に指定されます。これで設置は完了ですが、細かい設定は項目ごとに紹介していきます。

Title

タイトルは、背景に写真を配置して、見出しを入れています。デフォルトでは黒のオーバーレイが50%かかっていますが、そのまま利用します。写真の上に「タイトルを入力…」と出てきますが、見出しで入力したいので削除します。ブロックを追加で、見出しを選択し、H1を選択しタイトルを入力、その下にH4で日時を入力しました。

Concert Overview

見出し、本文を中心揃えにする以外は、基本的にはタイトルと同じ作りです。大きく違うのは背景写真がモノトーンにします。

カバーをクリックし、右サイドバーのブロック＞スタイルをクリックします。

フィルターのデュオトーンをクリックし、影に黒を指定します。デフォルトで、ハイライトに白が指定されるので、モノトーン写真の完成です。

Guest Artist

背景にアーティスト写真を配置し、「メディアとテキスト」で人物と反対側に文字を配置。スマホでは、縦並びで顔の下に文字が来るようにしています。

このように、デバイスが変更しても顔が映るように調整します。

カバーを選択し、ブロック＞設定をクリックします。「焦点ピッカー」に写真が表示され、その上に半透明の円があります。この円の位置が拡大縮小した時の、写真の配置の中心になります。人物紹介では、顔をできるだけ見せるように顔付近に円を移動します。SP、PCで確認しながら調整します。

Support Artist

カバーを黒背景にして、見出しの下に3カラムを縦に2つ並べ、6人の紹介をしています。写真の大きさを合わせたいので、カラム内の写真にもカバーを使用しています。

カラムにカバーを挿入し、写真を設定し、Concert Overviewと同じようにブロック＞スタイル＞デュオトーンで、モノトーンにします。また、「オーバーレイの不透明度」を0にし、サイズで、最小サイズを230pxにします。他のカラムも同じ設定にすれば、デバイスが変わっても写真の大きさが揃い、文字の位置も揃います。

Time Schedule

タイムラインはテーブルでも作成できます。しかし、見出しや写真を入れたりしたいので、カバーの背景色を交互に変え、カラムを入れました。写真は、サポートメンバーの時と同じようにカバーブロックを使用し、「カバー画像の最小の高さ」を250px、「オーバーレイの不透明度」を0にしています。

Music Charge

カバーの背景を黒にして、中に3カラムを入れ、真ん中のカラムをスペースにするため、幅50pxを指定して、空欄にしています。右の表もテーブルで作成できますが、２カラムと「区切り」を使用して表をデザインしました。

Contact Us

カバーの背景をダークグレーにして、文字を中央に寄せました。今回はダミーですが、電話、メール、コンタクトフォームへのリンクを入れます。

今回は、ブロックエディタの機能のみを使用してランディングページを作成しました。このような広告を自由に作成できるのがWord Pressの強みです。

また、今回作成した、コンセプト、スケジュールなどのカバーブロックをブロックエディタに登録できます。登録したものをブロックパターンと言います。ブロックエディターでは、必要なブロックパターンを作成し、次回作成するときに取り出して再利用することができます。

ブロックパターンの作成

まず、タイトルのカバーを選択します。ダイアログの右端のオプションをクリックし、「Create Pattern」をクリックします。名前に任意のパターン名を入力します。カテゴリーから分類（今回はカラム）を指定します。パターン全てを同期する場合「同期」にチェックを入れますが、今回は外しておきます。残りの全てをブロックパターンに登録していきます。

再利用

新しくページを作成し、タイトルなどを入力します。左上の＋マークをクリックし、パターン＞カラムから先ほど登録したパターンをクリックすると、本文にパターンが作成されます。これを繰り返すと、同じものが作成できます。

スタイル変更

先ほどと同じ要領で色を黒からローズピンクに変更し、写真の入れ替えも行います。色と写真が変わるだけでイメージが変わりますね。

また、アルファベットフォントを変更しました。これは、スタイルの設定とCLASSの変更が必要です。ブロックエディターでは、「高度な設定」からクラス名を指定します。

ただ、先ほどと同じように、ブロックパターンとして登録することができるので、初期設定で登録しておけば、コード変更なしでフォントを変更できます。

カラーは黒からローズピンク（#B0004E）に変更

ロゴ変更のため「高度な設定」でCLASS指定

タイトルをH1テキストとしてブロックパターンに登録

今回のデザインや、制作方法は、あくまで一例です。ブロックエディタを組み合わせれば、レスポンシブ対応の様々なデザインが可能です。今後もブロックエディタを利用してのレイアウトを紹介していきたいです。Webサイト制作のご依頼は、コントクとフォームよりよろしくお願いします。