貼り付けた画像に枠と影を追加（はてなブログ改造計画）

記事中に貼り付けた画像に枠と影をつけようかな、と思ったので、今回はそう改造する方法です。

変更方法

記事中に貼り付けた画像を対象として枠と影をつけます。

管理画面から以下のようにたどります。

デザイン＞レンチマーク＞デザインCSS

ここに追記をします。

.entry-content img {
  border: 1px #000 solid;
  box-shadow: 5px 5px 2px #ccc;
}

透過の有無に関わらず同じような表示になります。

以降、設定した CSS の説明です。

指定箇所についてです。

.entry-content img {

.entry-content が記事の内容。その配下の img タグとしました。

ここは意外と悩ましいところでした。はてなブログの仕様が変わったのか、時期によって生成されているタグが違いましたね。。。もっと絞り込むクラスを入れても良いのかも知れませんが、この程度に留めました。

次に装飾の内容です。

  border: 1px #000 solid;
  box-shadow: 5px 5px 2px #ccc;

影は box-shadow 属性が有名ですが、最近は filter 属性に drop-shadow を当てるのが流行りでしょうか。

  /* （注意）うちのブログはこうなっていません。 */
  filter: drop-shadow(5px 5px 2px #ccc);

こうすると、透過 PNG や SVG などで四角以外の画像でも上手く影を付けてくれるのが特徴です。（枠がついていてヤヤコシイですが、枠の中の表示だけ見てください。）この場合は border を付けない方が良いと思います。

うちのブログでは、枠を付けたいので box-shadow を使うことにしました。

drop-shadow についてはこちらに。

尚、利用できるブラウザを調べるのには CanIUse を使うと良いでしょう。