Obsidianの活用について(1)


**＜本記事のターゲット層＞**

- Obsidian をもっと使いこなしたい人
- Obsidian の設定が多すぎて困っている人
- Obsidian の設定から便利機能だけかいつまんで知りたい人

次の記事は[こちら](https://qiita.com/ochtum/items/61bbd1912c266fc59d64)
次々回の記事は[こちら](https://qiita.com/ochtum/items/90c72ac6c0251326a26a)

## はじめに

`Obsidian`をさっそく触り始めているのですが、色々と知った便利なこと、気づいてしまった困りごとがあり、情報共有したいなと思った次第です。

皆様のお役に立てればと思います。

※[Obsidian 日本語ヘルプ](https://publish.obsidian.md/help-ja/%E3%81%93%E3%81%93%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B)

## 🔴 1. デザイン回りについて

Markdown に慣れている人はこの記事を読んでいる方々の中にどれくらいおりますでしょうか。慣れている人ならば知っているかもしれないですが、慣れていない人の中には「デザインが単調だな、もっと見やすくできないのだろうか」と思う方も多いことでしょう。

実は Markdown は CSS をサポートしているツールも多くありまして、Obsidian でも CSS を使うことができます。

といっても CSS を知らない方もいらっしゃると思いますので軽くご説明させて頂きます。CSS とは、Cascading Style Sheets の略で、Web ページの見た目をデザインするためのルール（プログラむ言語）の名前です。

「CSS？イチイチそんなものを書いていられない！！」

大丈夫です！！ご安心ください！！！
CSS は本職の方でもイチから書くのは大変です。自分でデザインするのは大変ですが、予め有志の方が作成したデザインが公開されているので、そこから好きなデザインを選択するだけでよいのです。

歯車アイコン -> 外観 -> テーマの`管理`ボタン -> 表示されたテーマからお好みのものをクリック -> インストールして使用をクリック

これだけでデザインが適用されます。但し、注意点としまして、公開されているデザインの中には設定が必要なもの(コミュニティプラグンのインストールが必要になります)や、`CSSスペット`というものだけが提供されているものもあります。

それでも使いたい場合は、説明を読みつつ、ご利用されるとよいでしょう。手間だなと思う場合は、適用するだけで反映されるものを探してください。

## 🔵 2. フォントについて

基本的にはフォントにこだわりを持つ人は少ないかもしれません。しかし、フォントにこだわりがある人でも大丈夫です。

端末にインストールされているフォントからお好きなものを選ぶことができます。

歯車アイコン -> 外観 から
-> 以下の変更したいフォントの`管理`ボタンをクリック -> 「フォント名を入力･･･」でフォント名を検索し、適用したいフォントを選択し`追加`をクリックします。

- インターフェースフォント：メニューなどで使われるフォントです。
- テキストフォント：Note を書くときに使われるフォントです。
- モノスペースフォント：~~いわゆる「開発者」と言われている人たちしか使わないものになります。~~[プロパティ](https://qiita.com/ochtum/items/61bbd1912c266fc59d64#5-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)は YAML フロントマターで記述します。コードブロックやフロントマターで使用するフォントです。

※「フォント名を入力･･･」でフォントを探すとき、フォント数が多すぎるため下の方にあるフォントが表示されません。検索しないと目的のフォントが見つからない場合が多いです。

私がおすすめするフォントは以下のものになります。

- インターフェースフォント：ゴシックが好きな方は、[Noto Sans Jp](https://fonts.google.com/noto/specimen/Noto+Sans+JP)、明朝が好きな方は、[Noto Serif Jp](https://fonts.google.com/noto/specimen/Noto+Serif+JP)をオススメいたします。

オススメ理由につきましては、Noto 系フォントは見やすいため人気があるためです。[Google](https://x.com/googlejapan/status/1576346267730460675)が開発したフォントとしても有名です。

インストールの仕方については、以下の操作を行い、`Obsidian`を再起動して頂くと、フォントが選択できるようになります。

- (1)上記のリンクを開く
- (2) 右上の`Get font`をクリック
- (3) `Download all`をクリック
- (4) ダウンロードした zip ファイルを展開
- (5) 中にある`NotoSansJP-VariableFont_wght.ttf`をダブルクリック
  → Noto Serif Jp をダウンロードした場合は`NotoSerifJP-VariableFont_wght.ttf`です
- (6) `インストール`をクリック
  - テキストフォント：インターフェースフォントと同様に、ゴシックが好きな方は、[Noto Sans Jp](https://fonts.google.com/noto/specimen/Noto+Sans+JP)、明朝が好きな方は、[Noto Serif Jp](https://fonts.google.com/noto/specimen/Noto+Serif+JP)をオススメいたします。
  - モノスペースフォント：こちらは宗教が色々ありそうですが、私は[Monospace Xenon Var](https://github.com/githubnext/monaspace)をオススメいたします。モノスペースは Github が制作した次世代開発体験のためのコーディングフォントです。米 GitHub は 2022 年より、次世代の開発エクスペリエンスを模索・実現する「GitHub Next」という取り組みを進めており、モノスペースはその成果の一つです。

インストールの仕方については、以下の操作を行い、`Obsidian`を再起動して頂くと、フォントが選択できるようになります。

- (1)上記のリンクを開く
- (2)右側の`Releases`リンクを開く（Latest と表示されているバージョン部分です）
- (3)一番下にあるダウンロードファイルがまとめられているところから、`monospace-vxxxxx.zip`という形式のファイルをダウンロード
- (4)zip ファイルを展開し、`fonts\variable`の中にある`MonaspaceXenonVarVF[wght,wdth,slnt].ttf`をダブルクリック
- (5) `インストール`をクリック

## 🟢 3. ちょっと便利になる設定

### ✅ 3-1. 行番号を表示する

設定から エディタ -> 行番号の表示を ON

### ✅ 3-2. スライド

Markdown からスライドを作成する機能です。`---`で区切った部分がスライドとして分割されるようになります。
設定から コアプラグイン -> スライドを ON

### ✅ 3-3. Web viewer

`Obsidian`の中で Web ページを見ることができるようになります。シングルモニターで操作する人には便利だと思います。メモをとるときに使う参考ページを表示したり、Chat-GPT を表示して質問をしながらメモを取ることもできます。

- (1) 設定から コアプラグイン -> Web viewer を ON
- (2) 左側にあるメニューアイコンから`コマンドパレットを開く`をクリック
  ![image-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/381e6dca-5663-4ad5-b5b0-0fec549a1a7a.png)
- (3) 「コマンドを入力･･･」で`web`と入力し、`Web viewer: Open web viewer`をクリック

もし、メモページに Web viewer のタブが表示された場合は、タブをドラッグして右側のペインの中に移動させましょう。
![89f62fc2e12cedb1e592783cd57ffae3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/382593ba-21bb-44ce-a0e1-a75c67f84d63.gif)

Web viewer の表示が狭い場合は、ドラッグすることで調整できます。
![d3dc3b8eae1e1b577bd974f24ec51a67.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/e45dbec0-82a8-4410-8779-f3190e0cbbf3.gif)

### ✅ 3-4. ペインレイアウトの保存

ペインレイアイト、サイドバーの状態(展開されているか折りたたまれているか)、ファイルのオープンステータスを保存することができます。地味に便利です。

なぜかというと、ペインを誤って閉じてしまうと元に戻すのがめんどくさいからです。実際に`Obsidian`の操作が分からないときに誤って閉じてしまい、それを元に戻す方法が分からずとまどいました。

- (1) 設定から コアプラグイン -> ワークスペースを ON
- (2) サイドバーから`ワークスペースレイアウトを管理`(新たに表示されます)をクリック
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/828a4bf4-e128-4128-bb23-c512de32e0d3.png)
- (3) 「現在のワークスペースレイアウトを保存･･･」に任意の名称を入力し、`保存`をクリック

### ✅ 3-5. タグペイン

皆さまのご想像通りの`タグ`です。`#XXX`のような形で、X や Instagram、Facebook、Linkedin、Tictok、Youtube などの SNS と同じような形でタグを埋め込むことができます。

気をつけなければいけないのは、`#`とタグ名の間に半角スペースを入れてしまうと Markdown の見出し 1 として解釈されてしまうので、`#`とタグ名はくっつけてください。

詳細は[こちら](https://publish.obsidian.md/help-ja/%E3%82%AC%E3%82%A4%E3%83%89/%E3%82%BF%E3%82%B0%E3%81%AE%E6%93%8D%E4%BD%9C)

### ✅ 3-6. グラフビュー

`Obsidian`の肝となる機能です。[内部リンク](https://publish.obsidian.md/help-ja/%E3%82%AC%E3%82%A4%E3%83%89/%E5%86%85%E9%83%A8%E3%83%AA%E3%83%B3%E3%82%AF)については`[[`と入力することで、内部リンクを挿入するファイルの候補を表示することができますが、別のファイルをドラッグすることでも内部リンクを挿入することができます。
![ac06cff8041ca38c6d8b56b7ba12064d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/b1f9c955-0460-40ab-bc35-f982f8a03274.gif)

さて、肝心のグラフビューですが、サイドバーからグラフビューアイコンをクリックするだけで表示されます。簡単ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/24f79232-41ed-4a1b-be36-81c0b253cc1c.png)