サンプル
CSSのみで画像の周りに白枠と影を付けて、写真風に装飾をする方法を紹介します。撮影した写真に加工することなく、印象が変わると思います。
| お知らせ |
|---|
CSSで画像の周りに白枠と影を付けて写真風に装飾をする
2010年09月08日
1.カスタマイズ画面でスタイルシートに下記コードを記述する。
下記コードを、【テンプレート】－【カスタマイズ】－【スタイルシート】の一番下に記述します。
/* ==== 画像を写真風に装飾 ==== */
.pimg {
padding: 8px;
background-color: #ffffff;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 3px solid #dddddd;
border-bottom: 3px solid #dddddd;
}
2.imgタグにclass="pimg"を記述する。
【記事投稿】画面で、本文に挿入されたimgタグに、下記のようにclass="pimg"を記述する。（class="pimg"が記述されないimgタグの画像は、装飾されずに表示されます。）
<img src="//img01.hamazo.tv/usr/shigexworks/201009080001.jpg" alt="" class="pimg" />
以上です。
【CSSのみで画像の周りに白枠と影を付けて写真風に装飾をする】について分からないことがあれば、コメントにて問い合わせしてください。
また、その他のブログカスタマイズに関する質問、および、ブログカスタマイズの依頼は、サイドバーの【メッセージを送る】ボタンよりご連絡ください。
タグ ：画像
画像一覧 
