Joplinの見出しの間隔を変える
文章の始めに、見出し「##」をつけて書いていても、前後の段落の間隔が等間隔なので、もう少しみやすくしたい。
ここでカスタムCSSを使い、見出しの間隔を広げてみる。
見出しの「#」を入力すると、右側のビューワーにhtmlの「h1」に変換されるので、このh1,h2等に対してCSSを指定する。
| Markdown | html | |
|---|---|---|
| 見出し1 | # 見出し1 | h1 |
| 見出し2 | ## 見出し2 | h2 |
| 見出し3 | ### 見出し3 | h3 |
| 見出し4 | #### 見出し4 | h4 |
| 見出し5 | ##### 見出し5 | h5 |
| 見出し6 | ##### 見出し6 | h6 |
| 水平線 | --- |
hr |
| 太字 | ***text*** |
b |
| 斜体 | *text* |
i |
| 引用 | > text |
blockquote |
| コード | `code` | code |
| コード | ``` code ``` |
code |
カスタムCSSの編集場所は
「設定」->「スタイル」
「Custom stylesheet for rendered Markdown」の右隣「編集」ボタンをクリックすると、Mac,PCにインストールされているエディタが起動する。
userstyle.css
// 2番目の見出し「##」の上部を2行半(2文字半)くらい開ける。
h2 {
margin-top: 2.5rem;
}
// 3〜6番目の見出しの上部を2行開ける。
h3, h4, h5, h6 {
margin-top: 2rem;
}
// 見出しに下線をつける
h2, h3, h4, h5, h6 {
border-bottom: 1px solid rgb(230,230,230);
}CSSを入力したらJoplinを再起動する。
CSS適用前後ではこのように表示される。
水平線の太さを変える
デフォルトの水平線の太さは、2pxになっているので1pxにする（ついでに上記の見出しの下線と同じ色にする）。
userstyle.css
// 2番目の見出し「##」の上部を2行半(2文字半)くらい開ける。
h2 {
margin-top: 2.5rem;
}
// 3〜6番目の見出しの上部を2行開ける。
h3, h4, h5, h6 {
margin-top: 2rem;
}
// 見出しに下線をつける。横線の太さを1pxにする
h2, h3, h4, h5, h6, hr {
border-bottom: 1px solid rgb(230,230,230);
}テーブルのセルの幅を狭くする
上記の userstyle.css に table のCSSを追加
table tr th,
table tr td {
padding: .2em .8em .2em .8em;
}
table tr th {
border-bottom: 1px solid rgb(220, 220, 220);
font-size: 0.8rem;
}
table tr td {
background-color: #fff;
}CSSを入力したらJoplinを再起動する。
下の画像は、カスタムCSSを使う前と後の表示の違い。
テーブルをMarkdownで書くときは、テンプレート化しておくと手間が省ける。
Joplinでテンプレートを利用する
目次のデザインを変える
目次の「・」を消し、間隔変更
userstyle.css
nav.table-of-contents {
margin-bottom: 2rem;
}
nav.table-of-contents ul {
list-style-type: none;
margin-top: .1rem;
margin-left: 1rem;
}
nav.table-of-contents ul li {
margin-bottom: .1rem;
}
html,cssを記述する
html,cssを直接書いてもビューワーに表示されるので、こんな書き方でもok。
<h2 style="margin-top:3rem;">hoge</h2>クラスまたはIDを使って、userstyle.cssで指定する。
<h3 class="hoge">hoge</h3>
<h3 id="hoge2">hoge</h3>エディタ側のコードブロックのフォントを変える
追記：2021/05/26
Joplin 1.8.5
エディタ側のコードブロックのフォントを変えるには、userstyle.cssではなく、userchrome.cssに記述します。
上記スクリーンショットとはjoplinのバージョンが違うので画面が異なりますが基本的には同じです。
設定 -> スタイル -> 「詳細設定を表示」
「カスタムスタイルシート（アプリ全般の外観調整用）」をクリックします。
cssでフォントを設定します。ここではフォントが変わったことが 分かりやすいように「Douar」フォントを使用してあります。
PC内にインストールされているフォントに置き換えて設定してみてください。
pre.CodeMirror-line span[role="presentation"] span.cm-comment,
pre.CodeMirror-line span[role="presentation"] span.cm-keyword,
pre.CodeMirror-line span[role="presentation"] span.cm-null,
pre.CodeMirror-line span[role="presentation"] span.cm-variable {
font-family: Douar !important;
}cssの入力後、joplinを再起動。
windows版joplinでcssが反映されない場合
joplinがバックグラウンドで起動したままの場合があるので、タスクトレイ（タスクバー）のjoplinのアイコンを右クリックをして終了した後に起動。
または
ファイル -> 終了
joplinを常駐させたくない場合は
設定 -> アプリケーション -> 「トレイアイコンの表示」のチェックボックスを外す
rokuyon.comさん、Blog拝見いたしております。
早速ですが、JoplinのカスタムCSSでMarkdownの見た目が変わらない状況に陥っています。
例えば、userstyle.css にて、
—–
code {
font-family: Consolas, “Segoe UI”, Meiryo;
}
—–
と設定しても、デフォルトのMSゴシックのフォントのままコードが表示されてしまいます。
しかし、ノートを印刷した場合は、Consolasフォントで印刷されます。
CSSがどうも印刷だけに適用されているようです。
こちらの環境は
・Windows 10 Pro 21H1
・Joplin 1.8.5
お見受けしたところ、rokuyon.comさんはMacをお使いのようですので、このような事象は起きないのだと思いますが、もし解決法をご存知でしたらご教示いただきたく思いコメントした次第です。
tamoさん、コメントいただきありがとうございます。
左側にあるエディタ側のフォントを変更したいということでしょうか。
エディタ側の変更は、userstyle.cssではなく、userchrome.css「カスタムスタイルシート（アプリ全般の外観調整用）」に次のように記述してみてください。
“`
pre.CodeMirror-line span[role=”presentation”] span.cm-comment,
pre.CodeMirror-line span[role=”presentation”] span.cm-keyword,
pre.CodeMirror-line span[role=”presentation”] span.cm-null,
pre.CodeMirror-line span[role=”presentation”] span.cm-variable {
font-family: Consolas, “Segoe UI”, Meiryo !important;
}
“`
userchrome.cssについて追記しました
https://www.rokuyon.com/230/#toc-5
kdさん。ありがとうございます。
説明不足ですみません。エディタ側ではなくビューアー側の方です。
印刷ではCSSが適用されているので、userstyle.cssのパスや書き方が悪いという訳ではなさそうですが。。。
そうでしたか、勘違いしていました。
joplinがバックグラウンドで起動したままかもしれないので、タスクバーのjoplinのアイコンを右クリックをして終了した後に起動してみてください。
または、
ファイル -> 終了
これでどうでしょうか。
ありがとうございます。
その方法もネットで検索して、既に試していますが、やはりCSSは適用されませんでした。
Dell LatitudeとMicrosoft Surface Proを使用していますが、どちらの環境でも同じ状況です。うーん。。。
印刷時のみCSSが反映されているというのは変ですね。
@media print {}
で囲っているわけでもないですよね。
「ヘルプ」->「開発ツールのオンオフを切り替える」
で、ビューア側のCSSを変更できますか？
または、下記のhtmlをエディタ側に書いてフォントと色が変わるかどうか。
<code class="inline-code" style="font-family: Consolas;color:red;">hoge</code>
<pre class="hljs">
<code><span class="hljs-keyword" style="font-family: Consolas;color:red;">hoge</span></code>
</pre>
ご存知かとは思いますが開発ツールについての参考URLも書きます
https://www.buildinsider.net/web/chromedevtools/01#page-2
https://developer.chrome.com/docs/devtools/css/reference/
kdさん、すみません。返信が遅れて申し訳ありません。
以前、開発ツールでも確認しておりましたが、userstyle.cssの設定が反映されていなかったので、どうしたものかと思っていました。
%HOMEPATH%\.config\jolpin-desktop\tmp にランダムなファイル名（「47ac314……07cb.css」のような）のCSSファイルが5つありますが、この内の1つ長めのCSSファイルを直接編集すればMarkdownビューアに反映されますが、この tmp にあるCSSファイルは、Jolpin起動の度に生成（更新）され、私がファイルに直接編集された内容が消えてしまって元に戻ります。
userstyle.css に記載した内容が tmp フォルダ内にランダムなファイル名の CSSファイルとして存在しますが、これがなんとかメインcssに反映されればいいのですが、、、
こんな現象、私の環境だけでしょうか。。。
私の環境でも「joplin-desktop\tmp」以下にランダムなファイル名cssファイルは生成されます。
すでに試したかもしれませんが
joplinを終了した状態で（タスクトレイにアイコンがあればこれも終了）
.config\joplin-desktop\」の直下にある userstyle.css を一度削除（またはリネーム）。
joplinを起動
「ツール」->「オプション」->「スタイル」
->「詳細設定を表示」->「カスタムスタイルシート (Markdownビューアー)」->編集
で userstyle.css を開いて保存するのはどうでしょうか？
これで私の環境では、新しいuserstyle.cssが生成されました（windows10 proで確認）
それと関係はなさそうですが、cssを編集するエディタも変えてみるとか。
kdさん、毎回大変ありがとうございます。
userstyle.css を削除（新しい userstyle.css が生成されました）したり、メモ帳ではなくMIFES等別のエディタでも試してみましたが、状況変わらずです。。。
kdさんにこれ以上ご迷惑をお掛けしてもあれなので、しばらく私なりに色々とやってみます。
ありがとうございました。
kdさん、
お陰様で、解決いたしました。
その方法は、まずJoplinをアンインストールして、再度インストールし直しました。その際に、これまで「現在のユーザーのみにインストールする」を選んで行っていたところを、「このコンピューターを使用しているすべてのユーザー用にインストールする」を選択してセットアップしたところ、userstyle.cssがきちんんと適用されるようになりました。
Joplinのプログラムがインストールされるフォルダが、
C:\Program Files\Joplin
C:\Users\hogehoge\AppData\Programs\Joplin
で異なる訳ですが、このPCは私しか使用しないので前者の方法で問題ないと考えておりました。
Microsoftアカウントをローカルアカウントと紐づけしているのでそれも何か関係するのかもしれません。
これまで大変ありがとうございました。
おー、解決してよかったです。
何が原因なのか気になっていました。こういうパターンもあるのですね。
勉強になりました。tamoさん、ご連絡いただきありがとうございます。