ナビゲーションのアメブロカスタマイズ 解説編(新CSS編集デザイン)

ナビゲーションのアメブロカスタマイズ 解説編(新CSS編集デザイン)

アメブロカスタマイズ ナビゲーションバー

ナビゲーションのアメブロカスタマイズ解説編

このコラムはアメブロのトップにナビゲーションを付ける場合のカスタム方法の解説編です。以下のコラムで紹介したコードに対する解説なので、このコラムを初めて見た方はまずは、以下のコラムからご確認ください。

では早速行きましょう

前回、ブログのトップにナビゲーションバーを付ける方法を解説しました。

今回はその手順の中の「7番目」の、スタイルシートの解説をしたいと思います。

このスタイルシートには①~⑧までの番号がふってありましたね♪

今回はその番号にそって解説したいと思います。

スタイルシートの確認

前回の手順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*/

では順番に解説します

①、②ナビゲーションの位置座標の設定箇所

この部分のCSSをピックアップします。

top:100px;/*①ナビゲーショの位置座標の設定箇所(縦方向)。数値を大きくすると下の下がる。ヘッダー画像があるときはその高さによって調整すること*/
left:00px;/*②ナビゲーション位置座標の設定箇所(横方向)。数値を大きくすると右に移動*/

この設定でナビゲーションの位置を修正することができます。ヘッダーの高さやブログデザインにあわせて①で上下方向。②で横方向を修正してください。

③ナビゲーションの枠線の色の設定箇所

この部分のCSSをピックアップします。

border:solid 1px #cccccc;/*③ナビゲーションの枠線の色の設定箇所*/

ここでナビゲーションの枠線の色を設定します。現在は緑字の「#cccccc」はカラーコードと呼ばれていて色のコードを表しています。現在はグレーになっています。カラーコードはこちらのコード表よりご確認してくだしね♪

④ナビゲーションの文字サイズ

この部分のCSSをピックアップします。

font-size:20px;/*④ナビゲーションの文字サイズ*/

④でナビゲーションの文字サイズを設定できます。現在は緑字の20pxですが、ここと大きくしたり小さくすることで調整します。

⑤ナビリンクの背景の変更

この部分のCSSをピックアップします。

background-color:#ffffff;/*⑤ナビリンクの背景の変更,#ffffffのカラーコードを変更して設定する*/

⑤でナビの背景色を設定します。こちらも「#ffffff」がカラーコードですのでこちらを変更して背景色を変更します。

⑥ナビリンクの文字色の変更

この部分のCSSをピックアップします。

color:#cccccc;/*⑥ナビリンクの文字色の変更,#ccccccのカラーコードを変更して設定する*/

⑥でナビの文字色を設定します。こちらも「#cccccc」がカラーコードですのでこちらを変更して背景色を変更します。

⑦ナビリンクのマウスを置いたときの背景の変更

この部分のCSSをピックアップします。

background-color:#CFCFCF;/*⑦ナビリンクのマウスを置いたときの背景の変更,#CFCFCFのカラーコードを変更して設定する*/

⑦はナビゲーションにマウスを載せた時に変わる背景色の設定箇所です。こちらも「#CFCFCF」がカラーコードですのでこちらを変更して背景色を変更します。

⑧ナビリンクのマウスを置いたときのリンク文字の変更

この部分のCSSをピックアップします。

color:#ffffff;}/*⑧ナビリンクのマウスを置いたときのリンク文字の変更,#ffffffのカラーコードを変更して設定する*/

⑧はナビゲーションにマウスを載せた時に変わる背景色の設定箇所です。こちらも「#ffffff」がカラーコードですのでこちらを変更して背景色を変更します。

 

ナビゲーションの配色や文字変更に関する注意事項

ナビゲーションのスタイルシートの解説をしましたが、カスタマイズする際は、当然のことですが、文字色と背景色を同系色にするとみずらくなってしまいますので、バランスをみながら配色を楽しんでみてください♪

お疲れさまでした。

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ

« »

コメントは受け付けていません。