ワードプレステーマTwentyTenのウェジェットタイトルを小綺麗に見やすくする方法です。
テーマTwentyTenのウェジェットタイトルは、デフォルトですとかなり残念ですよね…(汗 超あっさり、黒単色、太文字…orz
ってことで、少しばかり見栄え良くしてみようと思います。それでは、管理画面の「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)
スタイルシートの中から、次の部分を探して下さい。
/* =Widget Areas
-------------------------------------------------------------- */
.widget-area ul {
list-style: none;
margin-left: 0;
}
.widget-area ul ul {
list-style: square;
margin-left: 1.3em;
}
~~~~~~~~ 中略 ~~~~~~~~
.widget-container .wp-caption img {
margin: auto;
}
.widget-title {
color: #222;
font-weight: bold;
}
↓コレを以下の様に追加/編集して下さい。
/* =Widget Areas
-------------------------------------------------------------- */
.widget-area ul {
list-style: none;
margin-left: 0;
}
.widget-area ul ul {
list-style: square;
margin-left: 1.3em;
}
~~~~~~~~ 中略 ~~~~~~~~
.widget-container .wp-caption img {
margin: auto;
}
.widget-title { /* ウェジェットタイトルの設定 */
clear: both;
margin: 0 0 10px 0;
padding: 2px 8px;
border-width: 0 0 2px 3px;
border-color: #444444;
border-style: solid;
background: #b91d3a;
color: #ffffff;
line-height: 140%;
font-weight: normal;
}
これで、かなり印象が変わったハズです。数値やカラーコードを自由に編集して、あなた好みのウェジェットタイトルを作成してみて下さい。
参考サイト:見出しメーカー
なお、タイトル文字の大きさ/フォントについては、上記にプラスして次の様に要素を追加/編集して下さい。サイト全体のフォント設定をされて入る方は、個別の設定は必要ありません。
.widget-title { /* ウェジェットタイトルの設定 */
clear: both;
margin: 0 0 10px 0;
padding: 2px 8px;
border-width: 0 0 2px 3px;
border-color: #444444;
border-style: solid;
background: #b91d3a;
font-family: お好きなフォント;
font-size: ◯◯px;
color: #ffffff;
line-height: 140%;
font-weight: normal;
}
素敵なウェジェットタイトルが出来上がったら、ウェジェットをたくさん使いたくなってしまいますね(笑