見出し画像

誰にでも簡単、Roamテーマを好みに編集

Sangmin Ahn

こんにちは、Choimirai Schoolのサンミンです。

0  はじめに

Roamをある程度使い続けるとRoamの見た目を変えたいという願望も出てくる。

Roamのテーマは見た目だけでなく機能性を向上させることもできますのでニーズに合わせ、いくつか試してみることをお勧めしたいです。

但し、Roamのテーマは[[roam/css]]のページを作って、直接 CSS コードを書く必要がありますので初心者の方にはハードルが高いのも事実です。他の人が作ったものを借りてそのまま使っている方も多い。今回の note ではより簡単にRoamのデザインをカスタマイズする方法をシェアします。

1  カスタマイズする手順

Roamのデザインを変更する方法はとても簡単で、4つのステップにわけて行います。

①基本となるテーマを選ぶ
②変更したい箇所を検索・選択
③ご自分の[[roam/css]]へコピー
④ニーズに応じて色などを変更

2  基本となるテーマ選び

今回の note で参考にするのはAlexanderさんのサイトです。

上記のリンクをクリックしますと次の画面が表示されます。

画像1

選択可能なテーマは4つ。

①Apple

@import url('https://rcvd.github.io/roam-css-system/themes/apple.css');

②iA Writer Quattro

@import url('https://rcvd.github.io/roam-css-system/themes/quattro.css');

③LessWrong

@import url('https://rcvd.github.io/roam-css-system/themes/lesswrong.css');

④Things

@import url('https://rcvd.github.io/roam-css-system/themes/things.css');

まずは、それぞれのコードをご自分のRoamへコピーしてデザインがどう変わるのかを試してみてください。Thingsのテーマを[[roam/css]]ページに貼り付けた画面の例です。

画像2

3  「Customize It」ページ

基本テーマ選びが終わりましたら次はカスタマイズです。4つの基本テーマから「Things」を選択したことを前提に進めさせていただきます。

基本テーマから「Things」を選択したことを前提

上記のリンクをクリックしますと「Customize It」に遷移します。Customize Itページは2つのセクションに分かれています。

①カスタマイズ用のリンク
②CSSの変数名と詳細

■カスタマイズ用のリンク

Thingsを前提で進めますので、ページのリスクから[[Roam CSS System things auto]]を選択してください。

[[Roam CSS System things auto]]

画像6

■CSSの変数名と詳細

Customize Itのベージをスクロールしますと「Customize the variables」のセクションが表示されます。

画像4

上記のテーブルはRoamのデザインをカスタマイズする時に役立ちますのでご自分のRoamにコピーしておいて変更を行う際、参考にしてください。

4  変更したい箇所を検索

基本のテーマ選びが終わりましたら、Customize Itのページから該当リンクを選択し変更するエレメントを選択してください。

例えば、Customize Itのページから[[Roam CSS System things auto]]を押下しますと次の画面が表示されます。

画像5

この中から必要な箇所をご自分の[[roam/css]]へコピーし、ニーズに合わせ色やサイズなどを変更してください。

※重要：変更可能なエレメントは70箇所前後あります。それぞれのエレメントを変えることで自分のRoamへどんな影響を与えるかは試行錯誤が必要ですので色々と試す必要があります。

細かいエレメントは変更せず4つの基本テーマだけを試してみるのもいいと思います。

AlexanderさんのサイトからCSSをコピーする際は、①基本テーマと②エレメントを別のブロックに分けて管理するのをお勧めしたいです。こうすることで何を変更するのかを意図的・明示的に管理できます。

①基本テーマと②エレメントを別のブロックに分けて管理

画像6

5  まとめ

[[roam/css]] ページを使ってRoamのデザインがカスタマイズできたのは2020年6月から。

この1年間、[[roam/css]] を利用して様々なテーマが紹介されていますが、Alexanderさんのアプローチがその中でも断然カスタマイズしやすい気がします。

細かいエレメントは変更せず4つの基本テーマだけを試してみるのもいいと思いますのでデフォルトのデザインを変えたいという方はぜひ！

いいなと思ったら応援しよう！