生活の跡

個人的な備忘録

はてなブログの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画像まで枠線が設定されてしまいました。 f:id:ishii-akihiro:20200307210248p:plain

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

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

f:id:ishii-akihiro:20200307211110p:plain
サイドバーのimg画像にはCSSが適用されなくなった