【ブログ】画像に枠線をつける方法 ※コピペで簡単
こんばんは、発狂ねこです(^ ・∀・^)ｸﾞﾍｸﾞﾍ
今回の記事では、ブログ記事内の画像に枠線をつける方法を説明します。
枠線って要るの？
まず、枠線の有無でどれだけ見え方に差が出るか、下記を確認してみてください。
枠なし
枠あり
いかがでしょうか。
枠があったほうがメリハリが付いて、圧倒的に見やすいですよね。
視覚的なことだけでなく心理的な事を言うと、枠が無い場合は（画像内背景と記事の背景が類似した色であるほど）画像と背景の境界が曖昧であり、意識していなくても不安感を覚えてしまうものなのです。
38度線のように、境目は大事なのですね。
それではどうすれば枠線が付けられるか、続けます。
枠線の付け方
はてなブログの場合、記事編集ページ上部タブの「HTML編集」より、HTMLコードをいじることで付けられます。
HTMLコードなんて面倒くさい、分からないと言う方も多いかもしれませんが、下記手順通りのコピペで楽々です！
まず、枠線を付けたい画像を投稿し、HTML編集の中のから対応したコードを見つけます。
<p><img class="hatena-fotolife"~
のような、画像を定義する「img」で始まるコードが存在するはずです。
これを見つけたら、この「img」から半角の空白の後（「classが始まる場所」）に
style="border:1px solid #a9a9a9;"
をコピペしてください。※上記の最後に半角もあるので注意！
すると
<p><img style="border:1px solid #a9a9a9;" class="hatena-fotolife"~
のようになりますね。
ここで「編集 見たまま」に戻ると、画像に枠が付いているはずです。
style="border:1px solid #a9a9a9;"
については頻繁に使うので、私は辞書機能で「s」を押すと上記文に変換されるよう登録しています。
補足説明
style="border:1px solid #a9a9a9;"
については「1ピクセルの#a9a9a9の色をした実線で画像を囲め」という命令です。
1を2にすれば線が太くなりますし、カラーコード#a9a9a9を変更すると別の色の線になります。
solodを別の命令にすれば線の種類を変えられます（あまり使わないので詳細説明は省きます）。
ちなみに上記コピペのテンプレの色はダークグレーですが、黒にしていないのは理由があり、文字の色がたいてい黒なので、視覚的にごちゃごちゃしないように区別しています。
昔仕事でエクセルで表を作ったことがあったのですが、表の枠線が黒で文字も黒にして提出した際、デザインに厳しい上司から注意を受けたことがあり、そこから自分でも気をつけるようにしていますね。
色の変更を試してみたい場合は、下記ページを参考に好きな色をつけてみてください。
それではお後がよろしいようで(^ ・∀・^)
