カスタム CSS を追加する

English Original Version Help Improve the Translation

ヒント: この機能を使用するには、Windows では 0.9.12 以降、macOS では 0.9.9.5.1 以降の Typora が必要です。

テーマフォルダを開く

Finder / Explorer で Typora のテーマフォルダーを開くには、設定パネルを開き、[表示] セクションの下の [テーマフォルダーを開く] ボタンをクリックします。

ここにカスタムテーマを追加できます。 テーマの検索、インストール、または作成する場合は、テーマについて ページを参照してください。

しかし、完全なテーマファイルを新規に作成することなく、フォントを変えたり、書き込み領域を増やしたりといった CSS の修正だけで、すべてのテーマまたは現在のテーマだけにそれらの変更を適用することもできます。 このセクションでは、その方法を紹介します。

すべてのテーマまたは他のテーマにカスタム CSS を追加する

Typora は、以下の順序で CSS ファイルを読み込みます。

1. Typora の基本的なスタイル
2. 現在のテーマの CSS ファイル
3. テーマフォルダ内の base.user.css ファイル
4. テーマフォルダ内の {current-theme}.user.css ファイル

テーマフォルダの下に base.user.css と {current-theme}.user.css が存在しない場合は、それらをテーマフォルダの下に作成できます。

CSS スタイルを変更して すべてのテーマ に適用する場合は、 base.user.css を変更して独自の CSS を追加する必要があります。 これにより、どのテーマを選択しても、追加した CSS スタイルが読み込まれて適用されます。

“Newsprint” などの 特定のテーマ の CSS を変更する場合は、 newsprint.user.css を作成し、必要な CSS を追加できます。 テーマファイルを直接修正することをお勧めしない理由は、以下のとおりです。

1. Typora をインストールした後に利用できるデフォルトのテーマも更新される可能性があります。 デフォルトのテーマが更新された場合、新しいバージョンはテーマフォルダ内の既存のバージョンを置き換えるだけで、あなたが変更した内容は失われます。
2. 他の人が開発したテーマも、将来変更される可能性があります。 変更があった場合、CSS ファイルを差し替えるだけで、変更した内容が消えてしまう心配はありません。

(独自の CSS テーマを作成する場合は、直接変更しても問題ありません。)

注意: ファイル名は大文字と小文字を区別します。 {current-theme}.user.css の {current-theme} は、現在のテーマのファイル名部分と同じである必要があります。 たとえば、”GitHub” テーマの CSS ファイルは github.css であるため、ファイル名部分は “Github” ではなく “github” となります。

CSS をデバッグする

Chrome/Safari DevTools を開くと、要素のスタイルをデバッグすることができます。

• macOS では、ヘルプ -> デバッグを有効にする メニュー項目をチェックし、Typora のハイブリッド編集ビューで任意の場所を右クリックし、コンテキストメニューから “Inspect Elements” をクリックすると、デバッグできます。
• Windows / Linux では、 表示 -> 開発ツール表示切替 メニュー項目から DevTools を開くことができます。