Obsidianでブログを書く方法【完全版】

このブログ「いつもていねいに」を書いている 小田やかた です。
（プロフィール　@ottaka18）

Obsidianでブログを書く方法が自分なりにほぼ確立できましたのでシェアします。

その前に、まずはObsidianでブログを書くメリットを整理します。

１ Obsidianでブログを書くメリット

メリットは３つあります。順番に見ていきましょう。

（１）蓄積した関連ノートを参考にしやすい

１つは、コミュニティプラグイン「2HopLinksPlus」によりScrapboxのように２ステップ先のリンクしたノートなどを関連ノートとして表示できることです。Mobileでも使えます。

特にiPadやMacの場合は右のサイドバー、iPhoneの場合はノート下部に表示させると、自ずと関連ノートが目に入ります。

これにより、蓄積した過去のアイデアノートなどが自然と目に入り、見返す機会になったり、つなげて考えを深める機会になったり、新たな考えが浮かぶきっかけになります。

（２）蓄積したノートとつながりが生まれやすい

もう１つはコミュニティプラグインの「VariousComplements」のサジェスト機能によるメリットです。

テキストを入力していると、Obsidian内のノートのタイトルやリンクと部分的に一致する内容があればサジェストしてくれます。しかもそれを選択するとダブルブラケットをつけてくれますのでリンクになるんです。こちらもMobile対応。　

これにより、先ほどと同じく、過去のノートとのつながりを生んだり、今書いている記事に活かしたり、過去のノートを見返す機会になります。

また、キーワードを入力する手間が省けます。

例えば、先ほどの「VariousComplements」というキーワードを例にあげると、そのまま入力するのは面倒ですが、最初の文字の「va」と入力しただけでサジェストしてくれますで、楽に入力できます（VariousComplementsというノートかリンクがある場合）。

（３）過去のブログの記事を活用しやすい

最後は、過去のブログの記事が活用しやすいことです。

ブログの原稿をObsidianで書けば、当然、原稿がObsidianに蓄積していきます。原稿を書いているとき、キーワードなどをダブルブラケットで囲めば、前述の（１）のとおり、「2HopLinksPlus」により関連ノートに表示されます。

また、（２）のとおり、記事のタイトルやリンクに含む言葉を入力するとサジェストされたり、記事間をリンクでつなげたりできます。

過去のブログの原稿がObsidianの中にあれば、それらがつながり、過去の原稿を活用しやすくなるのです。

以上の３つはいずれも、Obsidianに蓄積した過去のノートを有効活用できる可能性を強く感じます。

それはすなわち、

ということです。

このインパクトが強く、長年、ブログのエディタとしてUlyssesを使っていましたが、完全にObsidianに乗り換えることにしました。

さて、次に本題のブログを書く手順にいきます。

２ Obsidianでブログを書く手順

ブログは、WordPressです。テーマは「JIN（ジン）」を使っていますが、JINでなくても参考にしていただける内容です。

なお、Obsidianでブログを書く手順を構築するにあたり、以下の２つにこだわりました。

• できるだけObsidianでの表示と公開したブログの表示は同じになるようにする
• MacでもiPadでもiPhoneでも同様な操作で行えるようにする

（１）全体像

まず、Obsidianでブログを書く手順の全体像を先に言うと、

という流れになります。

なぜ、Draftsを介しているのか。

コミニュティプラグインのWordPressを使えば、直接、ObsidianからWordPressへ投稿できますが、Mobile（iPadとiPhone）では動かないんです。

ちなみに、iPhoneやiPadで、アドレススキームを使ってObsidianからWordPressアプリへの投稿を試しましたが、MarkdownがHTMLに変換されませんでした。

WordPressの最新エディタであるグーテンベルクは、Markdown対応とは謳っていますが、コピペや今回のような外部からの取り込みではMarkdownに対応していないようです。

そこで、Draftsです。

Draftsは、WordPressに投稿できるActionがありますので、これを使うことにしました（詳細は後述）。

また、Markdownの変換の問題は、WordPressのプラグイン「Classic Editor」と「Jetpack」の組み合わせで解決しました。

具体的には、この２つのプラグインをインストールして有効化した後、「Jetpack」でMarkdown対応の設定をします。

設定は、Jetpackの設定画面を開き、「執筆」の「プレーンテキストのMarkdown構文で投稿やページに書き込み」のチェックをONにして「保存」を押します。

これでWordPressのエディタにMarkdownの文章をコピペや取り込んでも反映されます。

ちなみに、「Classic Editor」と「Jetpack」ではなく、「WP Githuber MD」をインストールすることでも解決できました。

ただ、「WP Githuber MD」だと、後述のX（Twitter）を埋め込むときに、ポスト（ツイート）のURLだけでは反映されず、Twitter Publishを経由させないといけないので、私は「Classic Editor」と「Jetpack」を使うことにしています。

（２）Obsidianで原稿を作成

Obsidianでブログの原稿を書くとき、画像をどうしているのか。アプリの紹介、他のブログの紹介、記事の装飾など、これらをどうしているのか。分けて説明していきます。

