無料はてなブログ🐾画像に枠をつける

画像に枠をつける

HTMLに少し書き加えるだけで、枠を付けれます。

手順

「見たまま編集」で画像を挿入する。

プレビューを見てみます。

背景が白の画像なので、このままではどこまでが画像か分かりづらいです。

「HTML編集に切り替える」

「img」と「src」の間に以下の文を追加する。

style="border:solid 1px #BDBDBD;"

プレビューをみてみます。

枠がつきました。

色とか太さとか色々

太くする

style="border:solid 5px #BDBDBD;"

色を変える

style="border:solid 1px #FFDE59;"

色んな枠線

二重線

style="border:double 5px #BDBDBD;"

※ダブルは3px以上にしないと二重線になりません。

破線

style="border:dashed 5px #BDBDBD;"

点線

style="border:dotted 5px #BDBDBD;"

※1pxでも良いけど、細かすぎると分かりづらいです。

影もつけれちゃいます

style="box-shadow: 5px 5px 10px"

この記事の手順のとこでは、これ使ってます。

色々自分好みにできそうです。