ObsidianのReading viewを縦書きプレビューとして使う | メンバー限定記事

文章を書く上で、フォントって結構大切です。明朝体なのかゴシック体なのか。

私はノートツールはだいたいゴシック体で使っていますが、書籍の原稿は明朝体の方が良い場合もあります。ただし、いちいちフォントを切り替えるのって面倒です。

そこで考えました。書籍の原稿を置いてあるObsidianのvaultのCSSをちょっといじってみよう、と。

調査

Obsidianでは通常のモード以外に「Reading view」があり、このviewのときだけfont-familyを変更すればよさそうです。

ObsidianでCSSをいじる場合は、まずHTMLの調査からです。

option + command + i を押してデベロッパーツールを起動します。

メニューの一番左にある矢印っぽいアイコンをクリック。その後、Obsidianの画面に戻るとカーソルでHTMLの部品が選択できるようになっているので、ひとまず何かを選びます（今回は何でも構いません）。

HTMLの中身と当たっているCSSが表示されています。ここから目的のものを探します。今回は「Reading view」の全体を探したい。

とは言え、Reading view がどう実装されているのかがまだわかりません。一番大きなdivにreading_viewクラスが付いたり消えたりしているのかもしれません。とりあえず、このままReading viewに切り替えてみます。

markdown-reading-view が見つかりました。このスタイルを変更すればよさそうです。

で、気がついたですが、Obsidianでは、source-viewとreading-viewは常に生成されていて、片方が選ばれているときはもう片方がdisplay:none;になっているようです。勉強になりました。

CSSの変更

とりあえず、対象のDivがわかったので、あとはスタイルを書き換えるだけです。stylec.cssをいじります。もともとの設定でfont-familyを持っているのは、markdown-preview-view です。

おそらく source-viewの方にもこれが使われているでしょうから、以下のように切り分ければOKです。

.markdown-reading-view .markdown-preview-view {

font-family:”Hiragino Mincho ProN”,”YuMincho”,”Noto Serif JP”,serif;

}

本文がちゃんと明朝体になっています。viewの切り替えは、command + e で行えるのでかなりサクサクした動作です。いい感じ。

ここで閃いてしまいました。明朝体にするなら、いっそ縦書きにすればいいんじゃね？　と。