*

widget-titleを変える巻

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

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

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

【修正前】

【修正後】

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

1)タイトルの調整

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

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

2)ulの調整

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

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

PC

関連記事

WordPressの小テーマでfunctions.phpを使うの巻

小テーマのfunctions.php利用は、あっさり出来ました 連休を利用してWord

記事を読む

手軽に出来る! WORDPRESSに最近の投稿を写真付きにする巻 special recent posts

手軽に写真付きの最近の投稿ができます WORDPRESSで標準の最近の投稿はテキストの

記事を読む

リンクの色を変える巻

CSSを使ってリンクしている文字の色を変更します ちょっとサイトに手を入れだしたら止まりません

記事を読む

設置簡単!常にソーシャルシェアボタンが表示されるようにしてみたの巻 WordPress ShareBar

ソーシャルシェアのボタン設置は簡単でした ネットで調べてみると、フローティングして常に

記事を読む

繰り返し表示を大量生産! WordPressで差込表示するの巻

WordPressの記事で特定のシリーズなどで同じ文章を繰り返し表示したいときってありますよね

記事を読む

ブックマークレット 食べログの店名TEL住所営業時間定休日駐車場を表示

ブックマークレットを作ってみました 食べログから店名、住所、営業時間を抽出するものです

記事を読む

簡単にできた! WordPressの個別記事にサイドバーを表示させる巻

個別記事をホーム画面のようにサイドバーつきに変更します Wordpressでちょっと不

記事を読む

改善の見込みなし! アクセス数降下中

昨日は持ち直したものの、今日もアクセス降下中 135→86→42→35→53→22 22時

記事を読む

早っ!重複するメタデータ(descriptions)の問題を解消!

昨日、発見した重複するメタデータ(descriptions)の問題 対策して、一日経って見

記事を読む

サイトのダウンが直ぐ判る!IS IT DOWN RIGHT NOW?

落ちているサイトを判別できるのは便利です 先日のこと、自分のサイトにアクセスで

記事を読む

PC

PC

PAGE TOP ↑