Logseqのフォントを変更する

こんにちは、相戸ゆづなです。

LogseqにはフォントをUIで変える設定がないので、CSSで変える方法をメモしておきます。

基本的なやり方

1.保管庫の設定CSSを開く

設定したい保管庫フォルダーをエクスプローラーもしくはファインダーでで開きます。
その後「（開きたい保管庫）/logseq/custom.css」の順にフォルダーを開き、CSSを探します。

＜メモ＞
「Logseq起動＞メニュー＞設定＞カスタムテーマ＞custom.cssを編集」
でも行けますが、保存後のコードを閲覧することができません。
そのため、直接CSSをいじってコードを確認することを推奨します。

2.CSSを編集する

CSSファイルを開き、下記のコードをコピペします。

#root > div,
#left-sidebar .nav-header > div a span,
*:is(#main-content-container, #right-sidebar),
.cp__sidebar-main-content h1.title,
*:is(.editor-inner .uniline-block.h1:not(.block-ref *), .editor-inner .h1:not(.block-ref *), .ls-block h1:not(.block-ref *)),
*:is(.editor-inner .uniline-block.h2:not(.block-ref *), .editor-inner .h2:not(.block-ref *), .ls-block h2:not(.block-ref *)),
*:is(.editor-inner .uniline-block.h3:not(.block-ref *), .editor-inner .h3:not(.block-ref *), .ls-block h3:not(.block-ref *)),
*:is(.editor-inner .uniline-block.h4:not(.block-ref *), .editor-inner .h4:not(.block-ref *), .ls-block h4:not(.block-ref *)){
  font-family: "変えたいフォント";
}

フォント適応範囲は下記の通りになっています。

• #root > div,：全体
• #left-sidebar（中略・2～3行目）：UI
• .cp__sidebar-main-content h1.title（中略・4～8行目）：見出し1～4

最後から2行目にある「font-family」を変えたいフォントに変更・保存します。

その後Logseqを起動して、該当の保管庫に適応されてたら完了です。

応用：Google Fontsを適応する

応用でGoogle Fontsも適応する方法があります。

https://fonts.google.com/

のサイトに行き、フォント検索・ウェイト指定・CSSインポートまで行います。

詳しくはObsidian+Googleフォントの記事がありますので、リンクを載せておきますね。

上記記事の「3.@importとfont-familyに記載されているフォント名をコピー」までは同じ流れです。

コピーが終わったら、Logseqの「custom.css」を開きます。

1行目にGoogleフォントインポートCSSを記入、最後から2番目の行に指定したいフォントを記載。

@import url('設定したいGoogleフォントのインポートCSS');

#root > div,
#left-sidebar .nav-header > div a span,
*:is(#main-content-container, #right-sidebar),
.cp__sidebar-main-content h1.title,
*:is(.editor-inner .uniline-block.h1:not(.block-ref *), .editor-inner .h1:not(.block-ref *), .ls-block h1:not(.block-ref *)),
*:is(.editor-inner .uniline-block.h2:not(.block-ref *), .editor-inner .h2:not(.block-ref *), .ls-block h2:not(.block-ref *)),
*:is(.editor-inner .uniline-block.h3:not(.block-ref *), .editor-inner .h3:not(.block-ref *), .ls-block h3:not(.block-ref *)),
*:is(.editor-inner .uniline-block.h4:not(.block-ref *), .editor-inner .h4:not(.block-ref *), .ls-block h4:not(.block-ref *)){
  font-family: "変えたいフォント";
}

私オススメのGoogle Fonts組み合わせ記事が「Obsidian+Google Fonts」にありますので、そちらと一緒に見てくださいね！

余談：もっと詳細に変更したい場合

今回の方法は、全体を大雑把に変えるやり方になっています。

もっと詳細に変えたい、他の場所を変えたいと思ったらディベロッパーツールで該当クラスを探してください。

ディベロッパーツールはShift+Ctrl+Iで表示されます。