Obsidianで文字に背景をつける方法

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

Obsidianでこういったワンポイントになるマークを作りたい。

Cosense（Scrapbox）でこういったマークよく使っていたんですよね。

Obsidianではどう作るか。

要は文字（テキスト）に背景を入れる方法ということです。

まず結論から。

こうやって書くと、

<span class="green">関連</span>

<span class="red">重要</span>

先のマークになります。

では、こうするためには何をしたらよいか。

ObsidianのCSSスニペットで以下のとおり書く必要があります。

CSSスニペットとはObsidianの設定＞外観で表示される以下の画面ですね。

CSSスニペットは、隠しフォルダにあるので、iPadとiPhoneではOwlfilesを使うと便利。

Owlfiles – File Manager

Skyjos Co., Ltd.無料posted withアプリーチ

iPhoneとiPadでの隠しフォルダへのアクセスの方法は以前記事にしていますのでご参照ください。

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

隠しフォルダにあるCSSスニペットのファイルに以下を書きます。

/* テキストの背景(編集画面) */
.cm-style{   
.green {background-color: color:  
.red {background-color: color:  
}

/* テキストの背景(プレビュー画面) */
.markdown-preview-view Style{
.green {background-color: color:  
.red {background-color: color:  
}

これだけです。

これで先ほどのとおり、

<span class="green">関連</span>

<span class="red">重要</span>

と書けばこうなります。

さらに、上記のコードを簡単に書く方法を紹介します。

コミュニティプラグインのTemplaterのフォルダに以下のとおり書きます。

タイトルは「background-green」とでもしておきましょう。

<%*
s = tp.file.selection()
if(s){
  return "<span class=red>" + s + "</span>"
}else{
  return "<span class=red></span>"
}
%>

これをコミュニティプラグインのTemplaterに登録します。

さらに、コマンドパレッドでピン留めしたり、ホットキーを登録しておけば素早く呼び出せます。

実際に使うときは、テキストを選択して、上記のコードを呼び出してください。テキストを選択していないとコードのみが記載されます。

この記事は以上です。

ABOUT ME

小田やかた

ブロガー＆Kindle作家。二人の子どもを持つ共働きサラリーマンです。（プロフィールの詳細）iPhone・iPadアプリを活用した効率的なインプットとアウトプットの方法を発信しています。