ナビゲーションのアメブロカスタマイズ 解説編（新CSS編集デザイン）
＞＞こちらもどうぞ
ナビゲーションのアメブロカスタマイズ解説編
このコラムはアメブロのトップにナビゲーションを付ける場合のカスタム方法の解説編です。以下のコラムで紹介したコードに対する解説なので、このコラムを初めて見た方はまずは、以下のコラムからご確認ください。
では早速行きましょう
前回、ブログのトップにナビゲーションバーを付ける方法を解説しました。
今回はその手順の中の「7番目」の、スタイルシートの解説をしたいと思います。
このスタイルシートには①～⑧までの番号がふってありましたね♪
今回はその番号にそって解説したいと思います。
スタイルシートの確認
前回の手順７で、CSS編集用画面の一番下に部分（「/* その他、拡張があれば記述 */」の下）に、コードを追記してもらいました。
それが以下のコードになります。
/* その他、拡張があれば記述 */ul#global_navi{width:980px;
overflow:hidden;
position:absolute;
top:100px;/*①ナビゲーショの位置座標の設定箇所（縦方向）。数値を大きくすると下の下がる。ヘッダー画像があるときはその高さによって調整すること*/
left:00px;/*②ナビゲーション位置座標の設定箇所（横方向）。数値を大きくすると右に移動*/
}
ul#global_navi li{float:left;
height:30px;
display:block;
border:solid 1px #cccccc;/*③ナビゲーションの枠線の色の設定箇所*/
text-align:center;
font-size:20px;/*④ナビゲーションの文字サイズ*/
font-weight:bold;
}
ul#global_navi li a{
display: block;
overflow: hidden;
height: 30px;
background-color:#ffffff;/*⑤ナビリンクの背景の変更,＃ffffffのカラーコードを変更して設定する*/
color:#cccccc;/*⑥ナビリンクの文字色の変更,＃ccccccのカラーコードを変更して設定する*/
}
#navi1 a { width:243px; background-position:0 0;}
#navi2 a { width:243px; background-position:-245px 0;}
#navi3 a { width:243px; background-position:-490px 0;}
#navi4 a { width:243px; background-position:-735px 0;}
#navi1 a:hover { width:243px; background-position:0 -30px;
background-color:#CFCFCF;/*⑦ナビリンクのマウスを置いたときの背景の変更,＃CFCFCFのカラーコードを変更して設定する*/
color:#ffffff;}/*⑧ナビリンクのマウスを置いたときのリンク文字の変更,＃ffffffのカラーコードを変更して設定する*/
#navi2 a:hover { width:243px; background-position:-245px -30px;
background-color:#CFCFCF;/*⑦ナビリンクのマウスを置いたときの背景の変更,＃CFCFCFのカラーコードを変更して設定する*/
color:#ffffff;}/*⑧ナビリンクのマウスを置いたときのリンク文字の変更,＃ffffffのカラーコードを変更して設定する*/
#navi3 a:hover { width:243px; background-position:-490px -30px;
background-color:#CFCFCF;/*⑦ナビリンクのマウスを置いたときの背景の変更,＃CFCFCFのカラーコードを変更して設定する*/
color:#ffffff;}/*⑧ナビリンクのマウスを置いたときのリンク文字の変更,＃ffffffのカラーコードを変更して設定する*/
#navi4 a:hover { width:243px; background-position:-735px -30px;
background-color:#CFCFCF;/*⑦ナビリンクのマウスを置いたときの背景の変更,＃CFCFCFのカラーコードを変更して設定する*/
color:#ffffff;}/*⑧ナビリンクのマウスを置いたときのリンク文字の変更,＃ffffffのカラーコードを変更して設定する*/
/* navistyle end*/
①、②ナビゲーションの位置座標の設定箇所
この部分のＣＳＳをピックアップします。
left:00px;/*②ナビゲーション位置座標の設定箇所（横方向）。数値を大きくすると右に移動*/
この設定でナビゲーションの位置を修正することができます。ヘッダーの高さやブログデザインにあわせて①で上下方向。②で横方向を修正してください。
③ナビゲーションの枠線の色の設定箇所
この部分のＣＳＳをピックアップします。
ここでナビゲーションの枠線の色を設定します。現在は緑字の「#cccccc｣はカラーコードと呼ばれていて色のコードを表しています。現在はグレーになっています。カラーコードはこちらのコード表よりご確認してくだしね♪
④ナビゲーションの文字サイズ
この部分のＣＳＳをピックアップします。
④でナビゲーションの文字サイズを設定できます。現在は緑字の20pxですが、ここと大きくしたり小さくすることで調整します。
⑤ナビリンクの背景の変更
この部分のＣＳＳをピックアップします。
⑤でナビの背景色を設定します。こちらも「#ffffff」がカラーコードですのでこちらを変更して背景色を変更します。
⑥ナビリンクの文字色の変更
この部分のＣＳＳをピックアップします。
⑥でナビの文字色を設定します。こちらも「#cccccc」がカラーコードですのでこちらを変更して背景色を変更します。
⑦ナビリンクのマウスを置いたときの背景の変更
この部分のＣＳＳをピックアップします。
⑦はナビゲーションにマウスを載せた時に変わる背景色の設定箇所です。こちらも「#CFCFCF」がカラーコードですのでこちらを変更して背景色を変更します。
⑧ナビリンクのマウスを置いたときのリンク文字の変更
この部分のＣＳＳをピックアップします。
⑧はナビゲーションにマウスを載せた時に変わる背景色の設定箇所です。こちらも「#ffffff」がカラーコードですのでこちらを変更して背景色を変更します。
ナビゲーションの配色や文字変更に関する注意事項
ナビゲーションのスタイルシートの解説をしましたが、カスタマイズする際は、当然のことですが、文字色と背景色を同系色にするとみずらくなってしまいますので、バランスをみながら配色を楽しんでみてください♪
お疲れさまでした。
おすすめ
