3ステップでわかるRoam Researchのテーマの変更の仕方

Roam Researchの特徴の一つであるのが、自分自身でCSSを自由に変更できることです。

そのため、自分の好きなように変更することが可能です。

ですが、Roam Researchは全文英語のため変更の仕方がよくわからない・・という人もいるのではないかと思います。この記事ではどのようにRoam Researchでテーマを変更したら良いのかを3ステップでお伝えします。

ステップ1 CSSのページを作成する

まずはCSSを入れるためのページを作成してください。

ページ名はroam/cssです。

ページの作り方
右上のテキストボックスまたは左のメニューのAll pagesの横にある+ボタンを押すと作成することができます。

Roam Researchの面白いところは設定ページがあるわけではなく、自分自身で作成する必要があるのです。

ステップ2 変更したいCSSコードをそのページに入れてください。

ページの最初のブロックには、自身の入れたいテーマ名を入れてください。

*テーマ名は決められたものでなくても適当でも構いません。
[[roam]]とかでも可能です。

その次に、/code と打って、Code Blockを選択してください。

そうすると『“““』がでてきますので、

3つの“`を先頭と考えて、“`と“`の間に自分の挿入したいCSSコードを挿入してください。

ステップ3 CSSに変更する

コードブロックの画面右端にあるボタンからCSSに変更して、そのブロックをCSSとして認識させてください。

これでCSSテーマを変更できます。

このような感じでテーマを設定することができます。

こちらでおすすめのテーマを紹介しています。

一時的にテーマの変更をオフにしたい場合は?

画面右上にあるフィルターボタンを押して、自身が適用しているテーマのボタンを押すと、

一時的に現在使っているCSSフィルタを解除することができます。

こちらで動画で公開(全編英語)

全編英語ではありますが、こちらに動画でのテーマ変更の説明があったので紹介いたします。

GitにCSSが公開されている場合は1行でOK

主にGitにurlが公開されている場合はCSSファイルを直接読み込むことが可能なので、下記のように1行書くだけでCSSの読み込みができます。

@import url(‘https://azlen.github.io/roam-themes/zenith.css’);

もちろん、gitで公開されていなくてもurlの最後が.cssで終わっている場合は読み込みが可能です。

おすすめのテーマはこちらで紹介しています。ぜひ変更してみてください。
 Roam Research の生産性が段違いになるテーマ7選|Roam Research の生産性が段違いになるテーマ7選|続きはこちら

コメントを残す