RemNoteのCSSカスタマイズ

RemNoteで執筆してます。
RemNoteは設定の中にあるCSSファイルを使って外観をカスタマイズすることができます。
私はPC版をインストールしてますが、カスタマイズはWEB版とAndroid版のメニューにも影響します。
今はこんな感じにしてます。

CSSカスタマイズしたRemNote

サイドメニュー上部のアカウントから「Settings」⇒「Interface」⇒一番下のメニューに「Add Custom CSS」のボタンがあるのでクリックするとCSSファイルが開きます。

CSSの設定に関しては
下記のような公式の掲示板や

RemNote

RemNote – The all-in-one tool for thinking and learning.

9 RemNote CSS Tips: Change Font And Color — Red Gregory

などで調べて、参照やコピーさせてもらったりしてます。

CSSの内容

全体

• バックをグレー調にして目に優しくする

• 書体はGoogleの「NotoSans JP」に

/* アプリの背景色 */
    body,
    .tile__document,
    .document-header-top-bar,
    .mosaic-window-toolbar,
    .document--narrow {
        background: #F5F5F5 !important;
    }
    ::-webkit-scrollbar-track {
        background: #F5F5F5;
    }
    ::-webkit-scrollbar-thumb {
        border: 2px solid #F5F5F5;
    }
   
    #document-sidebar {
        background-color: #CCCCCC;
        font-color: #000000;

    }
    #document-sidebar .RichTextViewer {
        color: #000000;
        position: relative;
        margin-left: 0px;
    }
    ::-webkit-scrollbar {
        background-color: #CCCCCC;
    }
    .navigation-bar  {
        background-color: #CCCCCC;
    }

/* フォント設定：全体 */
div {
    font-family: "Noto Sans JP";
    font-color: #000000;
    margin: 0px;
    padding: 0px;
}

サイドバー

• 「DOCUMENTS」より上のメニューを非表示化

• 行間を詰める

• フォルダアイコンを付ける

/* サイドバー設定 */
#document-sidebar div {
    line-height: 12px;

    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
}
#document-sidebar.RichTextViewer:hover{
background-color: #CCCCCC;
}

/* ドキュメントリストのフォルダアイコン */
.document-list-item__folder-icon {
    transform: none !important;
    width: 10px;
    height: 18px;
    overflow: visible;
}
.document-list-item__folder-icon.document-list-item__folder-icon--closed:before {
    content: "📁";
}  
.document-list-item__folder-icon.document-list-item__folder-icon--opened:before {
    content: "📁";
}

/* サイドバー：規定の項目を隠す  */
div.flex.items-center.mb-1.h-\[32px\] {
    display: none;
}

エディタ

• バレット（行頭の丸）を非表示化

• 余白の調整

• ハイライトの色を設定

/* 行頭の丸（バレット）を削除 */
.rem-bullet__container {
    display: none;
}

/* ドキュメントの余白 */
#document {
    padding-left: 0px !important;
    padding-right: 5px !important;
    width: auto;

}
.rem-text {
    padding-left: 23px !important;
}

/* タイトル下・ソース追加とタグ一覧 */    
#DropToOpenAsDocument > div > *:not(#DocumentTitle) {
      zoom: 90%;
}

/* エディタのフォント設定：本文 */
.rem-text {

    font-size: 15px;
    line-height: 180%

}
/* エディタのフォント設定：ヘッダー */
.rem-text.rem-header--1 {
	text-align: left;
	font-size: 20px;
	font-weight: bold;
}
.rem-text.rem-header--2 {
	text-align: left;
	font-size: 18px;
	font-weight: bold;
}
.rem-text.rem-header--3 {
	text-align: left;
	font-size: 16px;
	font-weight: bold;
}
 	
/* エディタのフォント設定：タイトル */
.document-title{
        font-size: 21px;
        line-height: 10px;
}

/* エディタ：ハイライト */
.highlight-color--red {
	background-color: #ffb7db;
}

.highlight-color--orange {
	background-color: #ffd6ad;
}

.highlight-color--yellow {
	background-color: #ffffad;
}
	
.highlight-color--blue {
	background-color: #adffff;
}

.highlight-color--green {
	background-color: #adffad;
}

.highlight-color--purple {
	background-color: #b7b7ff;
}

その他

• カンバンボード等

RemNote Library

前回も書きましたがエディタの分割はサイドメニューのドキュメントをShift＋クリックするとできますので、CSSでは設定してません。分割した状態で終了すると次回も同じ状態で開きます。

次回は、しばらく使ってみて執筆ソフトとしてのRemNoteの良い点と悪い点がまとまってきたので、それを書いてみたいと思います。