コピペで超簡単 はてなブログ 記事内の画像に枠線を付ける方法
Switchください、どうもナカニシ（@tssb26）です。
この記事のサムネイルを見てください、みんな大好き河村友歌さんかわいいんですけど、境界線がわかりにくいですよね
白地のブログに白地の画像を貼り付けると、バックと同化してしまって境界線がわからなくなるんです
特に記事内に貼り付けたりすると、どこまでが画像なのか、どこからテキストなのか、判断つきにくい場合があって、見づらっ！読みにくっ！ってなる
以前は、わざわざ画像加工の時に枠線を付ける処理を入れてましたが、めんどくさくなって自動で枠線付くようにカスタマイズしましたのでご紹介します
コピペで超簡単です、10秒でできます、気になってた方は試してみてください
基本デザインCSS
方法は<img>タグにスタイルを設定するのですが、そのまま設定するとサイト内の全ての画像に枠が付いてしまいますので、記事内に貼り付けた画像に絞るためにclassを指定します
自前で貼り付けた画像は「はてなフォトライフ」にアップロードされて、専用のclassが付いてますのでそれを利用します
基本のCSSはこれです
.entry-content img.hatena-fotolife {
padding: 2px;
border: 1px #aaaaaa solid;
}
これを「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けて下さい
これで記事内に貼り付けた画像だけ薄い黒の枠が付くようになります
↓こんな感じになります
輪郭がはっきりして、画像とバックの境界がよくわかります
これが基本です、これはこれでいいのですが、色を変えたり線種を変えたりしたい方は以下を参照してください
線幅、色、スタイル変更
余白
ここの数値を増減させると余白の幅がいじれます
広げすぎるとデザイン崩れてしまいますので要注意
「padding: 2px;」
線幅変更
ここの数値を増やすと枠の幅がぶ厚くなります
ここも広げるとデザイン崩れるので調整してください
「border: 1px #aaaaaa solid;」
色変更
枠線の色はここの値を変えてください
「border: 1px #aaaaaa solid;」
色見本はこちらのサイトが便利です
スタイル変更
枠線のスタイルはここを変えてください
「border: 1px #aaaaaa solid;」
以下、スタイルサンプルです
solid
（1本線）
（1本線）
double
（2本線）
（2本線）
groove
（線が窪んだ感じ）
（線が窪んだ感じ）
ridge
（線が盛り上がった感じ）
（線が盛り上がった感じ）
inset
（全体が窪んだ感じ）
（全体が窪んだ感じ）
outset
（全体が盛り上がった感じ）
（全体が盛り上がった感じ）
dotted
（点線）
（点線）
dashed
（破線）
（破線）
CHECK
角を丸くしたい
「border-radius: 10px;」
これを付け加えて下さい
「10px」を「50%」にするとまん丸になります
CHECK
影を付けたい
「box-shadow: 0px 0px 15px;」
これを付け加えて下さい
CHECK
最後に
いかがでしたか、お使いの環境やデザインテンプレートなんかでは若干調整が必要かもですが、コピペだけで簡単にできます
特にiPhoneのスクショなんかの画像はほんまに見にくい、境目がわからへん
読みやすい、見やすいブログって、ゴチャゴチャしてなくてこういうところもしっかり抑えてるんですよね
また気づいたことあればご紹介します
