side barのlistをカラフルに-WordPress Twenty Elevenカスタマイズ

更新


レスポンシブデザインでとてもよく出来ているのにモノトーン過ぎる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;
}

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

side barのlistをカラフルに-WordPress Twenty Elevenカスタマイズ」への4件のフィードバック

  1. まさみぃ

    お世話になっております。
    分かりやすくて勉強になります。
    このカテゴリ下のリンク(CSS・SEOなど)のフォントのサイズは、どのようにしたら変更できるのでしょうか?

    1. ウェブシュフ 投稿作成者

      まさみぃさんコメント有難うございます。

      >このカテゴリ下のリンク(CSS・SEOなど)のフォントのサイズは、どのようにしたら変更できるのでしょうか?

      #main ul li でフォントサイズの指定をすれば出来ると思いますよ。

  2. まさみぃ

    フォントサイズを大きくすることができました。
    ご親切に教えていただいて、ありがとうございました。

    1. ウェブシュフ 投稿作成者

      どういたしまして。お役に立ててよかったです。

コメントは停止中です。