【制作編⑨】今スグ作れるホームページ！～「店舗情報」の作成～

▶初回から受講する

▶この講座の画像を見る

前回の講座では「よくある質問」を作りました。
今回はこちらの「店舗情報」の部分を作っていきます！

1．構成の確認

このセクションでは、

・グループ
・見出し
・カラム
・段落
・カスタムHTML

上記のブロックを使用します。

セクションの構成をブロックで区分けすると、今回はこうなります。

2．「店舗情報」の作成

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

今までと同じく前回作成したグループを選択し、
「Enter」を押して次のブロックを作っていきます。

グループの余白設定と見出しの作り方は、
こちらを参考に進めてください。

2-2．店舗情報ブロックの作成

🔶手順🔶

①見出しの最後にカーソルを持っていき「Enter」
②「カラム」を追加 ▶ ブロックの間隔（左右）を「M」に
　▶「50 / 50」
③もう一度「カラム」を追加 ▶ ブロックの余白を「下XS」に
　▶「50 / 50」
④幅を以下のように設定

数値：4
単位：REM
⑤1つ外側の「カラム」を選択
⑥「モバイルでは縦に並べる」を無効に
⑦「段落」を追加 ▶ テキストを入力（太字・キーカラー）
⑧右カラムに「段落」を追加 ▶ テキストを入力
　▶外側の「カラム」を選択（段落から左に2つ目）
（ここでは住所生成ツールで作成した架空の住所を入力しています）

⑨あと3つコピペ
⑩テキストを編集 ▶ 電話番号のリンクに「tel:090-0123-4567」を設定
　▶ 営業時間の右カラムは空に
⑪4つ目のブロックの余白を「下0」に
⑫「カラム」を追加（50 / 50）
⑬幅を以下のように設定

数値：7
単位：REM
⑭1つ外側の「カラム」を選択
⑮「モバイルでは縦に並べる」を無効に
⑯左カラムに「段落」を追加 ▶ テキストを入力
⑰右カラムも同様にテキストを入力
これで左カラムの店舗情報は完成です！
次は右カラムにGoogle Mapを表示します。

🔶手順🔶

Google Mapにアクセスします。

⑱住所を検索
⑲「共有」▶「地図を埋め込む」
⑳「カスタムサイズ」
㉑サイズを「600×320」に ▶「HTMLをコピー」
㉒右カラムに「カスタムHTML」を追加
㉓コピーしたHTMLコードをペースト ▶「更新」
これでGoogle Mapが表示されるようになりました！
店舗情報のセクションは完成です！

最後にCTAを店舗情報の下にコピペしておきましょう！
これでトップページは完成です✨✨

「外観」▶「カスタマイズ」でPC、スマホ表示を確認してみてください！

まとめ

ついにすべてのセクションが完成しました！
ここまで本当にお疲れ様でした👏

「当院について」と「よくある質問」の固定ページは、
ここまでのカスタマイズができればすんなり作れますので、
ぜひご自身で作成してみてください✨
（院長の気まぐれ日記は管理画面の「投稿」から記事を作成できます）

トップページはこのままでも良いのですが、
トップに戻るボタンや角丸の処理などの細かい部分が
最初にお見せしたデモサイトと少しちがっているかと思います。

残念ながら、こちらはLightningのデフォルト機能では変更ができません...

ということで次回は応用編として、
上記の部分をカスタマイズして見た目を整えるCSSコードを紹介します💡

「このままで十分」という方はカスタマイズは不要ですので、
最後のリリース編にお進みください！

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