レスポンシブデザインでとてもよく出来ているのにモノトーン過ぎるtwentyeleven。今回は、サイドバーにあるカテゴリリストを少しだけカラフルで見やすいものにしてみました。

いったんリストの前に何もつけない設定にする

まず、style.cssで以下の箇所を探します。

ul {
    list-style: square;
}</pre>

これを、以下のように書き換えます。

ul {
    list-style: /***square******/ none;
}

これで、もともとリストの各項目についていた小さい四角が消えました。

リストの前に好きな文字や画像をつける

今度は、リストの前に好きな文字・記号・画像をつける設定をしていきます。

style.cssで、以下の部分を探してください。

#main {
    clear: both;
    padding: 1.625em 0 0;
}

これに少々追加します。

#main {
    clear: both;
    padding: 1.625em 0 0;
}
/***追加ここから**/
#main ul li{
    position: relative;
    padding: 5px 0px 5px 20px;
}
#main ul li:before {
    font-size: 30px;
    content: "●";
    color:green;
    position: absolute;
    left: 0px;
    top: -15px;
    padding: 5px 2px 5px 2px;
    text-align: center;
    font-weight: bold;
}
/***追加ここまで**/

“●”の部分を変えることで、色んな記号を各リスト項目の前につけることが出来ます。

また、content: “●”;をcontent:url(画像のURL);に書き換えることで、好みの画像を各リスト項目の先頭につけることが出来ます。

「カテゴリー」の字を大きくしてみる

style.cssで、以下の部分を探してください。

.widget-title {
    color: #666;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2.6em;
    text-transform: uppercase;
    padding:40px 0 0 0;
}

これを以下のように書き換えて「カテゴリー」の字を大きくします。

.widget-title {
    color: #666;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 25px;
    text-transform: uppercase;
    padding:0;
}

どうですか。モノトーンすぎて無味乾燥だったサイドバーが、こんな感じになりました。