グローバルナビゲーション内の各項目を個別に装飾する方法

グローバルナビゲーション内の各項目を個別に装飾する方法です。IE8以下などは非対応です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. グローバルナビゲーション内の1段目各項目の背景色と文字色を変更できます。1段目とは、マウスオーバーしなくても表示されている部分です。

  2. グローバルナビゲーション内の2段目以降の各項目の背景色と文字色を変更できます。2段目とは、1段目をマウスオーバーすると表示される部分です。

  3. グローバルナビゲーションの各項目をマウスオーバーすると背景色が変わるように設定できます。

メリット・デメリット

メリット

  1. 配色を調整することでオリジナリティーのあるテンプレートになります。

  2. 見た目が賑やかになります。

  3. HTMLを編集することなく、CSSだけで配色を調整できます(IE8以下非対応 / プログレッシブ・エンハンスメント)。

デメリット

  1. テンプレート内で強調したい場所がいまいち分かりづらくなります。

  2. 色数を増やせば増やすほど、配色の難易度が上がります。

  3. ハイパーリンクの文字色を青色から別の色に変更すると、初めてページを訪れた方がハイパーリンクに気づきにくくなります。

  4. ハイパーリンクの文字色を一色で統一するのなら、青色から別の色に変更してもそれほどマイナスにはならないかもしれません。

  5. 現在ページへのリンクの背景色変化が目立ちにくくなります。

テンプレートのHTMLを編集

  1. 特にありません。

テンプレートのCSSを編集

  1. 次のコードをテンプレートのCSS内に追加します。CSS内のどこでもいいのですが、下図で示すように「ナビゲーション定義部分」の下に追加することを推奨します。今後のメンテナンス時に分かりやすいです。

    
    /*ナビゲーション1段目の文字色*/
    #nav li a:link,#nav li a:visited{color:red;}
    
    /*ナビゲーション2段目以降の文字色*/
    #nav li li a:link,#nav li li a:visited{color:green;}
    
    /*ナビゲーション1段目の配色(IE8以下非対応)*/
    #nav > li:nth-child(1){background:#f99;}
    #nav > li:nth-child(2){background:#fc9;}
    #nav > li:nth-child(3){background:#ff9;}
    #nav > li:nth-child(4){background:#cf9;}
    #nav > li:nth-child(5){background:#9fc;}
    #nav > li:nth-child(6){background:#99f;}
    #nav > li:nth-child(7){background:#f9c;}
    #nav > li:nth-child(8){background:#f9c;}
    
    /*ナビゲーション1段目をマウスオーバーした時の配色(IE8以下非対応)*/
    #nav > li:nth-child(1):hover{background:#f33;}
    #nav > li:nth-child(2):hover{background:#fc3;}
    #nav > li:nth-child(3):hover{background:#ff3;}
    #nav > li:nth-child(4):hover{background:#cf3;}
    #nav > li:nth-child(5):hover{background:#3fc;}
    #nav > li:nth-child(6):hover{background:#33f;}
    #nav > li:nth-child(7):hover{background:#f3c;}
    #nav > li:nth-child(8):hover{background:#f3c;}
    
    /*ナビゲーション2段目以降の配色(IE8以下非対応)*/
    #nav > li:nth-child(1) li{background:#f99;}
    #nav > li:nth-child(2) li{background:#fc9;}
    #nav > li:nth-child(3) li{background:#ff9;}
    #nav > li:nth-child(4) li{background:#cf9;}
    #nav > li:nth-child(5) li{background:#9fc;}
    #nav > li:nth-child(6) li{background:#99f;}
    #nav > li:nth-child(7) li{background:#f9c;}
    #nav > li:nth-child(8) li{background:#f9c;}
    
    /*ナビゲーション2段目以降をマウスオーバーした時の配色(IE8以下非対応)*/
    #nav > li:nth-child(1) li:hover{background:#f33;}
    #nav > li:nth-child(2) li:hover{background:#fc3;}
    #nav > li:nth-child(3) li:hover{background:#ff3;}
    #nav > li:nth-child(4) li:hover{background:#cf3;}
    #nav > li:nth-child(5) li:hover{background:#3fc;}
    #nav > li:nth-child(6) li:hover{background:#33f;}
    #nav > li:nth-child(7) li:hover{background:#f3c;}
    #nav > li:nth-child(8) li:hover{background:#f3c;}
    
    customtemplate-110-nav-each-part-1.png
  2. 変化が分かりやすいように、ナビゲーション2段目以降の文字色で緑色にしていますが、ユーザビリティを考えるとハイパーリンクの色は一色で統一した方がいいでしょう。

  3. 上記コードのbackgroundの右側のカラーコードを任意に変更することで配色を定義できます。

  4. コード内のnth-child(数字)の数字部分が、グローバルナビゲーション内で左から何番目か(何番目の子要素か)を表します。

  5. テンプレートやカスタムの仕方によっては、nth-child(8)まで必要ないかもしれません。たとえば、ナビゲーション1段目が5つしかないのなら、nth-child(6)nth-child(8)を含む行全体を削除できます。

  6. 下図の黄色の枠内がコピペした部分です。コピペ部分が多いので下図には収まっていません。

    customtemplate-110-nav-each-part-2.png
  7. デモページです。

その他

  1. グローバルナビゲーションを2行にカスタムしている場合は、上記コードを2つコピペし2つめのコピペ内のすべての#nav#nav2に変更すれば、追加した方のナビゲーション内も個別設定できます。

  2. 現在ページへのリンクの背景色変化の配色も調整した方がいいかもしれません。

  3. IE8以下でも対応可能にする方法を述べておきます。1段目のそれぞれにidを付与しそのidごとにスタイルを定義するだけです。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)