はてなブログのカスタマイズの話です。
先日プロブロガーのヨスさんの記事でとても参考になるものがありましたので早速実践してみました。実は前々からどうにかならないかなぁー、と思っていて放置していた県でもあります。
内容は、表題の通りで「画像に枠（輪郭）をつける」というものです。
画像に枠（輪郭）を付けないと見難い？
わたしのブログではしょっちゅう画像を添付しています。しかもスマホのキャプチャー画像が多いです。おニューのiPhone6sPlusを駆使してキャプチャーしまくっています。
その一例が以下です。
どうでしょうか？添付した画像の範囲ってわかりますか？？まぁなんとなくわかるかもしれませんが、スマホでキャプチャした画像だと背景が "白" ということが多く、上のような画像になってしまいます。
すると背景が "白" の箇所だと画像との境目が全くわかりません。要は見難いってことです。書いた自分で見ていても見難いので読者の方はもっと見難いと思います。
まさにプロブロガーのヨスさんが書いている通りですね。
ほら、スマホのスクリーンショットに多いのですが、真っ白い部分が多くて、どこからどこまでが画像がわからないんですよ。なので、枠を付けたり、影を入れたりすると一気にわかりやすくなります。
別の画像で横に並べてみるとこんな感じです。左が枠無し、右が枠ありです。（ちょっとキャプチャ位置がずれてはいますが）右のほうが枠があって見やすくなったと思います。
画像に枠（輪郭）を付けてみた
それでは、画像に枠を付けてみましょう。⇒ じゃん！
どうでしょうか！？画像との境目がはっきりしましたね。画像の背景が "白" の部分もちゃんと境界がわかるようになり、とても見やすくなりました。読み手を意識した記事って、こういう細かいことの積み重ねですね。
はてなブログで画像に枠（輪郭）を付ける方法
ヨスさんの記事中にありましたCSSをそのまま使用させていただきました。
img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
まずは、はてなブログの "設定" へ行きましょう。"設定" から "詳細設定" を開きます。
下のほうに "headに要素を追加" というのがあります。ここに以下のコードをコピーペーストします。
<style>
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
</style>
後は設定を保存して完了です。これでPC＆スマホ両方で画像に枠（輪郭）を表示させることができます。
ささいな事だけど実は大切なことかも
画像に枠をつけるなんてちょっとした事かもしれないけどこれにより記事がかなり見やすくなりました（そんな気がします）。
見やすさって大切。あるページに訪問してくれた人がちょっと読んで「なんだこのページ見難いなー」、と感じるとすぐ離れていっちゃう可能性もありますね。わたしがそうなので。そんなちょっとした事でせっかく訪問してくれた人を逃すのはもったいないですね。
プロブロガーヨスさんの記事を参考に（というか丸々使わせて頂きました）させていただきました。ありがとうございました！
こちらの記事是非お読みください↓↓↓画像の枠の話の他にも、すぐに実践できそうな"読みやすくする技" 満載です。勉強になります。
