Obsidianのリンク表示を変更する

ObisidianはURLを直貼りしても自動でリンクに変換してくれるので、これを利用してリンク表示をちょっと変える方法。
こんな感じになる。

リンク先のページタイトルやサムネイルを取得して表示、みたいなことはできまへん。それがしたい場合は以下に紹介するプラグインを使いましょう。
あくまでURLリンクを目立たせる、それだけのカスタマイズ。

CSSに追記

Obisdianの設定から「外観」→「CSS」と進み、CSSが格納されているフォルダを開いて、適切なテキストエディタで編集する（MacならCotEditorとかオススメ）。

以下を追加して有効化する。

a.external-link {
  display: block;
  padding: 20px 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-bottom: 15px;
  color: #333;
  text-decoration: none;
  position: relative;
}

a.external-link:hover {
  border-color: #0073aa;
  background-color: #e1f4ff;
}

a.external-link::before {
  content: "🔗"; 
  font-size: 16px; 
  margin-right: 10px; 
  position: absolute; 
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

a.external-link span {
  margin-left: 40px; 
}

a.internal-link {
  color: #0073aa;
  text-decoration: underline;
}

🔗という絵文字部分はアイコン代わりに使っているものなので、お好きなものに変えてね。

プラグインを使う方法もあるよ

いいな〜と思ったのは以下。

Auto Card Link

リンクカード形式にしてくれる。見栄えを重視するなら。

Auto Link Title

自動でタイトルを取得して、書き換えてくれる。

最終的にしたかったこと

Obisidianをブログエディタとして運用しているんだけど、上記プラグインを使うと、投稿するときに下書き設定にしていちいちブラウザから記事を修正しないとならんかったのが面倒だった。
WordPress（あとSWELL）には、1行内にURLだけが記載されていると自動でリンクカードに変換してくれる機能がある。これを活かしつつ、Obisidian内でのリンク表示を変えたいと思ったら、今のところCSSをいじるくらいしか思いつかなかったので。

Obisidian内だけでリンク表示を変えたいと思ったら、素直にプラグインを使うのが良いと思う。
今回はあくまでリンクの表示だけを目立たせるCSSカスタマイズだけど、同じことを考えたどこかの誰かの役に立てば。