MENU

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

  • URLをコピーしました!

当ブログでは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^)丿

 

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ringocatのアバター ringocat いつか猫になる人

大好きなアップルと大好きな猫を掛け合わせた名前のワタシ ringocat 。アップル歴約30年で、元はとある職人でした。猫命の妻と2人暮らし。
夢は猫と一緒に暮らせる家に引っ越すことでしたが、2019年7月、家の前で怪我をしていた猫を保護することとなり、現在は猫と一緒に暮らせる一軒家へ引っ越し。猫も3匹に増えました!
当サイトでは、アップル関連とガジェット関連の記事をUPしていきます。

コメント

コメントする

目次