画像

画像は「Gyazo」にアップロードして、そのURLをObsidianに書いています。

以下の記事で紹介されている「BlogCard.md」を使うと便利です。Gyazoで得たURLをObsidianにペーストして、この「BlogCard」を発動させると、Obsidianで画像が表示されます。後述の方法でそのままWordPressへ投稿しても問題なく表示されます。

ちなみに、以下の引用とおり、GyazoのURLの場合は画像の埋め込みになりますが、URLの場合はブログカード、YouTubeのときは動画の埋め込みになります。

カーソル行のURLアドレスをブログカードに変換します。 YouTubeのときは動画の、Gyazoのときは画像の埋め込みになります。

もともとObsidianを使い始めたのは、ローカルにmdという汎用的なファイルを保存することによる存続性に惹かれたところがありますので、画像をWebサービスの「Gyazo」に頼るは少し心配ではあります。

ただ、よく考えたらWordPressがGyazoに変わっただけで構図としては変わっていないので、画像だけは割り切るしかないかなと思っています。

他のブログの記事を紹介

ブログ内で他のブログを紹介するとき、リンク形式のテキストで紹介する場合もあれば、見やすいようにブログカードにする場合もあります。

リンク形式のテキストの場合は、以前、以下の記事で紹介したMarkdown用のブックマークレットを使っています。

ブログカードは、前述の「BlogCard.md」を使っています。URLをObsidianにペーストして、「BlogCard」を発動させると、ブログカードに変換されます。

ちなみにiPhoneとiPadでは、以下で紹介されているショートカットアプリを使うこともあります。該当のブログをSafariで開いて、共有からこのショートカットアプリを発動すると、ブログカードのURLがクリップボードに保存され、自動的にObsidianが起動するので、あとはペーストするだけです。

ただ、なぜかMacだとうまくいきません（クリップボードに保存されるURLが違う）。

アプリを紹介

ブログ内でアプリを紹介する場合は、以下の記事で紹介されているスクリプトを活用させていただいています。

使い方は記事を引用します。

カーソル位置の文字列をAppStoreで検索し、一番初めにヒットしたアプリの紹介カードを出力します。対象となるのはiPhone用のアプリです。 iPad用を検索したい場合は、行頭に空白を開けてください。

思ったアプリにヒットしないときは、一度AppStoreでアプリIDを調べてみてください。共有ボタンから「リンクをコピー」でURLアドレスが取得できます。 そのアドレスの末尾に「id1225570693」といったアプリIDがあります。このIDを検索対象にすると確実にアプリを拾うことができます。

本や商品を紹介

ブログ内で本を紹介する場合は、「カエレバ風」を使っています。

ここで得たコードをそのままObsidianに貼り付けるだけです。

残念ながらObsidianでは以下の画像のとおり書影だけ反映されませんが、WordPressでは表示されます。

また、私はあまり使いませんが、本ではなく商品を紹介する場合は、類似のツールである「カエレバ」を使うとよいでしょう。

コードを紹介

ブログ内で、HTML、CSS、JavaScriptなどのコードを紹介する場合は、以下の画像（Obsidian公式ヘルプ から抜粋）のとおり、トリプルバッククォートで囲み、最初のトリプルバッククォートの後に言語名を書きます。（jsとはJavaScript）

そうすると、以下の画像のとおり、WordPressでキレイに表示されます。

ちなみにObsidianでトリプルバッククォートの後に「言語名」を書かないと、WordPressでは以下のとおり表示されます。

なお、Obsidianではトリプルではなく１つだけのバッククォートでもコードブロックはできますが、 WordPressでは以下のとおり表示されます。

枠を作る

Obsidianでは、テキストを枠で囲む装飾をしたいとき、Calloutsという機能が便利です。

ただこれは、Obsidianの独自記法なので、当然、WordPressでは反映されません。

そこで、私はHTMLで反映する囲み枠を使うことにしました。Obsidianは、HTMLを反映するため、ObsidianでもWordPressでも表示させることができるからです。

そこで活用させていただいたのがこちらのサイト。さまざまな囲み枠のデザインのHTMLが提供されています。

Obsidianで囲み枠のHTMLタグを瞬時に入力できるようコミュニティプラグインのTemplaterを活用したアクションを自作しました。

ちなみに、私はJavaScriptは理解していません。素人です。

単純に任意のテキストをタグで囲めばよいので、以前の以下の記事で紹介したスクリプトをアレンジすればよいと思って作りました。

ただ、エラーが出るので、行き詰まってしまいました。

そこで、ChatGPTに「どこが誤っているか教えて」と投げかけたところ、スクリプトを書き直してくれました。

これがかなり便利で、テキストを選択して、ボタンを押せば一瞬で枠で囲んでくれます。しかも、これがWordPressでも同じように表示されるのです。

実際、こんな感じ（iPad）。

X（Twitter）の埋め込み

X（Twitter）のポスト（ツイート）を埋め込む場合は、残念ながらObsidianとWordPressでは同一のコードではできません。

