最短ホームページテンプレートのカスタマイズはどこまで出来る?

コンテンツバーをボックス風に

上の画像のようにコンテンツバーをボックスにしたい場合がありますね

カスタマイズは割と簡単!コンテンツバーのソースを全部外して、以下のソースを貼り付けるだけ!

全角が入らないように間を詰めて入れて下さい


<ここがコンテンツバーです>

<div class=container>

<div class=item><p>HOME</p></div>

<div class=item><p>サービス</p></div>

<div class=item><p>料 金</p></div>

<div class=item><p>Q&A</p></div>

<div class=item><p>お問合せ</p></div>

</div>

CSSに以下を加えるだけ!

.container{width:780px;height:auto;background-color:#fff;display:flex;justify-content:space-between;}

.item{width:130px;height:30px;background-color:blue;border:1px solid #000;}

.item p{font-size:14px;color:#fff;text-align:center;}

***

ボックスの色を変えたい場合はCSSの2段目blue→好きな色にしてみて下さい

尚、ホームページの幅を広げた場合はボックスの幅もCSSで調整する必要があります

幅広にしてボックスを赤系にしてみました(ボックス幅と位置は自由に設定出来ます)

***