見出し画像

SiYuan Notes をカスタマイズ

YU

こんばんは。今回は、SIYuan Notes で、プラグインやテーマを使う方法、カスタムCSS (コードスニペット) で微調整をする方法をご紹介します。



拡張機能 について

マーケットプレイスから拡張機能をダウンロードして、利用できるようになります。

マーケットプレイスの使い方

① 設定画面 を開く

左上のアイコンで、メインメニューが開きます。
[ 設定 ] を選択します。

メインメニューから [ 設定 ] を選ぶ

② マーケットプレイス の画面を開く

設定画面の左側のタブから、[ マーケットプレイス ] を選ぶ

マーケットプレイス

マーケットプレイスには拡張機能が 5種別 ある

  • プラグイン

  • テーマ

  • アイコン

    • 少なめ

  • テンプレート

    • 現在、日本語のものは無し

  • ウィジェット

マーケットプレイスでは、上にあるタブを使って、種別を切り替える

それぞれの説明ページは、英語や中国語で記載されています。

(使い勝手のよい拡張機能に感しては、私が少しずつ日本語に対応させていくつもりです)

③ プラグインをさがす

プラグインのタブに移り、入力欄で検索をおこないます。
各プラグインのマニフェストに書かれた単語や説明にマッチする場合に、その検索結果が表示されます。

動作しなくなっているプラグインも含まれているので注意。
日本語では検索できないので、英単語を入れてください。

(各拡張機能の提出マニフェストに記載されたワードや説明文にマッチする場合に、検索結果に表示されます)

プラグインを探していると時間を浪費してしまうので、次の項目の「おすすめのプラグイン」を参考にしてください。

プラグイン タブの入力欄で検索



おすすめのプラグイン

  • Background Grid

「grid」と入力して検索

分かりにくいですが、次の画面のような感じで、ノートの編集できる範囲が、グリッド模様の背景になります。
プラグインを入れるだけでOKです。

After プラグイン有効。ノートの背景がグリッド模様になっている
Before プラグイン無効。標準では 無地のノート。

ほかのプラグインも試していますが、今回ご紹介できるのは、1つだけです。まだ翻訳がなく設定が困難なのと、あまりプラグインを多く入れるのは好ましくないためです。

拡張機能に関しては、あまり積極的な利用はおすすめしません。なぜなら将来的に、別のアプリケーションソフトに移行しようと思ったときに、同じことができなくて、困る可能性があるからです。
なるべく標準的な機能だけを使って、自分なりの工夫をするのが結局は好ましいと思います。



テーマ

テーマのダウンロード

マーケットプレイスのテーマ タブで、テーマをダウンロードします

マーケットプレイス の テーマ タブ


標準テーマのサンプル

ほかのテーマ画像との比較用

標準テーマ daylight
標準テーマ midnight


おすすめのテーマ

各テーマごとに、CSS(スタイルシート)や JavaScript が適用されて、テーマによってはカラー以外に、通常とは異なるデザインが適用されます。


Asri

カラーを自由に選べる
スラッシュコマンドを呼び出したときの メニューの表示が通常とは異なり、種別ごとにまとまっていて見やすい

ライトモード: 黄色に調整
ライトモード: グレーに調整
ダークモード
ダークモード: 紺色に調整


Savor

Asri のように、スラッシュコマンドの メニューの表示が見やすい
箇条書きのスレッド連動あり

ライトモード
ダークモード
ツールバーの右端に、テーマの調整メニューボタンがある

このテーマ専用の調整メニューの項目は、中国語で記されていて、タブの表示方法の変更などが実装されている。

  1. Dark 配色 -- ブラック

  2. Vinegar 配色 -- ビネガー、ディープブラック

  3. 挖空 -- (不明)

  4. 垂直页签 -- 垂直タブ

  5. 顶栏合并 -- トップバーのマージ

  6. 列表子弹线 -- 箇条書きのマウスホバー時のスレッド線連動がオフになる


Tundoku

箇条書きのスレッド連動あり

ライトモード
ダークモード


pink-room

