アメブロ記事内の画像に自動的に枠を付ける方法

ブログや書籍など、どんな媒体であっても文章のみで何かを説明するのは非常に難しいことだと思います。

自分達の仕事に置き換えてみても、
いくら文献や問い合わせで聞いてみても今一理解しきれなかった事が
現物１つ見るだけであっさり解決する事などよくあります。

文章情報だけより、画像や写真の方がはるかに頭に入りやすいのでしょう。


当然ブログでも同じ事です。
ひたすら文字のみギュウギュウ詰め込んだ記事をみても、内容を理解するどころかそもそも読む気すら起きないなんてことになりかねません。


その為このブログでも何かを説明するときなどは、
出来るだけ画像や現物そのものの写真を貼るように気を付けています。



しかしその場合に１つ困る事がありました。


このように白い色の画像で記事の背景も白の場合、
溶け込んでしまって境界がわかりにくくなるのです。

画像を見ればわかりますが、非常に見づらい。

そこで今まではJtrimなどを使い、あらかじめ画像に枠を付けてから記事内で使用していました。

ただどうしても作業量が多くなる為これは非常に面倒。
また自分の画像ならともかく、Amazonアフィリ画像などの場合にはこのやり方で加工するのはかなり困難です。

Amazonの画像URLに色々追記して影などをつける方法もありますが、現在AmazonアフィリリンクにはG-toolsのブログパーツを使用している関係上、何か不具合が出ると困るのでこの案も採用せず。
G-toolsについてはこちらの記事を。


どうにか出来ないかと調べてみた結果、どうやらCSSを弄る事でなんとかなりそうだったので試してみました。

・参考にした記事



記事内の画像のみに枠を付けたかったので
CSSに追記したのは以下の記述

/* 記事内の画像へ枠追加 */
.entry img{  
	border : 1px solid #DCDCDC;  
	margin : 1px;
}

カラーコードやpxを変更すれば枠線の太さ・色などを変える事が出来ます

こんな風に自動で枠がつくようになりました。








CSSを利用しているので、過去記事の画像にも一斉に適用されるのがいいですね。

・アメブロカスタマイズ目次