えー、約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: