WordPressの記事内やサイドバーのリンクをカスタマイズ

10 comments

今回も引き続きWordPressのリンクの色や装飾部分のカスタマイズをして行きます。全体的なリンクの色やアンダーライン、太字にする等の装飾をしていきましょう。サンプルとして私の使っているテーマTwenty Twelveで解説します。

まずは一般的に使われている装飾について紹介していきます。リンク部分の装飾に関してはアンダーラインと太字があります。クリックされやすい色として有名なのが青色だと言われています。

そのため、このブログでも本文中のリンクは青色にしてリンク部分と分かりやすいように太字、アンダーラインを入れてます。

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

今回もTwentyTwelveの子テーマで作成したスタイルシート (style.css)に記述していきます。記事内のリンクのカスタマイズは次の３つの部分を覚えると簡単です。

aはリンク
a:hoverはカーソルが乗った時のリンク
a:visitedは訪問済みのリンク

私はこのように記述してます。

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

私の場合はリンクにアンダーラインや太字を利用してますが、アンダーラインや太字は要らないという方は対応する場所にこのように記述してください。

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

また、カーソルが乗った時だけアンダーラインを使いたい場合は先ほどの「.entry-content a:hover」の部分に「text-decoration: underline;」を入れて、「.entry-content a」の「text-decoration: none;」とすればＯＫです。

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

このサイトでいうとこの部分。この部分の文字の大きさや装飾をカスタマイズしていきます。

この部分の文字の高さと文字の大きさはこのようになってます。

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

そして文字色は装飾はこれ。先ほどの部分と同じ要領で、リンクの色、カーソルが乗った時の色、それから訪問済みの色をそれぞれ書き込みます。

.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;}

以上でリンク部分のカスタマイズでした。

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」

【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから