デフォルトというのは、バージョン2.9.*頃のデフォルトテーマのことでしょうか？
それなら簡単です。
私の場合は背景に表示させるという方法ですが。
まずは下記の部分をそっくり《style.css》の最後尾に追加してください。
(上の/*****/から下の/*****/までそっくりです)
/*
*******************************************************
[追加カスタマイズの始まり]
*******************************************************
*/
div#sidebar ul li h2 {
background-color:honeydew;
background:url(images/p04.gif) 0px 0px no-repeat;
font-size:1.4em;
color:green;
padding-top:10px;
padding-left:45px;
height:40px;
border:1px solid lavender;
}
/*
*******************************************************
[追加カスタマイズの終わり]
*******************************************************
*/
それでは詳しい解説をさせていただきます。
※ /*****/で追加部分を挟んでいるのはあとで削除するときに判りやすくするためです。
※ background-color:honeydew; この部分は見出しの背景色ですが、そのつぎの部分によって表示されません。
もしこれを表示したい場合は、honeydewをご自分の好きな色に変えて、次の部分を
/* background:url(images/p04.gif) 0px 0px no-repeat; */
のようにして無効にしてください。
※ background:url(images/p04.gif) 0px 0px no-repeat;についてですが、
images/p04.gif はimagesフォルダにあるp04.gif画像ファイルという意味です。
これがご希望のアイコンとして表示されます。
(p04.gifとは仮の名称ですので、ここには実際に挿入する画像のファイル名に変えてください)
0px 0px とは、アイコン画像が、見出しH2の左から0、上から0のところに表示されるということです。
ですから、この数字を変えることで、アイコンの表示位置をかえることができます。
最初はこのままでいいでしょう。
no-repeat とは、この表示方法は背景にひとつのアイコンを表示させることですからこのようになります。
さて、ここからは重要部分ですが、
使用するアイコン画像をFTPによって、imagesフォルダにuploadできるときは今のままで良いのですが、
WordPressのupload機能によってuploadしたときは、(images/p04.gif)の部分は、下記のように代わります。
(../../uploads/2011/10/p04.gif)
おそらく../../uploads/2011/までは、これでいいと思いますが、そのつぎの 10 は、十月の意味ですから、uploadする時期によって代わってきます。
ここは要注意です。
できれば画像ファイルがどこにあるか事前に確認したほうがいいでしょう。
※ font-size:1.4em; これは見出しの文字の大きさです。これはお好みの大きさに代えてください。
※ color:green; これは文字の色です。これもお好みの色に代えてください。
※ padding-top:10px; これは見だし文字の上からの距離です。これもカスタマイズしてください。
※ padding-left:45px; 45pxとは、見だし文字の左側からの距離です。
アイコン画像は、背景画像となっているため、それとかぶらないために、ずらしているのです。
この場合は、40px 40px の画像を使用していて、画像と見だし文字のあいだには 5pxの隙間があるということです。
もし、30px 30px の画像を使用するなら、ここは、35px がふさわしいかもしれません。
※ height:40px; 40pxとはアイコン画像の高さに合わせたためです。
※ border:1px solid lavender; これは見だしに色枠を付けるためのものです。
もしこの部分を
border-top:1px solid green;
border-left:4px solid green
border-right:1px solid green;
border-bottom:1px solid green;
のように代えると、左側だけ線の太い緑色にすることができます。アイコンがわりになるかも。
※ もし背景色も代えたいなら、そういう画像を挿入させてはいかがでしょうか。
サイドバーの幅は たしか190pxでしたから、幅190px以下、高さ40pxぐらいでどうでしょうか。
最後に、
- の件ですが、私の場合は、その部分のHTMLソースを表示させて、その構造をたどり研究分析して、その結果をもとに、カスタマイズしたい内容をstyle.cssに追加するようにしています。たいていはうまく行ってます。
以上です。
