stinger5 ナビケーションメニューのカスタマイズ

2015年2月20日stinger 5stinger5, メニューstinger 5, メニュー

stinger5

stinger5 ナビケーションメニューのカスタマイズ

 

stinger5の初期状態では、ナビケーションメニューはシンプルです。なの
で個性をだすためにカスタマイズのやり方を備忘録として残します。

 

ナビケーションメニューは、ブログにとってカテゴリー等の入り口だと思
います。その入り口がわからなかったり、汚れていたりしたらあなたはそ
の店に入りますか?それと同じだと思います。

 

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。

 

尚、修正したソースコードは、必ずFTPソフトを使ってサーバー
にアップ。または各サーバーのオプション(ファイルマネージ
ャー)等(例はさくらサーバーです)で編集してください。

バックアップは忘れずに!!!
stinger5の初期状態では、ナビケーションメニューはシンプルです。なの
で個性をだすためにカスタマイズします。

 

カスタマイズ前のナビゲーションメニュー

 

stinger5009

 

子テーマのスタイルシート(style.css)に下記コードを追記した。
子テーマを持っていない方は、stinger5のスタイルシート(style.css)
に直接追記します。

 

[css]
/*—————————————–
ナビゲーション(メニュー)のカスタマイズ
——————————————-*/
nav li {
background: none repeat scroll 0 0 #4169e1;
border-left: medium none;
border-radius: 40px;/*角の丸みを調整*/
border-right: medium none;
box-shadow: 0 5px 8px -7px #555555;/*シャドーを付加*/
margin: 0 auto;
padding: 0 10px;
}

nav li a {
color: #fff;/*文字の色を変える*/
font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif;/*フォントを変える*/
border-radius: 40px;/*角の丸みを調整*/
border-left: medium none;
border-right: medium none;
box-shadow: 0 5px 8px -7px #555555;/*シャドーを付加*/
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 0p
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

nav li a:hover {
text-decoration: none;/*リンクの装飾(下線)を消す*/
background-color: #4169e1;/*カーソルを合わせたときの背景色*/

}
[/css]

各ボックスの角の丸みを強調してみました。

上記コード内にある「border-radius: 40px;」の数値を変更させる事によ
って丸みの度合いを変更できます。

 

また、シャドウーも付加しています。

「box-shadow: 0 5px 8px -7px #555555;」

数値を変えることで度合いが変化します。

 

カスタマイズ後、ブログにズレが生じていたら「padding」や「margin」
等で調整する。

 

カスタマイズ後のナビゲーションメニューです。

 

stinger5010

 

他のブログを観ても、あまり角を丸くしてるメニューが無かったので、こ
んなメニューバーもアリかな?
と思ってカスタマイズしました。

 

参考にして頂けたらウレシイデス。

 

追記

 

最新のナビケーションメニュー(もちろんサブメニュー付き)のカスタマイズをアップしてます。

 

こちらの方もヨロシク!!

 

stinger5ナビケーションメニューバーをグラデーションカスタマイズ