カスタムCSS

カスタムCSSは上級者向けの機能です。カスタマイズについては、公式にサポートしているわけではなく、すべて自己責任となります。何か問題が起きたら、Zettlrのデータディレクトリからcustom.cssを削除して、カスタムCSSをリセットしてください。

CSS(Cascading Style Sheets)を利用して、アプリケーションの見た目を変更することができます。カスタムCSSエディタは、Zettlr->カスタムCSS...(macOSの場合)、またはファイル->カスタムCSS...(WindowsとLinuxの場合)にあります。

CSSはよくわからないけれど、このページのガイドをただコピー&ペーストするだけでは嫌だという場合は、簡単なCSSチュートリアルを見てみるという選択肢もあります。インターネット上には多くのチュートリアルがあり、ちょっとGoogleで検索すればチュートリアル動画なども見つかります。

Zettlr向けにCSSを書く

Zettlrのスタイルは、形状と実際のテーマの2つに分けられます。変更する場合は、要素のデザインのみを変更し、決して形状を変更しないでください。形をいじりまわすのは楽しいかもしれませんが、予想できない振る舞いをもたらす可能性があります。これは、アプリケーションの一部で、要素のサイズが正しいことに依存しているためです。もし間違えてしまった場合も安心してください。Zettlrのデータディレクトリからcustom.cssを取り除くだけです。インストール手順のドキュメントに書かれているパスを調べると、お使いのシステムでのデータディレクトリを見つけることができます。

ZettlrにおけるすべてのclassとIDは、それぞれのコンポーネントごとに名前空間が付けられています(グローバルのものを除く)。なので、実際にルールを上書きするには、完全な名前空間を使う必要があります。(もしくは、多くのルールを追加していて面倒な場合は、!importantを使ってルールを上書きしてください。)

すべての要素が常にbodyの名前空間に属していて、アプリケーションがダークモードの場合には、.darkのクラスが付きます。なので、ダークモードの時のみに適用したいルールがある場合は、body.darkのプレフィックスを付けるようにしてください。

セレクタを見つけるヒント

Zettlrのスタイルは常に変化にさらされています。かなり安定しているはずですが、バージョンアップ時に変更が加えられる可能性があります。そのため、ここでは既成の例を示すのではなく、目的のセレクタを簡単に見つける方法を示します。

まず最初に、高度な設定でデバッグモードを有効化し、開発メニューを表示します。次に、開発メニューから開発者ツールを表示して、「Element」タブを選択します。

Zettlr with the developer tools open

それから、開発者ツールの左上の矢印をクリックします。そして、アプリケーション上の要素をクリックすると、その要素を開発者ツール上でフォーカスすることができます。要素に指定されているすべてのCSSスタイルが、開発者ツールの下部に表示されます。

The CSS directives in the developer tools

上に表示されたルールは下に表示されたものよりも常に優先されます。つまり、注目すべきなのは次の個所です:

body .cm-quote, body .cm-link, body .cm-strong, body .cm-em {
    color: var(--c-primary);
}

このようなセレクタをカスタムCSSダイアログにコピーして、お好みのスタイルを設定します。この設定は見ての通り、ブロック引用、リンク、太字、斜体のテキストの色をテーマのプライマリカラーに設定しています。

CSSコードスニペット

Zettlrでカスタムフォントを使う

Zettlrのデフォルトフォントが気に入らない、もしくは変更の必要がある場合は、カスタムCSSエディタに以下のスニペットをペーストしてください。your-font-nameはZettlrで使いたいフォントの完全な名称に置き換えてください。placeholderは、使用したいフォントによって変えてください:

  • New Roman、Georgiaなどのセリフ体フォントを使いたい場合は、serifを使います。
  • Arial、Helveticaなどのサンセリフ体フォントを使いたい場合は、sans-serifを使います。
  • クラシックな等幅フォントを使いたい場合は、monospaceを使います。

placeholderは、設定したフォントが見つからない場合に、同等のフォントを表示する、フォールバックとして機能します。また、フォント名にスペースが含まれている場合は"Times New Roman"のようにクォーテーションマークで囲ってください。

#editor {
    font-family: '<your-font-name here>', <placeholder>;
}

ランダムなUnsplash画像を背景にする

以下のコードにしたがうと、起動するたびに異なる画像をエディタの背景にすることができます。画像は、素晴らしいフリー写真サイトであるUnsplash.comから取ってきます。これには、URLにアクセスするたびに異なる画像を返すSource APIを使用します。ページを表示して、何回かリロードすると試すことができます。追加のオプション(例えば、本日の画像を表示するなど)については、Unsplash Source API referenceを参照してください。

/* Enter your custom CSS here */

#editor {
    background-color: transparent;
    background-image: url('https://source.unsplash.com/random');
    background-size: cover;
    background-position: center center;
}

body #editor .CodeMirror-sizer, body #editor .CodeMirror-gutter {
    background-color: rgba(255, 255, 255, .8);
    height: 100%;
}

body.dark #editor .CodeMirror-sizer, body.dark #editor .CodeMirror-gutter {
    background-color: rgba(0, 0, 0, .8);
}

#editor .CodeMirror {
    background-color: transparent;
}

上記スニペットを使ったZettlrのプレビュー

改行を可視化する

改行がどこにあるのか見えるようにしたい場合は、次のカスタムCSSを使えば、行末に段落記号(¶)を表示することができます。

.CodeMirror-line:not(:last-child)::after {
  content: "¶";
  color: #666;
}

上記スニペットを使ったZettlrのプレビュー

集中モードでツールバーを隠す

集中モードを、すごく集中できるモードにしたい人がいるかもしれません。ほとんどの人は書くことに集中するときも、すべてのツールとボタンにアクセスしたいだろうと思うので、Zettlrはデフォルトではツールバーを隠しません。それでも、集中モードでエディタのみを表示したいなら、以下のたった一行のCSSで、集中モード中のツールバーを隠すことができます。

次のCSSの1行をカスタムCSSにペーストするだけで、ツールバーが非表示になります:

#editor.fullscreen, .CodeMirror-fullscreen { top: 0px; }

テキストの最大幅を設定する

大きなディスプレイを使うと、一行がとても長く表示されてしまいます。 エディタ内の行を短くしたい場合、次のCSSのように両側にマージンを設定します。

#editor {
  --side-margin: calc( 50vw - 30em );
}

#editor .CodeMirror {
  margin-left: var(--side-margin);
}

#editor .CodeMirror-scroll {
  padding-right: var(--side-margin);
}

A preview of Zettlr using above snippet