Obsidianで文頭を字下げ（インデント）する方法ーいつもていねいに

このブログ「いつもていねいに」を書いている 小田やかた です。
プロフィールはこちら、Xのアカウントはこちらです。

Obsidianのエディタは、文頭にスペースを入れてインデントしようとすると、以下の画像のとおり、2行目以降もインデントされてしまいます。

正確に言うと、ライブプレビューモードの場合にこのように表示されます。リーディングビューでは文頭のみインデントされて表示されます。

ただ、私は、基本的にライブプレビューモードで使っているので、この仕様では本の執筆でObsidianを使おうとすると不便なんですよね。

理想は、以下の画像のとおりにしたいのです。

実はずっとこれができずにいたのですが、先日、やり方を見つけました。

以下のサイトを参考にさせていただきました。

Obsidianで日本語小説を書く設定 | こたつろぐ

上記のサイトではObsidianのソースモードの場合のやり方が解説されていましたが、それをアレンジしたらライフプレビューモードでもできるようになりました。

ただ、これだと箇条書きリストと番号付きリストでも２行目以降がインデントしてくれません。

文頭のみインデントになるということです。

でも、リストでは以下の画像のように２行目以降もインデントがかかってほしいんですよね。それがリストというものですよね。

リストだけ除外するコードを書けばよいと思いChatGPTの回答を参考に以下のとおり修正してみましたがダメでした。

.cm-line:not(ul):not(ol):not(li) {
    text-indent: 0 !important;
    padding-inline-start: 0 !important;
}

結局、ChatGPTなどを駆使しつついろいろ試したんですができませんでした。CSS素人の私にはこれ以上無理だと諦めたとき、「相戸ゆづな＠技術書典い12でChatGPT本だしてた」さん（@aidoyuzuna）がポストで助けてくれました。

こんばんは！私も興味あって実験してみました。こんな感じでどうでしょうか？https://t.co/ouBonZnbck
— 相戸ゆづな＠技術書典い12でChatGPT本だしてた (@aidoyuzuna) August 19, 2024

ObsidianのCSSスペニットに以下のコードを書けば実現できます。CSSスニペットはObsidianの設定の中の「外観」にあります。

/* 段落インデント */
.cm-line {
    text-indent: 0 !important;
    padding-inline-start: 0 !important;
}
.mod-cm6 .HyperMD-list-line.cm-line {
    display: flex;
}

ちなみにCSSスニペットとは何？という方は以下の記事を参考にしてください。

Obsidianで文字に背景をつける方法 Obsidianでこういったワンポイントになるマークを作りたい。 Cosense（Scrapbox）でこういったマークよ...

また、iPhoneとiPadの場合では通常スニペットのフォルダにアクセスできませんが、以下の記事のようにすればアクセスできCSSスニペットをさわることができます。

Obsidianの隠しフォルダにアクセスする方法 Obsidianの設定ファイルは「隠しフォルダ」の中にあります。「.Obsidian」など「.」で始まるフォルダですね。 ...

さらには、愛読している「Jazzと読書の日々」では、代用空白を使うというアイデアを提案してくださいました。

相変わらず、私のCSSの知識のなさでしたが、こうして助けていただいてありがたい限りです。

Obsidianユーザーで、インデントすると2行目以降もインデントされるという謎仕様に苦しんでいる方は、ぜひ参考にしてください。

また、Obsidianで本の執筆を考えている方はぜひ以前の以下の記事もご覧ください。

ObsidianでKindle本の原稿を書くための検討ブログの原稿の執筆は、以下のとおり、完全にUlyssesからObsidianに移行しました。次に試しているのがKi...

Obsidianだけで本１冊書きあげることは十分可能ですよ。

【追記】2024/08/23

本記事公開後、この方法ではObsidianのリストをハイライトしたときなどに不具合が発生することがわかりました。不具合を解消したコードは以下になります。

/* 段落のインデント */
.cm-line:not(:has(.cm-list-1, .cm-list-2, .cm-list-3)) {
text-indent: 0 !important;
padding-inline-start: 0 !important;
}

.cm-line:not(:has(.cm-list-1, .cm-list-2, .cm-list-3)) {
text-indent: 0 !important;
padding-inline-start: 0 !important;
}

これでいけたかも……？？
— 相戸ゆづな＠技術書典い12でChatGPT本だしてた (@aidoyuzuna) August 22, 2024