サイドバーのウィジェット関連をカスタマイズ

ウィジェットいじり

サイドバーにあるウィジェットのタイトルやリンクテキストがイマイチだったので、手を加えてみました。

01_widget

ウィジェットタイトルのカスタマイズ

編集したCSSファイルは/* =Widgets

.widget-title がタイトル周りのCSSです。

CSSコードは、こちらのサイトを参考にしました。

角アールで、しかもグラデーション。それをCSSで?っと腰が引けましたが、コードをコピペして、ちょっと手を加えたら、何とかできました。

02_widget

ウィジェットテキストの位置修正

タイトルをカスタマイズしても、リストのマークが飛び出して見た目が変。 なので、margin-leftを設定し、タイトルとリストマークが揃うように設定しました。

.widget ul ulをいじります。

02_widget 03_widget

ウィジェットテキストの変更

色と文字の大きさを変更しました。デフォルトは大きいので、全部見ようとするとスクロールが面倒。ので、文字サイズを小さくしました。

リスト周りの変更は.widget ul li

テキスト周りの変更は.widget a

すっきりしたサイドバー

初期に比べ、かなりメリハリがついて良い感じになりました。