目次
やったこと
諦めたこと
こんなことができるのか！
疑問と希望
- グラフビューって役に立つの？
- 複数記事に一括でタグ付けしたい
テーマのインストール
Monokai が好きなので Monokai を探したのですがありませんでした。ノーマル状態でもいいような気がしましたが、なんとなく Minimal を選びました。特筆すべきことはありません。
CSSスニペットの記述
Obsidian は Chromium で動いているようで、開発者ツールが使えます。 Ctrl + Shift + I で開きます。右クリックから開いてくれるとポイントした要素の HTML にフォーカスされて助かるのですが、そういうサービスはないようです。 で、四苦八苦して CSS をちょろっと書きました。下のとおりです。 元からなのかテーマに含まれているのか一部に !important の記述があり、上書きするのに CSSスニペットでも !important の記述が必要でした。 また、後述しますが margin の設定ができませんでした。 padding を使っています。
body {
--font-color-primary: #f1eee9;
--accent-color-primary: #91c581;
--dark-color-primary: #272822;
--dark-color-deep: #1e1f1c;
--dark-color-dawn: #2e302b;
--dark-color-enlightenment: #30312c;
}
.nav-folder-title-content {
color: var(--accent-color-primary);
}
.nav-file-title-content {
color: var(--font-color-primary);
}
.workspace-tabs .workspace-leaf {
background-color: var(--dark-color-deep);
}
.is-hidden-frameless.theme-dark .workspace-ribbon.mod-left,
.is-hidden-frameless.theme-light .workspace-ribbon.mod-left,
.workspace-ribbon.mod-left:before,
.workspace-tab-header-container {
background-color: var(--dark-color-dawn);
}
.workspace-split.mod-root .view-header,
.workspace-split.mod-root .is-focused .workspace-leaf.mod-active .view-header,
.workspace-split.mod-root .workspace-tab-header.is-active,
.workspace-split.mod-root .workspace-tabs.mod-top,
.workspace-split.mod-root .workspace-tabs:not(.mod-stacked),
.workspace-split.mod-root .view-content {
background-color: var(--dark-color-primary);
}
.workspace-tab-header.is-active {
box-shadow: 0 0 0 var(--tab-outline-width) var(--dark-color-enlightenment);
background-color: var(--dark-color-primary);
}
.workspace-split.mod-root .workspace-tab-header.is-active::before,
.workspace-split.mod-root .workspace-tab-header.is-active::after {
box-shadow: inset 0 0 0 var(--tab-outline-width) var(--dark-color-enlightenment), 0 0 0 calc(var(--tab-curve) * 4) var(--dark-color-primary);
}
.cm-contentContainer {
color: var(--font-color-primary);
}
/*
equivalent to
h?
*/
.cm-contentContainer .cm-line.HyperMD-header {
padding-bottom: 0.8em;
color: var(--accent-color-primary);
}
/*
equivalent to
h2
*/
.cm-contentContainer .cm-line.HyperMD-header-2 {
font-size: 20px !important;
}
.cm-contentContainer .cm-line.HyperMD-header-2::after {
content: "";
display: block;
width: 100%;
height: 0;
border-top: 1px solid var(--accent-color-primary);
}
/*
equivalent to
h3
*/
.cm-contentContainer .cm-line.HyperMD-header-3 {
font-size: 20px !important;
font-weight: bold;
}
/*
equivalent to
h4
*/
.cm-contentContainer .cm-line.HyperMD-header-4 {
font-size: 16px !important;
}
/*
equivalent to
h5
*/
.cm-contentContainer .cm-line.HyperMD-header-5 {
font-size: 12px !important;
}
/*
equivalent to
p
*/
.cm-contentContainer .cm-line:not(.HyperMD-header, .HyperMD-list-line, .HyperMD-codeblock, .HyperMD-quote) {
text-align: justify;
font-feature-settings: "aalt";
}
/*
equivalent to
p + p
*/
.cm-contentContainer .cm-line:not(.HyperMD-header, .HyperMD-list-line, .HyperMD-codeblock, .HyperMD-quote) + .cm-line:not(.HyperMD-header, .HyperMD-list-line, .HyperMD-codeblock, .HyperMD-quote) {
padding-top: 0.5em;
}
/*
equivalent to
ul,
li
*/
.cm-contentContainer .cm-line .cm-formatting-list-ul {
margin-right: 5px;
margin-left: 2px;
}
.cm-contentContainer .cm-line .cm-formatting-list-ol {
margin-right: 3px;
margin-left: 0;
}
.cm-contentContainer .cm-line .cm-formatting-list {
color: var(--accent-color-primary);
}
.cm-contentContainer .cm-line .list-bullet::after {
background-color: var(--accent-color-primary);
}
/*
equivalent to
blockquote
*/
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote::before {
border-left-color: var(--accent-color-primary);
}プラグインのインストール
プラグインはよく分かっていません。とりあえず TagFolder をインストールしました。
TagFolder
タグがフォルダみたいに表示されます。左上にツリーを描いたアイコンが追加されますのでこれを選択することで表示されます。 ですが、僕の環境では表示されませんでした。なんじゃこりゃ。解決方法としてまず TagFolder にホットキーを割り当てます。次にホットキーで TagFolder を開きます。そうすると左上にアイコンが出現しました。よかった。
CSSスニペットでの margin の設定
編集画面の要素に margin-top, margin-bottom を設定すると、編集画面で末行の文字列をマウスで選択することができなくなりました。 margin を設定する要素とか、 margin の量によって事情が変わってくるのですが、それだと思いどおりにならないので、 margin-top, margin-bottom は諦めました。 Chromium の不具合なのかなぁみたいな気がしているのですがよく分かりません。
ul, ol, pre, blockquote, table の上下の余白
上述で margin-top, margin-bottom を諦めたわけですが、余白を作るのに padding では無理でした。編集画面での話です。 例えば通常の HTML では pre と code で二重にくくります。 code が黒背景のコード部分を担うなら pre に padding を設定することが可能です。 しかし Obsidian の編集画面では 1 行ごとに一つのタグが使われていて、コードブロック全体を二重にくくっているわけではありません。 padding を設定すると黒背景のコード部分に余白ができてしまいます。
<!-- 通常の HTML -->
<pre><code class="language-css">p {
...
}</code></pre>
<!-- Obsidian の編集画面 -->
<div class="language-css">p {</div>
<div> ...</div>
<div>}</div>なので余白は改行で表現することにしました。
全文検索
特筆することでもないのですが、全ての文書から検索してくれます。素晴らしい！
正規表現による検索
これまた特筆することでもないのですが、検索窓で / に続けて正規表現を入力して検索することができます。素晴らしい！
グラフビューって役に立つの？
Obsidian を使おうと思ったのはグラフビューの存在です。なにか素敵な感じがします。日頃のアイディアが有機的に結びついて大きな成果に至れるようなワクワク感があります。 ただまぁ冷静に考えて、本当にそんなことになるのでしょうか。見かけ倒しのおもちゃみたいなものなんじゃないのか、そんな不安があります。
複数記事に一括でタグ付けしたい
Evernote ならできるんですが、 Obsidian でできるんでしょうか。とりあえず記事の複数選択ができませんね。ググってもそれらしい話にヒットしません。技術的に難しいのでしょうか。これは不便だなぁ。
