読者です 読者をやめる 読者になる 読者になる

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

ブログ画像の枠線をWindows 10スクショの枠線っぽく処理する方法

ブログ運営 ブログ運営-編集便利ツール

f:id:kminebg1110:20160904101506j:plain

ブログを始めて以降、試行錯誤していたことの1つに「画像を貼り付ける際の枠線をどうするか、何色にするか」ということがあります。濃い色の画像ならいいのですが、白い背景に白の画像を貼り付けると、画像と背景の境界がわからず、わるい意味で背景と画像が一体化してしまいます。

この対応として、記事として記載するほど、また、「方法」とするほど大袈裟なものでもないのですが、最近ではWindows 10のスクリーンショットっぽく処理していますので、ご紹介です。

 

スポンサーリンク

 

 

画像の枠線処理の実例

iPhoneのスクリーンショットをベースに、枠線処理前後の実例です。

 

▼こちらが枠線処理なしのもの。当ブログの背景は「白」のため、画像と背景の境目がわからず、メリハリのないものになっています。

 

f:id:kminebg1110:20160904090411j:plain

 

▼こちらが枠線処理後、上の画像と比べて、どちらが見易いか・メリハリがあるか、明らかです。

f:id:kminebg1110:20160903164809j:plain

 

▼ちなみに、目標としたのが、以下のWindows 10にてスクリーンショットを撮った際のデフォルトの枠線。Windows 10っぽい水色の枠線です。

f:id:kminebg1110:20160904091105j:plain

 

ブログ画像の枠線を、Windows 10っぽく処理する方法

方法と書くと素敵なことをやっているように聞こえますが、「バナー工房」を利用し、単に枠線を水色に指定しているのみです。

 


▼上記でご紹介の「バナー工房」サイトにて、「枠線」を選択

f:id:kminebg1110:20160904093125j:plain

 

▼色の選択ですが、Windows 10の水色は、矢印・赤枠の「#0066CC」が最も近いとの認識です。枠線の太さは「1」としています。

なお、ブログ画像の縮小をする場合、枠線の太さを1ポイントとする場合には、2ポイント分をマイナスして指定すると綺麗に見えます(枠線まで縮小されずに済みます)。

例えば、画像の横のサイズを350とする場合には、画像の縮小サイズは348を指定し縮小、その後 枠線の太さを「1」とすると、枠線付与後にピッタリ350のサイズとなります。

ちなみに、画像毎の枠線付与ではなく、CSSにて全画像を自動的に枠線付与することもできますが、枠線を付けたくないアイキャッチ画像まで枠線が付いてしますため(制御できそうですが)、私は画像毎の手作業で対応しています。

 

f:id:kminebg1110:20160904093239j:plain

 

f:id:kminebg1110:20160904094336j:plain

▲また、「はてなブログ」の場合には、上の画像のように自動的に薄い灰色の枠線が付与(この画像は拡大表示できるよ、との目印)されています。拡大表示が不要=灰色の枠線が不要の場合には、以下の赤文字のように、デフォルトが"hatena-fotolife”の文字をいじる(私の場合はh-atenaとしている)と、「枠線が削除=拡大表示ができない」となります。

 

<img class="h-atena-fotolife" title="f:id:kminebg1110:20160904090411j:plain"

 

まとめ

記事にする必要もないほどのことでしたが、ブログ開設当初に私が悩んでいたように、画像の枠線の処理で困っている方もいるのではと思います。どうせ枠線処理するなら、上記のようにWindows 10っぽく処理する、または、お好みの色で統一するのはいかがでしょうか。