読者です 読者をやめる 読者になる 読者になる

ニワアソビ

北国で小さな庭作りを楽しんでいます。

テンプレート「Innocent」のナビゲーションバーを変更してみました。

ブログのテンプレートを「Innocent」に変更して、まず最初にカスタマイズした点はナビゲーションバーでした。

「Innocent」には元々ナビゲーションバーが内蔵されていて、そのままのデザインでも良いという方はすぐに使うことができます。

設置する方法は「Innocent」作成者である半月さんのサイトを参考にしました。

moonnote.hateblo.jp

私はバー自体の色を変更したかったので、下記の内容をデザインCSSに追加しました。

/*ナビゲーションバー*/
.main-navigation,
.main-navigation ul ul {
background-color: #ffffff;
}

 

 中央揃えにしたい場合はこちらをデザインCSSに追加。

/*ナビゲーションバー 中央揃え*/
@media screen and (min-width: 1024px) {
.main-navigation {
text-align: center;
}
}

 

文字色を変えたい場合はこちらを追加します。

/*ナビゲーションバー 文字色*/
main-navigation,
.main-navigation a {
color: #000000; /* 文字色 */
}
.main-navigation a:hover {
color: #000000; /* マウスオーバー時の文字色 */
}

 

色は色見本のサイトなどを利用して、好きな色を探してみて下さいね。

www.colordic.org

 

 

広告を非表示にする