埋め込みたいポストのURLをコピーして、Obsidianでは「![](ポストのURL)」とすれば、埋め込むことができます。

ただ、WordPressでは、このままでは反映されません。コード自体も表示されず記事には何も表示されないのです。WordPressではポストのURLをそのまま書けば反映されます。

よって、私はObsidianでもWordPressでもポストを表示させたいので、Obsidianでは、「![](ポストのURL)」とURLの両方を書いて、WordPressへ投稿しています。

表を作る

Obsidianで表を作る、すなわちMarkdownで表を作るのは結構面倒です。

そこで、コミュニティプラグインの「dataloom」を使っています。このプラグインは簡単にMarkdownの表を作ることができます。

Markdownで書いた表は、Obsidianで表示されるのはもちろんのこと、WordPressへ投稿しても問題なく表示されます。

（３）Obsidianで書いた原稿をDrafts経由でWordPressへ投稿

Obsidianで原稿を書けたらDrafts経由でWordPressへ投稿します。

Obsidian→Drafts

まず、ObsidianからDraftsへの送信は、Templaterのスクリプトを使います。

@Tadashi_MAMAN さんに作っていただきました。

これでいかがでしょう?

<%*
const f = app.workspace.getActiveFile()
const title = f.basename
body = (await app.vault.cachedRead(f))
.replace(/!?[[(.+?)]]/mg, "$1")
.replace(/#[^s#]+/mg, "")

await navigator.clipboard.writeText(`${title}

${body}`)
%>

— tadashi-aikawa (@Tadashi_MAMAN) October 14, 2023

以下のコードを新規ノートにペーストしてTemplaterで登録すれば使えます（登録方法は以前の以下の記事を参照）。

※上記の.replace(/#[^\s#]+/mg, "")はタグを取り除くコードだが、前述の囲み枠のコード（カラー指定）に影響が出るため、このコードは削除した

<%* 
const f = app.workspace.getActiveFile()
const title = f.basename
const body = (await app.vault.cachedRead(f))
  .replace(/!?\[\[(.+?)\]\]/mg, "$1")
const text = `${title}${body}`

const uri = `drafts://x-callback-url/create?text=${encodeURIComponent(text)}`
window.open(uri, "_blank")
%>

なお、このスクリプトでDraftsへ送信すると、ダブルブラケットを外してくれます。

Draftsを経由させる理由は前述のとおりですが、もう1つメリットがあります。

それは、どうしてもWordPress（もしくはテーマであるJIN）特有のコードを追加したい場合、WordPressのエディタよりDraftsで編集した方が操作がしやすいことです。

具体的には、私は「吹き出し」を使いたいとき、JINの独自記法なのでDraftsで書き加えてからWordPressへ送信しています。

Drafts→WordPress

次に、DraftsからWordPressへ投稿するときはDraftsのActionを使います。

ちなみに、DraftsのActionにはMarkdownからHTMLへ変換できるものがありますが、私はMarkdownのままWordPressへ投稿しています。

というのは、一度、HTMLに変換してからの投稿を試したところ、一部、変換がうまくいかなかったのです。具体的にはアプリの紹介のコードがおかしなコードに変換され表示がおかしくなってしまいました。

よって、DraftsではMarkdownのままWordPressへ投稿しています。

DraftsのActionは、「Post to WordPress」を使っています。

このActionは、DraftsDirectoryにあるものなので、Draftsの無料版でもActionを追加して使うことができます。

初回のみWordPressのアカウントとパスワードの入力が必要です。

ちなみに、Draftsの有料版でないとActionの編集はできませんが、このActionを実行した後、WordPressの投稿一覧を開くようにActionを編集しています（1ヶ月だけ有料プランにしてActionを編集後に解約しました）。

こうしておけば、Draftsへ送信後、すぐにWordPressで公開する作業ができます。

WordPressで公開

DraftsからWordPressへ投稿されたら一度編集画面を開きます。

すると前述したWordPressのプラグイン「Classic Editor」と「Jetpack」により、Markdownが自動的にHTMLに変換されます。

あとは、アイキャッチの画像を追加し、カテゴリーやタグ、URLを設定して、公開ボタンを押すだけです。

これで、ブログの記事の公開が完了です。

３　おわりに

いかがでしたでしょうか。かなり詳細にObsidianでブログを書く方法を紹介しました。

これまでブログは、直接WordPressに投稿できるエディタが便利だと思っていましたが、それ以上に便利なのがObsidianです。

それは、「１」で書いたとおり、Obsidianに蓄積した過去の原稿やアイデアメモなどのノートを有効活用できるからです。

Obsidianにメモが増えれば増えるほど、Obsidianで書くブログの原稿のクオリティが上がることにつながるのです。　

そう考えると、どんどんObsidianに原稿を蓄積したくなりますね。

今回の記事で、ブログの原稿をObsidianで書くことに少しでも興味を持ったら、ぜひ、試してみてください。

▼こんな本も（Obsidianで作る読書ノートが出てきます）

この記事は以上です。

もし、少しでも参考になった内容があれば、下の「いいね」ボタンを押してください。励みになります！