サイドバーのリンクをカスタマイズ

スポンサーリンク
Pocket

 

全体的なリンクの色やアンダーライン、太字にする等の装飾をします。リンク部分の装飾に関してはアンダーラインと太字があります。クリックされやすい色は青色だと言われています。

記事コンテンツ(本文中)のリンクをカスタマイズ

子テーマのスタイルシート (style.css)に記述していきます。記事内のリンクのカスタマイズは次の3つです。

  • aはリンク
  • a:hoverはカーソルが乗った時のリンク
  • a:visitedは訪問済みのリンク
1
2
3
4
5
6
7
8
9
/* 記事内のリンク */
.entry-content a  {
text-decoration: underline; /* リンク部分にアンダーライン */
font-weight:bold; /* リンク文字を太字 */
color: #0066cc;} /* リンクの色 */
.entry-content a:visited {
color: #0066cc;} /* 訪問済みの色 */
.entry-content a:hover{
color: #7a8285;} /* カーソルが乗った時の色 */

リンクにアンダーラインや太字を利用してまが、アンダーラインや太字は要らないという方は下記コーをド記入してください。

1
2
text-decoration: none; /* アンダーライン無し */
font-weight: normal; /* 普通の太さ */

また、カーソルを置いた時だけアンダーラインを使いたい場合は先ほどの「.entry-content a:hover」を「text-decoration: underline;」に入れ替え、「.entry-content a」を「text-decoration: none;」に変更します。

サイドバー(ウィジェット部分)のリンク

この部分の文字の大きさや装飾をカスタマイズしてみます。

この部分の文字の高さと文字の大きさは下記のように記述されてます。

1
2
3
4
5
6
/* サイドバーの文字 */
.widget-area .widget p, .widget-area
.widget li, .widget-area .widget .textwidget {
line-height: 28px; /* 文字の高さ */
font-size: 14px; /* 文字の大きさ */
}

リンクの色、カーソルが乗った時の色、それから訪問済みの色をそれぞれ書き込みます。

1
2
3
4
5
6
7
.widget-area .widget a {
color: #000000; /* リンク部分の文字色 */
text-decoration: underline; /* リンク部分にアンダーライン */
font-weight: normal; /* 文字の太さはノーマル */
}
.widget-area .widget a:visited {color: #000000;}
.widget-area .widget a:hover{color: #7a8285;}

以上でリンク部分のカスタマイズをやってみました。

スポンサーリンク

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください