ObsidianカスタムCSS：スクロールバーを隠す方法

ObsidianのカスタムCSSを活用すると、エディタやプレビュー画面のデザインを自由にカスタマイズできます。本記事ではスクロールバーを隠す方法について解説します。

スクロールバーを隠すCSSコード

::-webkit-scrollbar {
    visibility: hidden;
    background-color: transparent;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    visibility: hidden;
}

::-webkit-scrollbar:hover {
    visibility: initial;
}

::-webkit-scrollbar-thumb:hover {
    visibility: initial;
}

各プロパティの解説

1. ::-webkit-scrollbar

   • visibility: hidden; → スクロールバー自体を非表示にする。

   • background-color: transparent; → 背景を透明にする。

   • width: 10px; → スクロールバーの幅を10pxに設定。

2. ::-webkit-scrollbar-thumb

   • visibility: hidden; → スクロールバーの「つまみ（thumb）」を非表示にする。

3. ::-webkit-scrollbar:hover

   • visibility: initial; → マウスカーソルがスクロールバーの領域に入ると、スクロールバーが表示される。

4. ::-webkit-scrollbar-thumb:hover

   • visibility: initial; → マウスカーソルがスクロールバーのつまみ部分に触れると、つまみが表示される。

Obsidianでの適用方法

1. CSSファイルを作成する

   • obsidian.css などの適当な名前のファイルを作成します。

2. カスタムCSSを設定する

   • 上記のCSSコードをコピーして、作成したCSSファイルに貼り付けます。

3. Obsidianの設定でCSSを適用

   • 設定 → 外観 → カスタムCSS から作成したCSSを適用します。

まとめ

このカスタムCSSを使用すると、Obsidianのスクロールバーを通常は非表示にし、マウスホバー時のみ表示させることができます。より洗練されたUIを作成したい場合に役立ちます。