特定のイメージだけに外枠の線をつける

下の記事のように、ある特定の画像にだけ周囲に枠線を付けたいと思った。背景が白いのに画像まで白地だから、どこまでが画像なのかはっきりしなかったからだ。記事の中のイメージタグにborder: solid 5px black;を直接追加したが、SPANやAタグなどいろいろやっても枠線は表示されなかった。このテンプレのスタイルシートを見直すとimgはdisplay:none;となっていた。・・・なるほど。

これじゃ、なおの事イメージタグに直接書き込むしかないわけだが、自分の書いたタグでは間違っているという事だ。挿入したイメージタグにはclass=”alignnone size-full wp-image-13809″ というのがあって、画像を特定させるにはこれしかない。だが、

img .alignnone size-full wp-image-13809
{border:solid 5px #000000;}

では枠線は表示されなくて、以下のように画像の個別番号?だけを入れることによって枠線は表示された。

img .wp-image-13809
{border:solid 5px #000000;}

具体的に詳細を書くと、以下の通りを投稿時に先頭に付け加えた。bodyに付け加えたことになるが、今は良くても、そのうちHTMLの仕様によりうまく表示されなくなるかもね。

<style type="text/css">
<!--
img .wp-image-13809
{border:solid 5px #000000;}
-->
</style>

HTMLの本で読んだのだと思うが、確かスタイルシートは同じ要素の異なる設定がある時、下に書いたものが上に書いたものに上書きされる。また、スタイルシートとHTMLに同じ要素の異なる設定があれば、HTMLタグの方が優先される、はずだったと思ったが。