WPのTHEMEを作っている時に、blogなので画像を記事に添付することもしばしばあるので、画像にもCSSでスタイルを施しています。
img{}
で{}内にスタイルをつければサイト全体の画像にそのスタイルが反映されるわけですが、私の場合は場所によってそのスタイルを変えたいのでいちいちスタイルをつけました。例えば、普通の記事の画像のスタイル、トップページのWelcome画像のスタイル、Gravatarのスタイル、sidebarの下あたりのGalleryのランダム画像のスタイル、カテゴリーイメージのスタイル、これらはもともと枠がついているのではなくて、スタイルでつけています。どうして枠をつけた画像にしないかというと、サイトのデザインによって枠線の色や幅を自由に変えられるのでこの方が融通がきくかなと思ったからです。
画像へのスタイルは、ただの画像と、リンクがある画像とでスタイルを変更できます。その場合は
a img{}
でスタイルをつけます。これでつけると、サイト内の全部のリンクがある画像のスタイルが同じになります。
私は場所によってスタイルを変えていますが、その場合はそれぞれその場所のIDやクラス名で画像のスタイルをつけます。
例えば記事本文のクラスを私は”postentry”としていますが、その部分の画像の場合のスタイルは
.postentry a img{
padding:4px;
border:1px solid #CCCCCC;
margin:5px;
}
.postentry img{
padding:4px;
border:1px solid #eeeeee;
margin:5px;
}
としています。リンク付画像の場合は、画像の周りに4pxの間を空けて#CCCCCC色の1pxの太さの直線をつけ、その線から5pxの余白を取り、リンクなしの場合はリンクありのと同じで線の色だけ#eeeeeeにするという設定です。
トップページのWelcome画像の場合は、他の画像とは少し違いをつけたかったので、ポラロイドっぽくしてみました。クラスは”top”にしたので
.top img{
margin: 5px;
padding: 5px 5px 25px 5px;
background-color: #FFFFFF;
border: 1px solid #666666;
}
としました。画像の周りに上右左は5px、下だけ25pxの間を空けて#666666色の1px幅の直線で囲み、線から周りに5pxの余白を空ける。画像と線の間の空間の色は#FFFFFFにするという設定です。画像と線の間を下の部分だけ大きくすることで写真ぽくしている（つもりです）
ここで注意したいのは、スマイル画像です。このままだと、スマイルにもリンクなしの画像のスタイルが適応されてしまい、入らない余白や線がついてきます。基本的には
img.wp-smiley {}
でスタイルをつければいえます。例えば
img.wp-smiley {
border: none;
display: inline;
padding: 0;
background-color: #FFFFFF;
margin: 0;
}
こうすると余白・線なしで画像の周りの背景が#FFFFFF（白）になります。inlineと入れることで文章と画像の間が狭くなりました。私は背景がグレイ（#EEEEEE・#F7F7F7）に設定しているところもあるので、クラス毎に例えばコメントの文章（クラス名”commentlist”）の場合は
.commentlist img.wp-smiley {
border: none;
display: inline;
padding: 0;
background-color: #EEEEEE;
margin: 0;
}
文章の部分の背景色が#EEEEEEなのでこうしています。コメントリストの背景は交互に変更する.altも使っているのでもう一つ。
.alt img.wp-smiley {
border: none;
display: inline;
padding: 0;
background-color: #F7F7F7;
margin: 0;
}
これで交互に背景色が変更していてもスマイル画像の背景も同じように変更するので違和感なく表示されます。