【制作編③】今スグ作れるホームページ！～「こんなお悩みありませんか？」の作成～

▶初回から受講する

▶この講座の画像を見る

前回の講座ではファーストビューを作りました。
今回はこちらの「こんなお悩みありませんか？」の部分を作っていきます！
管理画面の「固定ページ」を開くと、
制作編①で準備した4つのページがあります。
ここからしばらくは「ホーム」を編集していきます。

1．構成の確認

ここで、あらためてセクションの構成を確認してみましょう。
大きくは以下の2つで構成されていることがわかります。

・見出し
・お悩みブロック（お悩み①、お悩み②、お悩み③）

ページのコンテンツを作るとき、
「ブロック」というものを使います。

ブロックは、テキスト・画像・ボタンなどのサイトに必要な要素を、
簡単に配置できる機能です。

このセクションでは、

・グループ
・見出し
・カラム
・カバー
・段落

というブロックを使用します。

先ほどのセクションの構成をブロックで区分けすると、こうなります。
外側の「グループ」は、なくても今回のレイアウトを実現できますが、
ひとまとまりにしておくと何かと便利なので、
全体をグループで囲うようにします。

2．「こんなお悩みありませんか？」の作成

2-1．見出しの作成

先ほどのブロックの区分けの通り、
必要なブロックを配置していきます。

🔶手順🔶

①「＋ボタン」▶「グループ」と入力 ▶「グループ」を選択
②分割のない通常のグループを選択
③「＋ボタン」▶「見出し」と入力 ▶「見出し」を選択
④「テキスト中央寄せ」▶ スタイル「装飾なし」▶ 色を「キーカラー」に
⑤見出しを入力 ▶ ブロックの余白を「下M」に
これで見出しは完成です！

2-2．お悩みブロックの作成

🔶手順🔶

⑥見出しの最後にカーソルを持っていき「Enter」
⑦「＋ボタン」▶「カラム」と入力 ▶「カラム」を選択
⑧3等分にしたいので「33 / 33 / 33」を選択
※ブロックの区分けで示した内側のカラムは自動で追加されます。
⑨「＋ボタン」▶「カバー」と入力 ▶「カバー」を選択
💡Point
ブロックを追加しただけでは、これといった変化はありませんが、
きちんと画面下に追加した順で表示されているのがわかります。
ここをクリックすることで追加したブロックを選択することもできます。
⑩「アップロード」で画像を追加
⑪テキストを入力（改行は「Shift + Enter」または「⇧ + Enter」）
　▶ フォントサイズを「リセット」
⑫画像部分をクリックし、以下のように設定

オーバーレイ：Black
オーバーレイの不透明度：40
カバー画像の最小の高さ：240px
角丸：8px
⑬テキストをクリック ▶ 色を「White」に
💡Point
ここで一度、1カラム目で設定してきた作業を、
2、3カラムにもコピペしておきます。
こうすることで設定にかかる時間を短縮できます！

⑭画像部分をクリック ▶「ctrl + C」または「⌘command + C」

⑮この辺りをクリック ▶「ctrl + V」または「⌘command + V」
※同じ流れで3カラム目にもコピペしてください。

⑯下段のテキストを選択 ▶「B（太字）」
⑰「インライン文字サイズ」をXLに
⑱2、3カラム目のテキストを変更
※同様に太字にし、インライン文字サイズを調整してください。
⑲画像部分をクリック ▶「置換」で２、3カラム目の画像を変更
⑳外側の「カラム」
㉑ブロックの間隔（左右）を「M」に ▶「更新」
これでお悩みブロックは完成です！

2-3．グループの余白設定

最後に、セクションごとの間隔を取るために、
グループのパディング（余白）を調整します。

🔶手順🔶

㉒画面下の「グループ」
㉓パディング（上下）を「L」に ▶「更新」
これで「こんなお悩みありませんか？」のセクションは完成です！
「外観」▶「カスタマイズ」でPC、スマホ表示を確認してみてください！

まとめ

お疲れさまでした！

今回のブロック追加などの操作はWordPressで基本となるものなので、
マスターできるようにがんばってください✨

次回は「当院が選ばれる3つの理由」のセクションを作っていきます！

◀前の記事へ　　　　　次の記事へ▶