ringocat note

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

ringocat note

iPhone、Mac、雑記の記録。”ringocat”のメモ的備忘録的ノート。

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

スポンサーリンク

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

iPhone画面

 

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

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;"

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

f:id:ringocat-note:20161008150231p:plain

 

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

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

 

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

 

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

 

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

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

 

ブログ設定画

 

ブログ設定画

 

ブログ設定画

 

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

 

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

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

 

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

 

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

 

スポンサーリンク

 

Copyright © 2016 ringocat note. All rights reserved.
プライバシーポリシー