はてなブログで 画像のフチに枠を付ける方法

当ブログではiPhoneのスクリーンショット画像をたくさん載せているのですが、白い背景に白っぽい画像だと、下記の画像のようにどこまでが画像で、どこまでが背景なのか分かりにくくなってしまいます。

そこで、当ブログではグレー色の細い枠を付けて見やすくしています。

今回は、はてなブログで画像のフチに枠を付ける方法を紹介したいと思います。

一つ一つの画像に枠を付ける方法

画像を表示する<img>タグの中に、スタイルシート形式で

style=”border: 1px solid gray;”

と記述します。

上記の画像の場合は

<img class=”hatena-fotolife” style=”border: 1px solid gray;” title=”xxx” src=”xxx” alt=”xxx” />

となっています。

style=”border:のあとに半角スペースで区切りながら、枠の「太さ」「種類」「色」の値を指定しています。

枠の「太さ」の値

ピクセル（px）で指定。

枠の「種類」の値

• solid　　 1本線
• double　 2本線
• dotted     点線
• dashed　破線
• none        ボーダーなし

など（他にもたくさんあります）

枠の「色」の値

”red”や”gray”などの色の名前で指定するか、#000000などの16進数のRGBで指定。

例

例えば

style=”border: 1px solid gray;”

の部分を

style=”border:3px dashed black;”

と指定すると、枠は下記のように表示されます。

ブログ全部の画像に枠を付ける方法

毎回一つ一つの画像に枠を付けるのが面倒くさいという人は、とにかくブログの画像全部に枠を付けてしまうという方法もあります。

その方法は、はてなブログの「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」の中に、

<style> .entry-content img { border : 1px solid gray; } </style>

と記述して、ページ一番下にある「変更する」ボタンをクリックして変更を保存します。

もちろん、style=”border”の値は、それぞれの好きな値で指定してくださいね。

これでブログの全ての画像に同じ枠が表示されるようになります。

しかし、そのあと個別に画像の<img>タグの中にスタイルを指定すれば、そちらが表示されるようになります。

「none」と指定すれば、枠を消すこともできますよ。

以上が、はてなブログの画像の縁に枠を付ける方法でした。

それでは、良いはてなブログライフを(^o^)丿