【制作編④】今スグ作れるホームページ！～「当院が選ばれる3つの理由」の作成～

▶初回から受講する

▶この講座の画像を見る

前回の講座では「こんなお悩みありませんか？」を作りました。
今回はこちらの「当院が選ばれる3つの理由」の部分を作っていきます！
※ここからはより効率的に制作を進めるため、
前回と少しだけ手順を入れかえている部分がありますのでご了承ください🙏

1．構成の確認

ここでもセクションの構成を確認してみます。
大きくは以下の構成になっていることがわかります。

・見出し
・選ばれる理由ブロック（理由①、理由②、理由③）

このセクションでは、

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

を使用します。
グループ・見出し・カラムは前回も出てきましたね！

ブロックで区分けすると、今回はこうなります（理由①まで）。

2．「当院が選ばれる3つの理由」の作成

2-1．見出しとグループの余白設定

前回作成したグループを選択し、
「Enter」を押して次のブロックを作っていきます。
グループの余白設定と見出しの作り方は、
前回と同じ手順なので割愛します。

こちらを参考に進めてください。

💡Point
お気づきの方もいらっしゃるかと思いますが、
これ以降のすべてのセクションで、この作業はくり返し出てきます。
この時点で余白設定されたグループと見出しのセットを、
全セクション分コピペしておくと時短できます！

2-2．選ばれる理由ブロックの作成

🔶手順🔶

①見出しの最後にカーソルを持っていき「Enter」
②「カラム」を追加 ▶「ブロックの間隔（左右）」をMに
　▶ 2等分にしたいので「50 / 50」を選択
③左カラムで「画像」を追加
④画像を追加 ▶「角丸」を8pxに
⑤右カラムで「見出し」を選択
⑥「H3」にレベルを変更 ▶ 見出しを入力
⑦「Enter」▶ 段落にテキストを入力
⑧外側の「カラム」▶ ブロックの余白を「下M」に
　▶ 垂直配置を「中央揃え」に
これで型はできたので、あと2つコピペします。

⑨画像またはテキストをクリック ▶ 外側の「カラム」
　▶「ctrl + C」または「⌘command + C」

⑩「Enter」▶「ctrl + V」または「⌘command + V」
⑪最後の3つ目はブロックの余白を「下0」に
⑫2つ目、3つ目の画像・見出し・テキストを変更
2つ目はPCで表示したときだけ画像とテキストの配置を入れかえたいので、
以下のようにしてください。

⑬外側の「カラム」▶ カラムの方向を「逆」に ▶「更新」
ワンクリックでPC表示のときだけ配置の入れかえができました！
（スマホ表示では3つとも上に画像、下にテキストの順で並んでいます。）

これで「当院が選ばれる3つの理由」のセクションは完成です！
「外観」▶「カスタマイズ」でPC、スマホ表示を確認してみてください！

まとめ

お疲れさまでした！
どんどんホームページが形になってきましたね✨

次回は「施術メニュー」のセクションを作っていきます。
おそらく本講座の中で、いちばん複雑にブロックを組むセクションになります...！

ですが、ここまでのセクションを作り上げられたのなら、
きっとできるので大丈夫です！

気合を入れていきましょう！💪

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