Obsidianの幅を自分好みにカスタマイズする

Obsidianをデフォルト設定で使っていると
「行幅、ちょっと狭くない……？」
と感じることはないでしょうか。

たとえば、

• 表を書くときにもう少し幅が欲しい
• Mermaidの図が横スクロールになってしまう
  など私は困りました。
  ↓余白があって幅を活かせていない

１つの方法としては下記があげられます。
ですが、こちらだと広がりすぎて見にくくなったり最適な現在の環境にあった幅にはなりません。
設定の Editor > Readable line length をオフ

この方法だと左詰めになってしまう。

今回は、この「帯に短し襷に長し」な問題を、CSS Variables（CSS変数） を上書きすることで解決する方法を紹介します。

なぜCSS変数なのか？

Obsidianのレイアウトは、CSS変数（Custom Properties）で管理されています。
width: 1000px !important; のように直接上書きすることもできますが、これだとテーマによっては表示が崩れる原因になります。
Obsidianが用意している変数の値を再定義する方が、テーマとの相性も良く、安全です。

---

手順

--file-line-width という変数を上書きするCSSスニペットを作成します。

1. スニペットファイルの作成

1.Obsidianの Settings > Appearance を開く
2. 最下部の CSS snippets セクションで、folderアイコンをクリック

2. CSSの記述

vi custom-line-width.css

以下のコードを記述します。

デフォルトは約700pxですが、コードの視認性と文章の読みやすさのバランスを考えると、950px〜1000px あたりがちょうど良いと思います。

body {
  --file-line-width: 950px;
}

:wq で保存して終了します。

3. 設定の適用

1. Obsidianの Settings > Appearance を開く
2. 最下部の CSS snippets セクションで、リロードアイコンをクリック
3. custom-line-width が表示されるので、トグルを ON にする
   

結果

中央寄せのレイアウトはそのままに、表示幅だけを広げることができました。
こちらはサンプルなので自分の環境に合わせて変えてみてください。