【応用編】今スグ作れるホームページ！～CSSコードの追加～

▶初回から受講する

▶この講座の画像を見る

制作編①～⑨で作ってきたトップページですが、
「もっとこうできたらいいのに」と少しもどかしさを
感じられた方もいるのではないでしょうか？

現時点ではLightningのデフォルト機能ではどうにもならない部分を、
CSSコードを記述してカスタマイズしていきます。

CSSとは一言でいうと、
「ホームページの見た目を整えるための言語」です。

今回はコードの紹介ということで深く解説はせず、
コピペだけで済むようにしています。

1．カスタマイズ箇所の確認

カスタマイズ箇所と、カスタマイズする理由はこちらです。

1⃣ 枠線ボックスの角を角丸に
理由：他の写真などと合わせて統一感を出したい
2⃣ ボタンにカーソルをのせた時（ホバー時）に出現する水色の枠を削除
理由：ホバー時は背景色が変わるようになっているので不要
3⃣ Google Mapの角を角丸に
理由：①と同様
4⃣ コピーライト下部の「Powered by ～」の文字を削除
理由：ユーザーにとって不要な情報（削除しても規約的に問題なし）
5⃣ トップへ戻るボタンを丸めてキーカラーに
理由：黒が強く存在感がありすぎるので今回のデザインと合わない
6⃣ ファーストビューの文字サイズを大きく（スマホ表示のときだけ）
理由：デフォルトのままでは小さくて見にくい
7⃣ フッターメニューを中央寄せに（PC表示のときだけ）
理由：ここだけ左寄せだと違和感がある

2．CSSコードの記述

それでは早速CSSを書いていきます。

ファーストビューを編集した「外観」▶「カスタマイズ」を
開いてください。

🔶手順🔶

①「追加 CSS」
②「閉じる」

2-1．枠線ボックスの角丸

▼以下のコードを追記（そのままコピペしてください）

/* 枠線ボックスの角丸 */
.vk_borderBox .vk_borderBox_title_container {
border-radius: 8px 8px 0 0;
}
.vk_borderBox .vk_borderBox_body {
border-radius: 0 0 8px 8px;
}

これで枠線ボックスが角丸になりました。
ここでは、

・コース名部分（緑背景）の上2か所を角丸に
・説明部分（白背景）の下2か所を角丸に

といったコードを書いています。

2-2．ボタンの水色枠の削除

▼以下のコードを追記（そのままコピペしてください）

/* ボタン水色枠の削除 */
.vk_button-color-custom a:hover {
box-shadow: none;
}

カーソルをボタンにのせると水色の枠が消えていると思います。
ここでは、ボタンに適用されている影（水色枠）をなしにするコードを書いています。

2-3．Google Mapの角丸

▼以下のコードを追記（そのままコピペしてください）

/* Google Mapの角丸 */
iframe {
border-radius: 8px;
width: 100%;
}

マップが角丸になりました。
ここでは、マップの角をすべて角丸にするためのコードを書いています。

※「外部サイトの読み込みはGoogle Mapだけしかしない」という
前提でのコードです。

💡Point
解説画像では「width: 100%;」を書き忘れていますが、
地図の見切れが生じるので必ず記述するようにしてください。

2-4．コピーライト下部テキストを削除

▼以下のコードを追記（そのままコピペしてください）

/* コピーライト下部テキストを削除 */
.site-footer-copyright p:last-child {
display: none;
}

コピーライト下部の文字が消えました。
ここでは、該当箇所を非表示にするためのコードを書いています。

2-5．トップへ戻るボタンを変更

▼以下のコードを追記（そのままコピペしてください）

/* トップへ戻るボタンを変更 */
.page_top_btn {
background-color: var(--wp--preset--color--vk-color-primary);
border-radius: 50%;
box-shadow: none;
height: 48px;
opacity: .8 !important;
width: 48px;
}

これでトップへ戻るボタンのデザインが変更できました。
ここでは、

・背景色をキーカラーに
・四角のボタンを丸に
・白枠をなしに
・高さと幅を48pxに
・透明度を80%に

といったコードを書いています。

2-6．ファーストビュー文字サイズ（スマホ表示のときだけ）

▼以下のコードを追記（そのままコピペしてください）

/* スマホ表示 */
@media (max-width:767px) {
/* ファーストビュー文字サイズ */
.ltg-slide-text-title {
font-size: clamp(16px,6vw,32px);
}
.ltg-slide-text-caption {
font-size: clamp(12px,3.5vw,18px);
}
.ltg-slide .btn {
font-size: clamp(12px,4vw,16px);
}
}

ファーストビュー内の文字サイズが変更できました。
ここでは、

・スライドタイトルは1文字を画面幅の6%に（最小16px、最大32px）
・スライドテキストは1文字を画面幅の3.5%に（最小12px、最大18px）
・ボタンは1文字を画面幅の4%に（最小12px、最大16px）

といったコードを書いています。

💡Point
現状の文字数であること前提にサイズを調整しているので、
文章を変更されている場合は表示が崩れる可能性があります。

おかしな位置で改行されるなどきれいに表示されない場合は、
数値を調整するか、このカスタマイズは行わないでください。

2-7．フッターメニュー中央寄せ（PC表示のときだけ）

▼以下のコードを追記（そのままコピペしてください）

/* PC表示 */
@media (min-width:768px) {
/* フッターメニュー中央寄せ */
.site-footer ul {
width: fit-content;
margin: 0 auto;
}
}

フッターメニューが中央寄せになりました。
今後ページが増えても中央寄せのままメニューが追加されます。

💡Point
CSSは上から順に読み込まれるため、下の記述ほど優先されます。
今回の記述内容ではどこから書いてもそれほど影響はありませんが、
覚えておきましょう！

まとめ

お疲れさまでした！

このようにCSSでカスタマイズすると、
デザインに統一感を持たせることができ、表現の幅が広がります。

CSS（時にはHTML）を書いていけば、
実現できないデザインは基本的にありません。

今回はこのホームページで最低限書いておきたいCSSのみ紹介しました！

ホームページに、よりオリジナリティを出したいという方は、
ぜひいろいろなCSSコードを調べてみてください！

次回はいよいよホームページをサーバーに移し、
誰でもアクセスできるように公開します！

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