ワードプレステーマTwentyTenでウェジェットエリア内の文字/リンク/マウスオーバー/色などの設定方法です。
デフォルトですと、サイト全体のリンク色の設定がそのまま反映していると思います。ここでは、ウェジェットエリア内のリンクを個別に設定する方法を書き残しておきます。
管理画面の「外観」⇒「テーマ編集」からスタイルシートを開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)
スタイルシートの中から、次の部分を探して下さい。
/* =Widget Areas
-------------------------------------------------------------- */
.widget-area ul {
list-style: none;
margin-left: 0;
}
.widget-area ul ul {
list-style: square;
margin-left: 1.3em;
}
～～～～～～～ 中略 ～～～～～～～～～
.widget-title {
color: #222;
font-weight: bold;
}
.widget-area a:link,
.widget-area a:visited {
text-decoration: none;
}
.widget-area a:active,
.widget-area a:hover {
text-decoration: underline;
}
.widget-area .entry-meta {
font-size: 11px;
}
緑の部分がウェジェットエリア内のリンクの設定です。青の部分がマウスオーバー時のリンク設定です。必要があれば、以下の様に要素を追加/編集して下さい。
.widget-area a:link,
.widget-area a:visited {
font-family: ’お好きなフォント’;
font-size: ◯◯px; /* 大きさ */
color: #カラーコード; /* リンク色 */
text-decoration: none;
}
.widget-area a:active,
.widget-area a:hover {
color: #カラーコード; /* マウスオーバー時のリンク色 */
text-decoration: underline;
}
フォントに関しては、サイト全体のフォント設定をされている方は必要ありません。文字サイズも同様です。
なお、’text-decoration’の’underline’は、マウスオーバーした時に下線(アンダーライン)がリンク文字の下に付きます。下線表示したくない場合は、’none’に変更して下さい。
また、ウェジェットタイトルを装飾したい方は、コチラを参考にすると便利です。
