はてなブログのMarkdown記法にて、挿入した図に枠線を設定する方法

概要

はてなブログのMarkdown記法で図を挿入すると、編集画面では次のようになります。

[f:id:ishii-akihiro:20191002122500p:plain]

背景が同色だと見辛いので図枠が必要ですが、個々に設定する方法がわかりませんでした。

解決方法

個々に設定する代わりに、記事ごとにすべての図に対して図枠を付ける方法がわかりました。
記事の冒頭にて、次のようにimgタグのスタイルを設定すればオッケーです。

<span><style>
img{
display: inline-block;
box-sizing: border-box;
border: solid 1px #333;
}
</style></span>

枠線の色や太さを変えたい場合は、borderプロパティの内容を適宜変更してください（CSSとかスタイルシートで検索すると詳しい情報が見つかると思います）。

参考

スタイルの適用については、下記の記事を参考にさせていただきました。
blog.uchiten.info

（2020年3月7日）追記

プロフィール欄にアイコンとして挿入したimg画像まで枠線が設定されてしまいました。

記事に該当するHTMLはentry-innerクラスのdiv要素で囲まれています。そのため、冒頭に記述するスタイルを次のように指定すれば、サイドバーは適用対象から外せます。

<span><style>
.entry-inner img{
border: 1px solid #000;
}
</style></span>