Typoraをノート風エディタにする

■ 概要

背景

• 手書きノート風に書けるノートアプリ、メモアプリ、エディタが無いか色々と探していたが、目ぼしいものがなかった。
• もともと使用していた「Typora」に、独自でcssをいじることができる仕組みがあることを思い出した。
  => もしかして、ノート風に似せることができるのではと気づいた。

デモ画像

文字の大きさが、h1,h2の時は2行分、それ以外の時は1行分の大きさになってます。

技術要件

技術	雑な説明	URL
Typora	Markdownエディタ	リンク
あんずもじ	手書き風フォント(ここはお好みで)	リンク

前提

• Typoraがインストールされていること
• Windowsであること(Macも本手順の一部を読み替えていただければ可能です。)

■ 手順

1. 以下のcssを配置する

以下のコード(css)を「base.user.css」というファイル名で、以下のファイルパスに保存する

%USERPROFILE%\AppData\Roaming\Typora\themes\base.user.css

// ここはフォントの種類によって適宜変更してください。
@font-face {
    font-family: 'APJapanesefont';
    src: url('./anzumoji/APJapanesefont.ttf');
}

# write, #write * {
  font-family: 'APJapanesefont' !important;
}

// 
# write {
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px) !important; 
  background-size: 100% 2em !important; 
  line-height: 2em !important;
  padding-bottom: 1px !important;
}

*:not(#typora-sidebar) {
  font-size: 1em !important;
  line-height: 2em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

h1:not(#typora-sidebar),
h2:not(#typora-sidebar) {
  font-size: 1.5em !important;
  line-height: 2em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: .25em !important;
  padding-bottom: .40em !important;
}

h1:not(#typora-sidebar) {
    text-decoration: underline;  
}

h3:not(#typora-sidebar) {
    text-decoration: underline;  
}

h3:not(#typora-sidebar)::before {
    content: "■ ";  
    text-decoration: none ;
    display: inline-block;
}

h4:not(#typora-sidebar)::before {
    content: "〇 ";  
}

h5:not(#typora-sidebar) {
    text-decoration: underline;  
}

h5:not(#typora-sidebar)::before {  
    content: "    ";  
    text-decoration: none ;
    display: inline-block;
}


h6:not(#typora-sidebar)::before {  
    content: "    ";  
}

img:not(#typora-sidebar) {
    border: .7px solid black !important;
    border-radius: 3px;
}

table, table * {
  border: none !important;
}

2. フォントを配置する

フォントをダウンロードし、以下に展開して配置する

%USERPROFILE%\AppData\Roaming\Typora\themes\anzumoji

3. Typoraを起動/再起動する

4. テーマを白背景のものにする

Typoraのメニューバーの「テーマ」を押下して、白色のテーマを選択する
※ ここでは、「Pixyll」を採用してます