Blogger Labo：【Tokyo】メニューバーのカスタマイズ

このページでは「Tokyo」のメニューバーのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

※初心者の方は「カスタマイズ基礎知識」などの「初心者向け記事」を参考にしてみてください


navigation（メニューバーの設定）について


CSSの内容


/****************************************
          navigation [メニューバー]
*****************************************/

 メニューバー全体 

#navigation{
background-color: $(backgroundcolor); [メニューバーの背景色]
border-bottom: 1px solid $(linecolor); [メニューバーの下線]
color: $(lightcolor); [項目の文字色]
text-align: center; [項目の中央揃え]
}

 メニューバーの項目全般 

.menu li{
list-style-type: none;
display: inline-block;
padding: 0;
line-height: 2.0; [項目の高さ]
}

 メニューバーの項目リンク 

.menu li a{
display: block;
margin: 0.5em 0; [項目リンクの外側の余白]
padding: 0 2em 0 1.5em; [項目リンクの内側の余白]
transition: color .3s ease; [項目リンクの文字色を徐々に変化（0.3s）]
border-right: 1px solid $(linecolor); [項目の右側の線]
}

 メニューバーの項目リンク（ホバー時） 

.menu li a:hover{
color: $(mousecolor); [項目リンクのホバー時の文字色]
}

上記が Tokyoのメニューバーを設定するCSSに説明を加えたもの（必要な部分のみ）。

基本的には説明の部分の値を変えていけば自分好みに変更することができる。

メニューバーの文字サイズを変える


#navigation{
background-color: $(backgroundcolor);
border-bottom: 1px solid $(linecolor);
color: $(lightcolor);
text-align: center;
font-size: 値;
}

上記のようにメニューバーの項目リンクの設定に「font-size: 値;」を追記する

メニューバーを左寄せにする


#navigation{
background-color: $(backgroundcolor);
border-bottom: 1px solid $(linecolor);
color: $(lightcolor);
text-align: left;
}

上記のようにメニューバー全体の設定に「text-align: left;」に変更する

項目に背景色をつける


.menu li a{
display: block;
margin: 0.5em 0;
padding: 0 2em 0 1.5em;
transition: color .3s ease;
border-right: 1px solid $(linecolor);
background-color: 値;
}

上記のようにメニューバーの項目リンクの設定に「background-color: 値;」を追記する

ホバー時に項目に背景色をつける


.menu li a:hover{
color: $(mousecolor);
background-color: 値;
}

上記のようにメニューバーの項目リンク（ホバー時）の設定に「background-color: 値;」を追記する

ホバー時に項目に背景色をつけて徐々に変化させる


.menu li a{
display: block;
margin: 0.5em 0;
padding: 0 2em 0 1.5em;
transition: color .3s ease;
border-right: 1px solid $(linecolor);
transition: background-color 値;
}

まず、上記の「ホバー時に項目に背景色をつける」を実行する

その上メニューバーの項目リンクの設定に「transition: background-color 値;」を追記する

※例「transition: background-color .3s ease;」