A CAT'S EDEN

ツールや機能の紹介と、ゲームや落語などの趣味について。



【ブログ】画像に枠線をつける方法 ※コピペで簡単

こんばんは、発狂ねこです(^ ・∀・^)グヘグヘ

今回の記事では、ブログ記事内の画像に枠線をつける方法を説明します。

 

枠線って要るの?

まず、枠線の有無でどれだけ見え方に差が出るか、下記を確認してみてください。

 

枠なし

f:id:hakkyooneko:20170926202154j:plain

 

枠あり

f:id:hakkyooneko:20170926202154j:plain

 

いかがでしょうか。

枠があったほうがメリハリが付いて、圧倒的に見やすいですよね。

視覚的なことだけでなく心理的な事を言うと、枠が無い場合は(画像内背景と記事の背景が類似した色であるほど)画像と背景の境界が曖昧であり、意識していなくても不安感を覚えてしまうものなのです。

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を別の命令にすれば線の種類を変えられます(あまり使わないので詳細説明は省きます)。

ちなみに上記コピペのテンプレの色はダークグレーですが、黒にしていないのは理由があり、文字の色がたいてい黒なので、視覚的にごちゃごちゃしないように区別しています。

昔仕事でエクセルで表を作ったことがあったのですが、表の枠線が黒で文字も黒にして提出した際、デザインに厳しい上司から注意を受けたことがあり、そこから自分でも気をつけるようにしていますね。

 

色の変更を試してみたい場合は、下記ページを参考に好きな色をつけてみてください。

HTML color codes

 

それではお後がよろしいようで(^ ・∀・^)