Obsidianの改ページを見える化する方法

Last updated at 2025-07-02Posted at 2025-05-26

何が問題か

Obsidianでは、マークダウン内の改ページしたいところで
以下のタグを挿入すれば改ページができます。

<div style="page-break-after: always;"></div>

ただ、これマークダウンプレビュー時には空のdivタグなので何も表示されず、
後でどこに改ページを仕込んだか間違いなく忘れてしまいます。

これでは、メンテナンス性が良くないですよね。

ということで、Wordpressのように、
改ページを仕込んだ場所を見える化します。

もちろん、印刷時(PDF出力時)にはこのラベルは表示されず、
単に改ページとして機能します。

備考: Better Export PDFのPDFプレビューで見ると、改ページが機能しません。
しませんが、実際にPDF出力すれば、ちゃんと改ページされているのでご安心ください。

実装

これをObsidianのカスタムCSSスニペットに追記 or 新規作成してください

設定 > 外観 > CSSスニペット

/Obsidian Vaults/.obsidian/snippets/pagebreaks.css

/* 改ページ用divの表示設定 */
div[style*="page-break-after: always"] {
    border-top: 2px dashed #888;
    margin: 1em 0;
    position: relative;
}

div[style*="page-break-after: always"]::before {
    content: "[page break]";
    position: absolute;
    top: -0.8em;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--background-primary);
    padding: 0 1em;
    color: #888;
    font-size: 0.9em;
}

/* 印刷時には視覚的表示を無効化 */
@media print {
    div[style*="page-break-after: always"] {
        border-top: none !important;
        margin: 0;
    }

    div[style*="page-break-after: always"]::before {
        content: "";
        display: none;
    }
}