CSSでココログの画像をポラロイド風にアレンジ

そのまま画像をUPしてもいいのですが、ちょっとお洒落にアレンジしてみたい。
と思っていたら、いい方法を発見しました[ハート]

ブログカスタマイズメモ　DEAR DAYS別冊さまの「写真をポラロイド風にする」と「ポラロイド背景に画像を(グレー系)」です。

画像をつかうとよりポラロイドらしくなるのですが、今回は、単純に枠線で囲むだけにしました。
CSSの記述は以下の通りです。

/* 画像 */
.entry-body img {
background-color: #FFFFFF;
border-width: 2px;
margin: 5px 10px 5px 5px;
padding: 5px 5px 5px 5px;
border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

このままだと、絵文字のアイコンにも枠が出てしまうのが難点です[涙]
そこで、絵文字スクリプトも修正しました。

1.「テンプレートをいじらずにコメント欄で絵文字を使う方法」の手順4のimgタグに、IDを追加します。

<img ID="emoji" src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />

2.絵文字のみ上記の枠を表示しないよう、CSSで設定します。

/* 絵文字 */
.entry-body img#emoji {
background-color: #FFFFFF;
border: none;
margin: 0px;
padding: 0px;
}

【追記】
シンプルな枠から、画像を使ったポラロイド風に変更しました。
CSSは以下の通りです。

/* 画像 */
.entry-body img {
background-color: #FFFFFF;
border-width: 2px;
margin: 5px 10px 5px 5px;
padding: 10px 10px 35px 10px; border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
background-image: url(http://xxxx.cocolog-nifty.com/photoicon.gif);
background-repeat:no-repeat;
background-position:95% 98%;
}

/* 絵文字 */
.entry-body img#emoji {
background-color: #FFFFFF;
border: none;
margin: 0px;
padding: 0px;
background-image: none;
}

お借りしたのは、nekonoieさまの「足跡アイコン」です。

【2006.8.12　追記】
IDではなくCLASSを使う方が正しい、とのご指摘をいただきました。
IDは一度しか出ない場合に使うものなので、今回のように繰り返す場合はCLASSが適切なのだそうです。
naoKさん、ありがとうございます。

ということで、切り替え方法です。

1.手順1でのIDの付加は行いません。
代わりに「テンプレートをいじらずにコメント欄で絵文字を使う方法」の手順1で、「画像タグに含める属性値（alt属性以外）」に「class="emoji"」を追加します。

// 画像タグに含める属性値（alt属性以外） var att = 'border="0" width="17" height="17" style="vertical-align:middle" class="emoji"';

2.CSSの指定を、CLASSに変更します。

/* 絵文字 */
.entry-body img.emoji {
background-color: #FFFFFF;
border: none;
margin: 0px;
padding: 0px;
background-image: none;
}

【2006.8.13　追記】
IEでのみ、画像周りの余白(padding)が上手く表示されない場合があるようです。
その場合は、1行目のXML宣言を削除して下さい。
詳しくは、「小粋空間: 標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する」にて解説されています。

【2008.2.10　追記】
本文に挿入した、ココログ公式の絵文字のみ、枠線を外す方法をアップしました。
「ココログ公式絵文字のみ、ポラロイド風枠を外す方法」をご覧下さい。