Typoraのテーマをカスタマイズする

Typoraでは、テーマを変更するだけではなく、CSSを記述して表示をカスタマイズできます。

テーマをすべて自作することなく、一部を変更するだけで独自のテーマを作れます。

TyporaにカスタムCSSを追加する

カスタムCSSの設定方法については、Typoraのサポートサイトで紹介されています。詳しくはそちらを参照してください。

Add Custom CSS

ここでは基本的な手順を紹介します。

 

step
11［ファイル］メニューから［設定］を開く

step
2設定画面で「表示」を選択

設定画面左のメニューで［表示］を選択します。

 

step
3「テーマ」で［テーマフォルダを開く］をクリック

 

step
4エクスプローラーが起動してテーマフォルダーを表示

 

ユーザーは、テーマフォルダー内にbase.user.cssまたは[current-theme].user.cssというファイルを作成して、カスタムCSS設定を追加できます。

[current-theme]の部分はテーマの名称です。

各テーマは、テーマ名.cssファイルと同名フォルダーのセットになっています。

base.user.cssやcurrent-theme.user.cssフォルダーは、テーマ名フォルダーの中に作成してください。

テーマフォルダー内にカスタムCSSを作成することで、Typoraのアップデートによってカスタム設定したCSSファイルが上書きで失われるのを防ぎます。

 

TyporaテーマでのCSS読み込み順位

Add Custom CSSの解説によると、テーマのスタイルシートは次の順番で読み込まれます。

1. Typoraの基本スタイル
2. 現行テーマのCSS
3. テーマフォルダー内のbase.user.css
4. テーマフォルダー内の[current-theme].user.css

base.user.cssは、すべてのテーマに共通して使用されます。

[current-theme].user.cssは、特定のテーマだけに適用されます。

You can create base.user.css and {current-theme}.user.css under the theme folder if they do not exist.

If you want to change CSS styles, and apply it to all themes, you should modify base.user.css and append your own CSS, so whatever theme is selected, your CSS style will still be loaded and applied.

If you want to modify some CSS for a specific theme, for instance “Newsprint”, you can create newsprint.user.css and append the CSS you want. The reasons we do not recommend you modify the theme file directly are:

複数のテーマを作成するばあい、フォントの指定はすべてのテーマで共通化し、配色は個別のテーマで設定するといった使い方をするといいでしょう。

 

カスタムCSSの記述例

Typoraのサーポートページ内には、いろいろなTipsが紹介されています。

その中からカスタムCSSの設定に関するものをピックアップしました。

見出しに自動でナンバリングするためのCSS設定

カスタムフォントを指定するためのCSS設定

背景画像や色を指定するためのCSS設定^{Windows版0.9.13以降、MacOS版0.9.9.6以降}

目次の表示レベルをカスタマイズするCSS設定

フォーカスモードの表示をカスタマイズするCSS設定

 

編集段階から最終表示結果をイメージ

Typoraのテーマをカスタマイズすることでユーザーだけの独自の設定が可能です。

自分のサイトとスタイルシート設定を共通化できれば、Typoraでの編集段階から最終的な表示結果をイメージしやすくなります。

Fukuzumiのばあい、フォントサイズや行間、見出しや段落（P要素）前後のマージンなどをブログと統一したいなと考えているところです。