「TwentyElevn」カスタマイズ・サイドバーカテゴリーに下線を付けてアイコンも付ける

えー、約2日間かけまして、TwentyElevnのカスタマイズをやってました。
あまりこのブログでは自分のサイトへのリンクはしませんが、どなたかの参考になればと思い、
完成したブログサイトをリンクしときます。
インテリアコーディネーターの模様替えヒント集

まず、今回のカスタマイズで最強に参考になったサイト様はこちらです→コピーライティング×デザイン×マーケティング実践記

すばらしい内容です。ぜひ訪問されてみてくださいね~。

で、いつもの様に備忘録。
WEBマスター歴12年の私、すっかり目がタイヘンなことになってますが、がんばりました!

サイドバーのカスタマイズ部分

/* =Widgets
———————————————– */

.widget-area {
font-size: 12px;
}
.widget {
clear: both;
margin: 0 0 2.2em;
}
.widget-title {
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
.widget ul {
font-size: 15px;
margin: 0;
}
.widget ul ul {
margin-left: 1.5em;
}
.widget ul li {
color: #777;
font-size: 13px;
}
—————————————

ここの下に、下記を追加。

.widget li {
padding: 2px 0 5px 18px;
margin: 0 10px 0 10px;
background: url(images/アイコンのURL) no-repeat;
background-position: 1px 4px;

border-bottom: 1px solid #ddd;}

.widget li li {
padding: 2px 0 5px 18px;
margin: 0 10px 0 10px;

background: url(images/アイコンのURL) no-repeat;

background-position: 1px 4px;
border-bottom: 1px solid #ddd;}

.widget li li li {

border-bottom: 1px solid #ddd;
}

親カテゴリーと子カテゴリーのアイコンを変えたかったのですが、なかなかわからず。
自分が前に作ったブログなどを調べて解決しました。

それから、アイコンの画像、少し大きさが違うと当然ずれます!
私の場合は親カテゴリーのアイコンはすんなり収まったのですが、
子カテゴリーを小さめの矢印アイコンにしたので、どうしてもずれが直らず(涙)

結局、親カテゴリーアイコンと同じ大きさの「白紙」を作り、そこに矢印を描いたのを新しく作り、解決!

やはり、カテゴリーに下線やアイコンが入ると、良い感じです:razz: