スポンサーリンク

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

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

stinger5

スポンサーリンク

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

 

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

 

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

 

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

 

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

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

 

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

 

stinger5009

 

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

 

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

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

 

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

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

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

 

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

 

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

 

stinger5010

 

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

 

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

 

追記

 

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

 

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

 

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

 

スポンサーリンク