技術メモとかやることリスト、ブログネタなどを残すために色々アプリを使ってきたが、最近はObsidianをメインにしている。 過去にはmemolist.vim、inkdrop、Quiverを使ってきたが、今の所Obsidianで落ち着きそう。
外観
heading要素のフォントサイズが大きくなるのが嫌なので、minimalテーマをベースにしている。 このテーマだけだとh1, h2, h3の区別がつきにくいので、以下のCSSスニペットを使って背景色や下線を引くようにした。 アクセントカラーを使って設定することで、気分によってアクセントカラーを変えても追従してくれるようにした。
/* h2の背景をアクセントカラーにする */ body { --h2-color: var(--color-accent-1); } .markdown-preview-section h2, .HyperMD-header-2, .cm-header-2 { color: rgb(232, 232, 232); background-color: var(--h2-color) !important; padding: 10px 0px 10px 5px !important; margin-bottom: 5px !important; }
/* h3〜h6の文字をアクセントカラーにする */ body { --h3-color: var(--color-accent); --h4-color: var(--color-accent); --h5-color: var(--color-accent); --h6-color: var(--color-accent); } .markdown-preview-section h3, .HyperMD-header-3, .cm-header-3 { color: var(--h3-color) !important; } .markdown-preview-section h4, .HyperMD-header-4, .cm-header-4 { color: var(--h4-color) !important; } .markdown-preview-section h5, .HyperMD-header-5, .cm-header-5 { color: var(--h5-color) !important; } .markdown-preview-section h6, .HyperMD-header-6, .cm-header-6 { color: var(--h6-color) !important; }
/* h3に下線を引く */ body { --border-header-color: var(--background-primary, black); } .HyperMD-header-3, .markdown-preview-view h3 { border-bottom: solid 1px var(--h3-color); border-image-slice: 1; padding-bottom: 5px !important; }
細かいところだが、インラインコードがハイライトされず認識しにくかったので、これもアクセントカラーを使ってわかりやすくした。
.cm-inline-code, .markdown-preview-view code { background-color: rgba(255, 229, 100, 0.07) !important; color: var(--color-accent-2) !important; border-radius: 3px; padding: 2px 4px; font-size: 0.9em; }
あと、何故かエディタの表示がセンタリングされて困っていたが、「読みやすい行の長さ」をOFFにすると左寄せになってくれた。
CSSスニペットの拡張方法の調べ方
検索してもなかなか目的の内容に辿り着かなかったが、ChatGPTに聞いたら一発で返してくれて体験が良かった。
![[ヤヨイ] 冷えとり手袋 内絹外綿 ハンドウォーマー MAX (指長タイプ) 指なし 手袋 日本製 ブラック MAX](https://cdn-ak.f.st-hatena.com/images/fotolife/w/waniji/20240407/20240407005117.jpg "[ヤヨイ] 冷えとり手袋 内絹外綿 ハンドウォーマー MAX (指長タイプ) 指なし 手袋 日本製 ブラック MAX")
