ブログ投稿画像に枠(輪郭)を付ける方法 - はてなブログのカスタマイズ - いやまいったね!

Amazon

ブログ

ブログ投稿画像に枠(輪郭)を付ける方法 - はてなブログのカスタマイズ

投稿日:2015年12月2日 更新日:

はてなブログのカスタマイズの話です。

先日プロブロガーのヨスさんの記事でとても参考になるものがありましたので早速実践してみました。実は前々からどうにかならないかなぁー、と思っていて放置していた県でもあります。

内容は、表題の通りで「画像に枠(輪郭)をつける」というものです。

スポンサーリンク

画像に枠(輪郭)を付けないと見難い?

わたしのブログではしょっちゅう画像を添付しています。しかもスマホのキャプチャー画像が多いです。おニューの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&スマホ両方で画像に枠(輪郭)を表示させることができます。

スポンサーリンク
スポンサーリンク

ささいな事だけど実は大切なことかも

画像に枠をつけるなんてちょっとした事かもしれないけどこれにより記事がかなり見やすくなりました(そんな気がします)。

見やすさって大切。あるページに訪問してくれた人がちょっと読んで「なんだこのページ見難いなー」、と感じるとすぐ離れていっちゃう可能性もありますね。わたしがそうなので。そんなちょっとした事でせっかく訪問してくれた人を逃すのはもったいないですね。

プロブロガーヨスさんの記事を参考に(というか丸々使わせて頂きました)させていただきました。ありがとうございました!

こちらの記事是非お読みください↓↓↓画像の枠の話の他にも、すぐに実践できそうな"読みやすくする技" 満載です。勉強になります。

yossense.com

Amazon

アドセンス パソコン


スポンサーリンク

関連コンテンツ

こんな記事も書いてます!

おすすめ記事!

1

時間つぶしはもちろん、がっつり本格的にやりたい人にもおすすめのゲームアプリを紹介していきます! ここで紹介するアプリは全て無料でダウンロード&インストール可能(アプリ内課金有り含む)ですので、是非プレ ...

2

スマホ内の画像を整理していたら、酵素ダイエット(ファスティング:酵素断食)に挑戦した時の写真が出てきたので、私が経験した酵素ダイエット(断食)についてレポートしようと思います。(もう2年以上前の話です ...

3

更新:ドライヤーについて現役美容師さんの声&実際に私が体験した感想を追加 8月31日放送の「モシモノふたり」ではるな愛さんが使用していたドライヤー&フラッシュ脱毛器が気になったので調べてみました! お ...

-ブログ

Copyright© いやまいったね! , 2017 All Rights Reserved.