Templates for SLMaMe

（2009.04.15 2:34 「ポラロイド風フレームにキャプションを入れる」に追記しました）
今回は、記事中の画像を装飾したいと思います。デフォルトの CSS には、リンク画像にボーダーが表示されるのを回避するためのスタイルのみ書かれています。

img タグに対してスタイルを指定するとスマイリーアイコン（）まで同じように装飾されてしまうので、スマイリーアイコンを避けて画像の装飾を行うためには、クラス名を使って装飾することになります。

記事に画像を挿入するたびにクラス名を追加しなければなりませんが、HUD や画像編集以外にも、ソースコードだけでできる様々な装飾をご紹介したいと思います。

はじめに

今回はサンプルと HTML 、CSS を羅列してご紹介します。

サンプルに使用する画像はこちら（flickr から引っ張ってきています）。



ご紹介する HTML ソースは全て記事投稿の「本文」や「追記」に挿入します。テンプレート「トップページ」「個別記事」「アーカイブ」には一切手を加えません。

テンプレート「スタイルシート」には、手を加えます。
追加する場所は、以下のコードの後ろであれば、どこでも構いません。

img {

   border: none;

}

写真風フレーム

<img src="画像のURL" alt="画像の説明" class="photo"/>

.main img.photo {

   margin: 1em 0;

   padding: 10px;

   background: #999;

   border: 1px solid #ccc;

}

ポラロイド風フレーム

<img src="画像のURL" alt="画像の説明" class="pola"/>

.main img.pola {

   margin: 1em 0;

   padding: 10px 10px 50px 10px;

   background: #fff;

   border: 1px solid #999;

}

フレームの背景に画像を指定

タイリング可能な画像を用意した場合。

<img src="画像のURL" alt="画像の説明" class="img_frame"/>

（ ←使用した背景画像）

.main img.img_frame {

   margin: 1em 0;

   padding: 10px;

   background: url(背景画像のURL);

   border: 1px solid #999;

}

応用編：ポラロイド風フレームにキャプションを入れる

（2009.04.15 2:34 追記）この方法は画像のサイズが固定されていないといけないので、あまり実用的ではありません。



※記事中のソースコードに途中改行は入れないでください

<div class="pola_frame"><img src="http://farm4.static.flickr.com/3587/3300394275_2f63fcb4ac_m.jpg" width="240" height="240" alt="Me of Today - 2009.02.22" /><br /><p class="pola_cap">ここにキャプションを記入する</p></div>

.main .pola_frame {

   width: 260px;

   height: 290px;

   margin: 1em 0;

   padding: 10px 0 0 0;

   background: #fff;

   border: 1px solid #999;

   text-align: center;

}



.main .pola_frame p {

   margin: 10px 0 0 0;

   padding: 0;

   font-size: 12px;

   color: #666;

}

リンク画像をオンマウスした時に背景色を変える

<a href="リンク先URL" title="リンク先の説明"><img src="画像のURL" alt="画像の説明"  class="flickr" /></a>

.main a img.flickr {

   margin: 1em 0;

   padding: 10px;

   background: #fff;

   border: 1px solid #999;

}



.main a img.flickr:hover, .main a img.flickr:active {

   background: #ccc;

   border: 1px solid #666;

}

好みのものだけを導入しても問題の無いよう、それぞれ別のクラス名を付けています。クラス名には、ご自身が分かりやすい名前を付けてください。

今回はよく見かける装飾方法をご紹介しました。色やボーダーの形状、太さを変更するだけでも雰囲気がガラリと変わるので色々と試してみてくださいね。

クラス名を追加しなければいけない点について、少々手間に感じるかもしれません。
テキストファイルなどに各 HTML ソースをメモしておいて、投稿時にコピー＆ペーストできるようにしておくと良いでしょう。場合によっては画像編集よりも手軽に画像を装飾することができます。