ライトモードのみの ポップなテーマ。操作アイコンが自動で隠れるので、全体的にスッキリしている。
カラーの切り替えは、ツールバーのボタンからおこなう

ピンク
ブルー
グリーン


Rem Craft

箇条書きのスレッド連動あり

ライトモード
ダークモード


テーマの切り替え方法

メインメニューから、[ 設定 ] を開き、[ スタイル ] タブを開く

設定画面の [ スタイル ] タブ

選択肢から、テーマを選択します

ライトモード、ダークモードそれぞれにテーマを選択してください。

(テーマ名で選択するので、スタイルが確認できなくて、少し不便です)

テーマの選択

切り替え時にたまにバグがあり、テーマの変更が正しく適用されない場合は、アプリの再起動が必要です。



ウィジェット

「Integrated Edit Environment」

Visual Studio Code のベースとなっているテキストエディタ Monaco Editor を使って、ファイルエクスプローラーから 個別のファイルを編集できる 統合環境 (SiYuan を拡張)

左側の ファイルエクスプローラーと中央のマークダウンファイルのエディター部分および目次ヘッドラインが、このウィジットの機能。

ファイルエクスプローラーで、個別のマークダウンファイルを開く

Integrated Edit Environment の ファイルエクスプローラー

Workspace は、SiYuan アプリの扱えるフォルダが最上位になっています。それ以外のフォルダを指定することができません。

エクスプローラーでは、デフォルトで SiYuan のワークスペースが指定されているので、ほかのフォルダを選択する

WorkSpace の右側あたりでメニューを開く

  • New で、新しいファイルやフォルダを作成

  • Import で、ほかのローカルファイルやフォルダを指定して、コピーを取り込むことが可能



コードスニペット

SiYuan では、「カスタムCSS」という呼び方ではなく、CSSあるいはJavaScriptのコードのことを「コードスニペット」と呼びます。

コードスニペットの設定方法

メインメニューから、[ 設定 ] を開き、[ スタイル ] タブを開く

[ 設定 ] → [ スタイル ] タブ
コードスニペット設定画面

コードスニペットを追加するには、+ボタンを押します。そうすると、個別の入力欄が画面に追加されます。(タイトルは自由です)

このときデフォルトでトグルがオフになっているため、毎回オンにする必要があります！
(トグルがオフのときは、CSSが適用されない)

コードスニペットを追加するには、＋ボタンを押す

複数のコードスニペットを登録した状態

登録済みのコードスニペット

開発者ツールは、メインメニューの項目にある

開発者ツール --- 一般的なブラウザにも搭載されているソースコード探索機能と同じもの。ユーザーがCSSのセレクターを探す際に使う。

メインメニューから、[ 開発者ツール ] を起動させる


スタイルシート配布

ここで、各種スタイルシートを配布いたします

※アプリの更新に伴い、スタイルシートが古くなって無効になってしまう場合があります。

  1. コードスニペット管理画面 内の入力欄のサイズ拡大

textarea.fn__block.b3-text-field {
height: 150px;
}
input.fn__size200.b3-text-field {
width: 600px;
}

2. <img>タグの画像サイズ制限

SiYuan では、大きい画像に制限がかからないため。

小さい画像をプレビューで拡大するには、その画像をダブルクリックする

#layouts img {
max-width: 450px; 
max-height: 350px;
width: auto;
height: auto;
｝

3. ツールバーのボタンを消す (同期、VIP、INBOX)

サブスクリプションユーザー向けのボタン

#barSync,#toolbarVIP,[data-type="inbox"] {
display:none;
}

4. 右クリック・コンテキストメニュー (WeChat)

サブスクリプションユーザー向けのボタン

[data-id="quickMakeCard"],[data-id="wechatReminder"] {
display:none;
}

5. 「タグ」ドッグ内のタグの改行をオフにする

「タグ」ドッグの 左底、右底配置 向け

12/21  バグがあったため使用を中止してください。
ノート名を使って関連付けしたタグがある場合に、変異的に折りたたみトグルが生じて、表示がズレてしまうけど、CSSでは修正できませんでした

div.sy__tag ul.b3-list {
display:flex;
flex-wrap: wrap;
}