記事内ハイパーリンクの文字色,背景色,下線,太さの装飾をCSSで設定

更新
2013年03月05日(火)

記事本文内にあるハイパーリンクの装飾をCSSで設定する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 記事本文内にあるハイパーリンクの装飾を設定します。

  2. CSS編集だけです。HTML編集はありません。

テンプレートのCSSを編集

  1. 次のコードを探します。下図で反転している部分です。

    /*ハイパーリンク*/
    121212link-in-entry-1.png
  2. 上記コードの6行程度下に次のコードを追加します。下図で反転している部分が追加後のコードです。

    /*記事本文内のハイパーリンク*/
    .entry-content a:link {/*未訪問*/
      background:transparent;     /*背景色*/
      color:#03c;                 /*文字色*/
      font-weight:bold;           /*太さ*/
      text-decoration:underline;  /*線*/
    }
    .entry-content a:visited {/*閲覧済み*/
      background:transparent;
      color:#609;
      font-weight:bold;
      text-decoration:underline;
    }
    .entry-content a:hover {/*カーソルをのせた時*/
      background:transparent;
      color:#f03;
      font-weight:bold;
      text-decoration:underline;
    }
    .entry-content a:active {/*クリックした瞬間など*/
      background:#ff3;/*背景色*/
      color:#f03;
      font-weight:bold;
      text-decoration:underline;
    }
    121212link-in-entry-2.png
  3. 補足:background:transparent;transparent は「透明」という意味です。親要素とは別の値(背景色)にしたい場合は、カラーコードを指定します。

  4. 2013年3月5日追記:当初は transparent の代わりに inherit にしていましたが、副作用のない transparent に変更しました。

  5. デモページです。

    121212link-in-entry-3.png

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

  1. 上記説明やキャプチャー画像と相違があるかもしれません。ご了承願います。

以上です。

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