Typoraの見た目を変更できることは以前紹介しましたが、そのやり方だけの紹介で、何をどうするかまでは説明していませんでした。
今回は詳しくカスタマイズを説明していきます。
前提
Typoraはマークダウンエディターとして、シンプルで効果的な文章の記述や編集を可能にするツールです。このエディターのカスタマイズにおいて、特に注目すべき要素の一つがフォントの設定です。ユーザーにとって重要なフォントの選択と設定に関する動向を探ってみましょう。
Typoraはその使いやすさや高度な機能により、多くのユーザーから支持を受けています。一方で、Typoraはエディターとしての特性を持ちつつも、デザインツールではないという点を認識することが重要です。Typoraは、Markdownに基づく本質的な記述を重視しており、その見た目の整形は外部ツールやプロセスを活用することが推奨されています。
フォントの選択と設定は、Typoraエディターの見た目に大きな影響を及ぼします。ユーザーがエディター内で閲覧し、編集する文章が、フォントによって異なる風合いや視認性を持つことから、ユーザー体験に直接的な影響を与えます。しかし、ユーザーのニーズと動向に合わせたフォントの選択と設定は、単なる装飾以上の価値を持っています。
ユーザーの動向として、フォントの選択においては、主に以下のポイントが見られます。
- 統一感の重要性: ユーザーはエディター内で複数のドキュメントを扱うことが一般的です。この際、異なるフォントを使用すると、一貫性のない印象を与える可能性があります。ユーザーは統一感のあるドキュメントを作成したいと考えるため、フォントの統一設定が重要です。
- 言語やコンテンツに適したフォント: ユーザーは様々な言語やテーマのコンテンツを作成する可能性があります。このため、適切なフォントを選ぶことで、異なる言語の文字や専門的なコンテンツに適した表示を実現することが求められます。特に、エディターは文字の表示が正確かつ美しく行われることが重要です。
- 読みやすさの追求: ユーザーは長時間エディターで作業することが多いため、フォントの読みやすさが重視されます。フォントの太さや行間、文字サイズなどが、長時間作業を快適にするかどうかに影響を与えます。ユーザーは自分の作業スタイルに合わせて、読みやすいフォントを選ぶ傾向があります。
ユーザーの動向を踏まえると、Typoraエディターのカスタマイズにおいては、フォントの設定が特に重要です。フォントの選択と設定を通じて、ユーザーがより効果的な文章作成と編集を行える環境を提供することが求められています。適切なフォントの選定と統一は、Typoraエディターのユーザー体験を向上させ、情報の整理と共有をより効果的に行うための鍵となるでしょう。
設定ファイルを配置する
Typora は、以下の順序で CSS ファイルを読み込みます。
Typora の基本的なスタイル現在のテーマの CSS ファイルテーマフォルダ内のbase.user.cssファイルテーマフォルダ内の{current-theme}.user.cssファイル
テーマフォルダの下に base.user.css と {current-theme}.user.css が存在しない場合は、それらをテーマフォルダの下に作成できます。
CSS スタイルを変更して すべてのテーマ に適用する場合は、 base.user.css を変更して独自の CSS を追加する必要があります。 これにより、どのテーマを選択しても、追加した CSS スタイルが読み込まれて適用されます。
“Newsprint” などの 特定のテーマ の CSS を変更する場合は、 newsprint.user.css を作成し、必要な CSS を追加できます。 テーマファイルを直接修正することをお勧めしない理由は、以下のとおりです。
Typora をインストールした後に利用できるデフォルトのテーマも更新される可能性があります。 デフォルトのテーマが更新された場合、新しいバージョンはテーマフォルダ内の既存のバージョンを置き換えるだけで、あなたが変更した内容は失われます。他の人が開発したテーマも、将来変更される可能性があります。 変更があった場合、CSS ファイルを差し替えるだけで、変更した内容が消えてしまう心配はありません。
(独自の CSS テーマを作成する場合は、直接変更しても問題ありません。)
注意: ファイル名は大文字と小文字を区別します。 {current-theme}.user.css の {current-theme} は、現在のテーマのファイル名部分と同じである必要があります。 たとえば、”GitHub” テーマの CSS ファイルは github.css であるため、ファイル名部分は “Github” ではなく “github” となります。
全てのテーマに適用するCSSスタイルを変更したい場合は、base.user.cssを編集して独自のCSSを追加する必要があります。これにより、どのテーマを選択しても、追加したCSSが適用されます。特定のテーマのCSSを変更したい場合は、{current-theme}.user.cssを作成し、必要なCSSを追加します。
ただし、直接テーマファイルを修正することは推奨されません。Typoraのデフォルトテーマや他の人が開発したテーマは将来変更される可能性があるため、直接編集すると変更が消失する可能性があります。
カスタムCSSの設定方法
Typora は、以下の順序で CSS ファイルを読み込みます。
Typora の基本的なスタイル現在のテーマの CSS ファイルテーマフォルダ内のbase.user.cssファイルテーマフォルダ内の{current-theme}.user.cssファイル
base.user.cssと{current-theme}.user.cssは存在しない場合には、自分で作成することができます。
このbase.user.cssの場所は利用しているOSごとに異なるのですが、以下の方法で正確に設定画面に飛ぶことができます。
- 設定画面にいきます。
ctrl+,で開くことができます。 Preferenceに移動。Appearanceに移動。Open theme folderをクリックするとあなたのテーマフォルダーが開きます。- ここに
base.user.cssファイルを作成します。メモ帳やVisual Studio Codeなどでこのファイルを作ってください。中身はまだ空でかまいません。
cssの知識
cssを軽く説明しておきます。
修飾をする場所 {
設定項目: 設定値;
}
といった具合で設定していきます。
詳細な説明は省きますが、Google Fontsというサービスを使用すると、ウェブ上からフォントを読み込んで使用することができます。Google Fontsのウェブサイトで利用可能なフォントを探し、そのフォントを読み込むためのCSSコードを追加することができます。
閑話休題
さて、ここからこのbase.user.cssを編集していきます。
Typoraでは見える要素のほとんどを変更できます。とはいえ、フォントは統一感があることが前提です。細かく指定していくと、テーマごとに整合性がとれなくなってきますので、あらゆる要素で同じフォントを指定することにします。
フォントの選定は個人の嗜好が大きく出てきます。各環境で利用できるフォントも変わりますが、一例として私の設定を公開します。参考までに私の環境はWindows 11です。
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
* {
font-family: 'Nunito', 'UD Digi Kyokasho N-R Regular', sans-serif;
}Typoraではほとんどの要素の見た目を変更できますが、フォントについては統一感を持たせることが重要です。細かく指定するとテーマごとに整合性が取れなくなる可能性があるため、全ての要素で同じフォントを使用することをおすすめします。
フォントの選定は個人の嗜好に大きく影響されます。各環境で利用可能なフォントも異なりますが、以下に私の環境（Windows 11）での設定例を示します。この例ではGoogle FontsからNunitoという欧文フォントを読み込んでいます。
読み込んでいるフォントはNunitoという欧文フォントです。和文フォントUD Kyokashoの丸い見た目にあった欧文フォントを探したときに見つけました。
