日本の最新ニュースや話題を届ける情報ステーション

ワードプレス(stinger・gush)や日本で話題になっているニュースを国内、国際、経済、エンタメ、スポーツおよびご当地情報を含めて配信しています

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

      2015/02/20

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ナビケーションメニューバーをグラデーションカスタマイズ

 

無料で自由に使えるお金と時間を手に入れて最高の人生にしませんか!

勝手にサーバーランキング
第1位 エックスサーバー

高機能ホスティングサービスプロバイダー「エックスサーバー」
マルチドメイン無制限・最新16コアCPUの大容量メモリ・232Gbpsの大容量バックボーン・FCGIなどの高速化機能

第2位 ロリポップレンタルサーバー

これまで136万人以上にご利用いただいている 『ロリポップ!レンタルサーバー』の会員募集プログラムです。
Webサイト・ブログ運営を始めるなら、ロリポップ!レンタルサーバーをご利用ください!

第3位 ドメインキング

月額100円の低価格&大容量レンタルサーバー「ドメインキング」の会員募集プログラムです。
安くて多機能、安心の電話サポート付きレンタルサーバーなので、 ホームページやブログを始める初心者やデザイナーに大人気! 価格.comで売れ筋、注目度ランキング1位を獲得した「ドメインキング」のレンタルサーバー

 - stinger 5
 -

        

  関連記事

stinger5
stinger5 記事内にもう一つアドセンス広告を追加して収益アップ

前回「stinge5トップページに広告を増やしてアドセンス収益をアップさせるカス …

stinger5
stinger5 トップページ記事一覧を区別化するカスタマイズ

スポンサーリンク stinger5 トップページ記事一覧を区別化するカスタマイズ …

stinger5
stinger5 タグクラウドを簡単にカスタマイズ方法

stinger5のワードプレスのデフォルトのタグクラウドも嫌いではないの ですが …

stinger5
stinger5「ページトップへ戻る」のカスタマイズ

スポンサーリンク stinger5「ページトップへ戻る」のカスタマイズ目 次1 …

stinger5
stinge5トップページに広告を増やしてアドセンス収益をアップさせるカスタマイズ

スポンサーリンク stinge5トップページに広告を増やしてアドセンス収益をアッ …

stinger5
ナビメニューの移動とヘッダー及びフッターの背景を画面いっぱいに広げた

デフォルトではstinger5のナビケーションメニューは、ヘッダーの下にあります …

stinger5
stinger5サブメニュー付きナビケーションメニューをカスタマイズ

スポンサーリンク stinger5サブメニュー付きナビケーションメニューをカスタ …

stinger5
stinger5 記事下にアフィリエイト広告を貼る

  stinger5で投稿した記事の下にアドセンス広告以外のアフィリエ …

stinger5
stinger3からstinger5に変更

ワードプレス4.0への変更・stinger5ダウンロードや子テーマの作成方法を紹介しています。

stinger5
stinger5「ページトップへ戻る」のカスタマイズ 2

stinger5「ページトップへ戻る」のカスタマイズ 2 前回カスタマイズした「 …

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


PAGE
TOP


ホーム
に戻る