ナビゲーション内で、現在ページへのリンク背景色を指定する方法

グローバルナビゲーション内の現在ページへのリンク背景色を任意に変更する方法です。 body にクラスを追加せず、自分の好きな背景色に変えられます。当サイト作者が作成した次のテンプレートについてです。

2013年3月3日(日)追記:customtemplate と customtemplate-3c の (ver1.5.0)はハイライト背景色(グローバルナビゲーション/最新記事/カテゴリ/タグ)です。

概要

  1. HTML内に記載しているCSSを編集します。fc2変数はHTML内で有効になるためです。

  2. 編集する部分が4ヶ所あります。

テンプレートのHTMLを編集

  1. HTML内で、下図内で反転している4ヶ所を探します。下図はcustomtemplateでの例ですが、valid-seoシリーズでも同じ部分をカスタムします。ただし、コード内の.grayに関する部分がなく、代わりに8種類の色名に関して記載されています。

    #cff
    130223link-current-page-1.png
  2. 4ヶ所に同じカラーコードを入力し更新すれば完了です。グローバルナビゲーション内の各リンクにクラスなどを追加する必要はありません。

今後のテンプレート改訂時には

  1. もっと分かりやすくするように抜本的に改良します。また、4ヶ所に同じカラーコードをコピペするよりも、1ヶ所にカラーコードを指定すればいいようにする予定です。

  2. よって、上記説明やキャプチャー画像と相違があるはずです。ご了承願います。

その他

  1. この記事はテンプレート利用者さんからの質問により作成しました。

  2. 質問内容が次の2点の内どちらか迷いましたが、1.と判断しました。

    1. bodyに背景色設定用のclassを入れずに、現在ページへのリンク背景色を変更したい
    2. bodykhakiを追加したのに、現在ページへのリンク背景色が水色になる
  3. 質問内容の把握に1時間、記事作成(画像含む)に30分かかりました。

以上です。

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