雑記：Obsidianの編集ビューではmarginではなくpaddingを使うべきという話

以前自分のブログに書いた内容を多少修正してこちらに移転しました。

ObsidianのテーマはMinimalを気に入って使っているのですが、見出しが見にくいのだけが微妙で、CSSスニペットで上下にちょっと空白を取っています。

参考：雑記：ObsidianのテーマはMinimal(+Minimal Theme Settingsとかでちょっと修正)が一番好き | Obsidian TIPS(JP)

しばらくこれで使っていたのですが、これでもやっぱり少し見にくいので見出しの下に線を引きたいなと思った……が、あんまりうまくいかなかった、という話を書きます。

padding + border

ググったらどうやら線はborderという要素を指定すればいいとのことだったので、まずこんな感じで追記してみました。

.HyperMD-header-1,
.markdown-preview-view h1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: solid 1px;
}

上記はh1の指定のみですが、h2とかh3もそれっぽく設定しています。するとこうなりました。

なんか・・・なんか思ってたのと違う！　見出しの文字と線の間には間隔があるのですが、線と段落の間が、paddingを設定する前みたいなキツキツ感になっています。

padding + border + margin

ちょっと調べてみたところ、どうやらmarginというのはborderの内側に入るらしく、borderの外側の空間はmarginというもので指定するらしいです（CSSがすこしでもわかる人からしたら「何いってんだ今更」という感じだとは思いますが……）

参考：ボックスのボーダー・パディング・マージン — HTML & CSS入門 (nrym.org)

というわけで、試しに大きなmargin-bottomを指定してみました。深く考えず、とりあえずpaddingに合わせて!importantも指定しています。

.HyperMD-header-1,
.markdown-preview-view h1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: solid 1px;
  margin-bottom: 100px !important;
}

僕の予想ではこれで行けるはずだったのですが、やってみるとなぜか編集ビューでだけ反映されませんでした。閲覧ビューでは予想通りに機能しています。

編集ビュー

閲覧ビュー

難しすぎて頭爆発しそうになりました。

調べたところ

ちょっと調べたらニアピンの会話がObsidianのフォーラムにありました。

参考：Heading (top&bottom) spacing through CSS – Help – Obsidian Forum

フォーラムのコメントによると、こんな感じでcm-s-obsidianの指定を追加すれば編集ビューでもmarginが反映されるとのこと。一行目、cssを当てる対象の部分がちょっと変わっています。

.cm-s-obsidian .HyperMD-header.HyperMD-header-1,
.markdown-preview-view h1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: solid 1px;
  margin-bottom: 100px !important;
}

実際、これだとうまく機能します。