画像に枠をつける

※検索でいらっしゃった方へ
この記事は、私が配布しているFC2ブログテンプレート専用の記事です。ご了承ください。


画像に枠をつけるためには、二つの方法があります。

■ 方法1
一つ目の方法は、「携帯の管理画面から記事を投稿する際に絵文字を使用していない」という条件を満たしていれば、スタイルシートに次の記述を追加するだけで可能です。おそらく、殆どの方はこちらの方法で大丈夫だと思います。なお、この方法では記事中の絵文字以外のすべての画像に自動的に枠がつけられます。

.entry img{
  border : 1px solid #555;
  margin : 1px;
}
img.emoji {
  border : none;
  margin : 0;
}

携帯の管理画面から投稿する際に絵文字を使用すると、一つ目のやり方だと絵文字にも枠がついてしまうようです。（一般の管理画面からだと、img要素に「emoji」というクラスがつけられるのですが、携帯の管理画面からの投稿の場合、クラス名がついていないimg要素が生成される仕様のようです。）
携帯の管理画面からの投稿が少ない＋絵文字を使う頻度が少ないのであれば、エントリーの編集から、絵文字部分のタグに「class="emoji"」というのを追加することで枠を消すことができますが、絵文字を多く使っている場合は、二つ目のやり方を試してみてください。


■ 方法2
一つ目の方法では記事中のすべての画像に枠がつけられるのに対し、二つ目のやり方では、枠をつけたい画像を選んでスタイルを適用させます。枠をつけたい画像が決まっている場合などは、こちらの方法が良いかもしれません。
この方法を使うには、次の手順を踏むことになります。
1.スタイルシートに枠をつけるための記述を追加する
2.枠をつけたい画像に対し、1で設定したスタイルを適用させる

それぞれのやり方は以下の通りです。

1.スタイルシートに枠をつけるための記述を追加する
スタイルシートに、次の記述を追加してください。

img.img-b {
  border : 1px solid #555;
  margin : 1px;
}

2.枠をつけたい画像に対し、1で設定したスタイルを適用させる
次に、枠をつけたい画像に対して、次のように修正を施します。

<img src="（画像のURL）" alt="（画像のタイトル）" border="0" />

↓（class="img-b"を追加）

<img src="（画像のURL）" alt="（画像のタイトル）" border="0" class="img-b" />

なお、ここでは適当なクラス名：「img-b」を設定しましたが、このクラス名は変更することも可能です。
クラス名を変更するには、1・2の編集の際に「img-b」という箇所を別のクラス名で置き換えてください。
（クラス名に日本語は使えません。良くわからない人は触らない方がいいかと。）

方法2の利点は、画像の種類に合わせて枠のデザインを選べることです。方法1と組み合わせることで、より自由度の高いデザインが可能になります。
例として、私がflickrの写真をブログに貼る際に適用させているスタイルを紹介しますね(*＾-')ノ
クラス名は「flickr」としています。

.flickr {
  background-color:#f5f5f5;
  padding:1px;
  border:1px solid #333;
  margin:1px;
}