[RemNote]カスタムCSSをiPhoneやAndroidにも適用する方法

前回はChromeやFirefoxの拡張機能「Stylus」を使って、RemNoteにカスタムCSSを適用しました。
この方法はとても簡単に導入できるのがメリットですが、StylusがインストールできないiOSやAndroidには適用できません。

そこで今回はStylusを使わずにCSSをカスタマイズし、前回と同様のカスタムCSSをモバイル環境でも使えるようにしていきます。

なお元ネタはこちらのYouTube動画です(全編英語)。

Styling Remnote with Custom CSS
Learn how to add Custom CSS directly into Remnote to style your workspace across all devices you use to access Remnote. Remnote: 0:00 ...
スポンサーリンク

Custom CSSページを開く

はじめにRemNoteのページをWebブラウザで開きます。

RemNote
The Best Way to Remember and Organize What You Learn

サイドバーの「Documents」右側、虫眼鏡アイコンをクリックして、検索ウインドウを開きます。

検索ボックスに「custom css」と入力するとページがリストアップされるので、それを開きます。

Custom CSSのページが開きました。「Add Brank CSS Block」をクリックすると、空のCSS入力欄が作成されます。ここのチェックは外しておきましょう。

カスタム項目用のCSSをコピペする

このCustom CSSのページに、CSSをコピペしていきます。新規タブで下のページを開いてください。

https://ethomasv.github.io/RemNoteTheme/Customizations.css (カスタム項目のCSS)

テキストのみのページが開かれます。「/ 1」「/ 2」と番号が振られていることに注目してください。

これを番号ごとに分けてコピペしていきます。最初は1の中身のみをコピー。

これをCustom CSSページに作成した入力欄に貼り付けます。

後は同じ流れを番号の数だけ繰り返しましょう。

  1. 「Add Brank CSS Block」をクリック → チェックを外す
  2. CSS掲載ページから番号内のコードをコピー
  3. 入力欄に貼り付け

全て完了すると、Custom CSSのページに9個のCSSコードが作成されるはずです。

全体的なテーマ用CSSをインポート

9個作成できれば、その下にあと2つCSS入力欄を作成してください。チェックを外して、以下の2つのコードをそれぞれ別々の入力欄に貼り付けます。

@import url('https://ethomasv.github.io/RemNoteTheme/LightBlueRemnote.css');
@import url('https://ethomasv.github.io/RemNoteTheme/DarkModeRemnote.css');

貼り付け後の画面はこんな感じになるはずです。

上で9個コピペしたのはページの部品ごとのCSS。後の2つは全体的なCSSをそれぞれ、Web上のファイルからインポートする一文です。
これによってCSSにアップデートがあった場合、それを自動的に適用できます。

テーマを有効化する

それではテーマを実際に使ってみましょう。基本的には、

  1. 最後に入力したインポート文のうち、どちらか1つのチェックボックスをONにする
  2. その上で、最初にコピペした1か2のどちらかをONにする

これだけでOKです。ライトテーマなら「LightBlueRemnote.css」と2番、ダークテーマなら「DarkModeRemnote.css」と1番という組み合わせ。
ここが間違っていると残念なカラーリングになってしまうので、組み合わせを間違えないようにしてください。

今回はライトテーマを選択。チェックを入れると即反映されます。

爽やかなカラーリングに変わりました。この変更はデバイスを超えて適用され、iPhoneやその他の端末でも有効になります。

Custom CSSページをサイドバーに表示する

このCustom CSSのページは、基本的にはサイドバーに表示されません。なので一度閉じてしまうと、また検索する羽目になります。今後CSSを編集したい方は、サイドバーに表示するよう設定を変更しておきましょう。

  1. ページ右上のメニューをクリック
  2. 「Tag this Rem as a Document」をクリック

これでページをサイドバーに表示することができます。

タイトルとURLをコピーしました