- 投稿日：2024/07/18
- 更新日：2025/11/06
前回の講座では「当院が選ばれる3つの理由」を作りました。
今回はこちらの「施術メニュー」の部分を作っていきます！
1．構成の確認
このセクションでは、
・グループ
・見出し
・カラム
・枠線ボックス
・段落
・アイコン
上記のブロックを使用します。
1つ1つのメニューはこのような構成で区分けされます。
2．「施術メニュー」の作成
2-1．見出しとグループの余白設定
今までと同じく前回作成したグループを選択し、
「Enter」を押して次のブロックを作っていきます。
グループの余白設定と見出しの作り方は、
こちらを参考に進めてください。
2-2．施術メニューブロックの作成
🔶手順🔶
①見出しの最後にカーソルを持っていき「Enter」
②「カラム」を追加 ▶ 余白を「下M」▶ ブロックの間隔（左右）をMに
▶2等分にしたいので「50 / 50」を選択
③「枠線ボックス」を検索し追加
④スタイルを「直線 ピン角 バナー」に
⑤線の色を「キーカラー」に
⑥テキストを入力し「Enter」
ここから以下の部分を作っていきます。
細かくブロックを組み合わせるので少し複雑になりますが、
1つ1つ確実に進めてください！
⑦「カラム」を追加（「50 / 50」を選択してください）
⑧幅を以下のように設定
数値：20
単位：%（パーセント）
⑨枠線ボックス直下の「カラム」を選択
▶「モバイルでは縦に並べる」を無効に
💡Point
左カラムは施術時間を表示するためのカラムなので、
それほど広さは必要ないため、全体の20%の幅になるようにしました。
また、デフォルトではスマホ表示のときに
カラムが縦並びになるようになっていますが、
今回は横並びのままにしたいのでこのように設定しました。
ここから施術時間の部分を作っていきます。
⑩左カラムを選択 ▶ さらに「カラム（50 / 50）」を追加
⑪幅を以下のように設定
数値：1
単位：REM（レム）
⑫1つ外側の「カラム」を選択（枠線ボックスから右に3つ目）
⑬「モバイルでは縦に並べる」を無効に
⑭ブロックの間隔（左右）を「XS」に ▶ 垂直配置を「中央揃え」
⑮左カラムに「アイコン」を追加
⑯以下のように設定
アイコン：<i class="fa-solid fa-clock"></i>
サイズ：1rem
余白：0px
スタイル：アイコンのみ
色：キーカラー
💡Point
アイコンに指定した「<i class="fa-solid fa-clock"></i>」は、
Font Awesomeという素材サイトのアイコンを表示するためのコードです。
「アイコンを選択」の中に使いたいアイコンがない場合には、
このようにコードを直接入力することで、
"Free"カテゴリ内のアイコンならどれでも使うことができます。
⑰右カラムに「段落」を追加
⑱施術時間を入力 ▶ 太字・キーカラーに設定
これで施術時間の部分ができました。
時短のため、施術料金の部分にコピペします。
⑲施術時間全体の「カラム」を選択（枠線ボックスから右に2つ目）
▶「ctrl + C」または「⌘command + C」
⑳右カラムを選択⇒「ctrl + V」または「⌘command + V」
㉑幅を空欄に
㉒時計アイコンを選択し以下のように設定
アイコン：<i class="fa-solid fa-yen-sign"></i>
㉓料金を入力
これで施術メニューの型ができたのでコピペします。
㉔初回お試しコース全体の「カラム」を選択 ▶ 右カラムにコピペ
㉕外側の「カラム」をコピー ▶「Enter」で下段に移りペースト
▶ 余白を「下0」に
㉖内容をそれぞれ変更 ▶「更新」
これで施術メニューのセクションは完成です！
「外観」▶「カスタマイズ」でPC、スマホ表示を確認してみてください！
💡Point
デモサイトでは各メニューの四つ角を角丸にしていますが、
デフォルトの「枠線ボックス」では、
このデザインでの角丸はサポートされていません。
ですので応用編でCSSコードを書いて角丸にします！
まとめ
お疲れさまでした！
今回はカラムの中にカラムを入れて、
さらにその中にブロックを...といった複雑な組み合わせでしたが、
無事に完成できたでしょうか？
次回はCTAボタンを作ります。
今回の施術メニューセクションが作れたなら簡単にできると思うので、
がんばりましょう！✨
