見出し画像

Roam Research: ベストなテーマを設定する方法

Sangmin Ahn

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

【主要なアップデート】
（2020.06.20）Azlenさんが開発したスタイルはページの幅が調整出来ます。
（2020.06.07）CSS：コピペの代わりに、import が可能になりました。

0  はじめに

まだまだ新規アカウントの作成は順番待ちとなっている Roam Research（以下、Roam）ですが、開発がものすごい勢いで進んでいます。

Roamのスタイル（テーマ）を変更する方法は別のnoteでも紹介したことがあります。スタイルの変更がRoam上で行えるようになりましたのでその方法を簡単にまとめさせていただきます。

1  カスタムCSS用のページを作成

まず必要なのは、カスタムのCSSを格納するためのページです。CSSを格納するページには２つルールがあります。

① roam/css という名前にすること
② 余分なスペースがなく、すべて小文字であること

画像1

カスタムCSSを格納するページはこれでOKです。これから新規のスタイルはこのページに追加していきます。他のページを気にする必要はありません。

2  「roam/css」ページにカスタムCSSを追加

スタイル用のページが用意できましたので、このページを使って魔法をかけてみましょう。カスタムCSSを追加し有効にするには、①スタイル名と②スタイル用のCSSコードが必要です。

（1）まず、ページにスタイル名を追加します

画像2

▲ Zenithという名のスタイル

（2）カスタムCSSを追加します

次の行にコードブロックを作ってコードを追加してください。コードブロックは行をインデントしてから作ります。下記図参照。

コードブロックは行をインデントして作る

画像3

▲Zenith用のスタイルをコードブロックに追加した一例

CSSをコピペする代わりに、コードブロックに Github からインポートするコードを書くことも出来ます。

画像6

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

（追記：2020.06.20）

画像7

importしたあと、page-widthを設定することでページの幅が変更できます。

:root{
 --page-width: 750px;
}

（3）コードのスタイルを clojure から css に変更します

コードブロックの右上にソースコードの種類を変更するメニューがあります。このメニューから「css」を選択してください。

画像4

css を選択すると該当するスタイルが全てのページに反映されます。

画像5

3  スタイルの一覧

既に多くの人がレディーメードのスタイルをシェアしています。詳細は下記のページを参考にしてください。きっと好みに合うスタイルが見つかると思います。

上記のリストですと、僕のオススメは、「Zenith」と「Leyendecker」です。

4  まとめ

CSSを追加したあと、ニーズにあわせて変更してみると CSS の勉強にもなると思います。カスタムCSSについて何か質問などあれば、#Roam部 のタグをつけて Twitter で投稿してください。知っていることであれば返答させていただきます。

この記事が気に入ったらサポートをしてみませんか？