widget-titleを変える巻

公開日： 2012/11/04 : 最終更新日：2012/11/04 WEB

CSSを修正して、WordpressのWidget部分の表現を整えます

WordPressのバージョンアップを繰り返していると、CSSがクリアされ画面が崩れます
今回、崩れたCSSに手を加え、Widgetのタイトル部分を修正しました
具体的には、タイトルは青地に白文字としています

【修正前】

【修正後】

タイトル部分の修正は２点
１）タイトル部分に色を塗り、文字を白抜きとした
２）そのままだと、リストスタイルの「・」ドットが表示されるので、ulを調整した

１）タイトルの調整

.widget-title {
color:#FFFFFF;
background-color:#000080;
padding:6px 0 4px 10px;
margin:5px 0 5px;
font-weight: bold;
}

こちらはタイル部分が「widget-title」で指定されているので、簡単

２）ulの調整

.widget-area ul {
margin-left: 0;
list-style: none;
}
.widget-container ul{
margin-left: 1.3em;
list-style: square;
}

で、１）を修正してみたら、ここで問題
タイトル部分に「・」が表示されちゃいます
調べてみると
タイトルがliで指定されてるので、どこかのulの定義で「・」が表示されてしまうようです
調べてみると、ulが入れ子状態
外側にある「widget-area」の「list-style」を「none」にし、内側にある「widget-container」の「list-style」を「square」にすることで解決
各idやclassの影響範囲が判らなかったので、一苦労でした