ナビゲーション部分で、現在のページへのリンクの背景色を変える方法

更新
2013年02月23日(土) 20:50

現在表示しているページへのリンクがナビゲーション部分にある場合は、その背景色を自動で変更することにより、現在ページの位置をわかりやすく表示できます。

2013年2月23日追記:この記事の内容は過去ver用です。ナビゲーション内で、現在ページへのリンク背景色を指定する方法を記事にしました。

背景色を変更できるページ

  1. ページURLのスラッシュから右側が次の場合は背景色の変更が可能です。

    • blog-entry-数字.html(記事ページ)
    • blog-category-数字.html(カテゴリーページ)

背景色を変更するメリット

  1. ナビゲーション内のリンクを順番に読む場合に、現在ページを把握しやすくなります。

背景色をページごとに自動で変更させる設定

  1. 各リンクに固有のクラスを設定するだけです。

  2. 具体例で示します。blog-entry-1.htmlへのリンクをナビゲーション内に入れた場合、そのHTMLは次のようになります。

    
    <a href="<%url>blog-entry-1.html">マウスオーバーで</a>
    
  3. 上記HTMLにクラスを加えることにより背景色を自動で変更できます。この場合のクラス名は「entry-1」になります。リンクさせるページの数字とクラス名の数字を同じにします。リンクさせるページがblog-entry-95.htmlの場合は、入力するクラス名はentry-95になるということです。

    
    <a href="<%url>blog-entry-1.html" class="entry-1">マウスオーバーで</a>
    
  4. 同様に、カテゴリーページへのリンクをナビゲーション内に設置する場合は、クラス名に「category-数字」を入力します。

    
    <a href="<%url>blog-category-5.html" class="category-5">カテゴリー5</a>
    

追記

2012年8月4日追記:valid-seo-2c と valid-seo-3c の ver1.1.2 からはclassを設定しなくても自動で背景色が変わるように改良しました。

2012年7月30日追記:customtemplate ver1.2.0 からはclassを設定しなくても自動で背景色が変わるように改良しました。

以上です。

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