Roam Researchでブロックに色を設定する方法

おじか

2020年12月26日 18:10

本noteではRoam Researchのブロックに色を設定する方法を紹介します。

できるようになること

[[roam/css]]にコードを設定し、色を付けたいブロックに任意のタグを設定することで、ブロックの色を変えることができます。

今回は下記3つの範囲でブロックの色を変える方法について説明します。

・子ブロック含めた全体
・指定したブロックのみ
・子ブロックのみ

共通部の設定：cssのコードブロック作成

ブロックの色を変える3つの方法でcssのコードブロックの作成までは共通となりますので、そこを説明します。

1. roam/cssページの作成

　どこのページでもいいのでroam/cssと記載し、roam/cssページを作成します。※作成済みな人は不要です。

2. roam/cssページ内にコードブロックを作成

　/と入力し、選択肢の中からCode Blockを選択してください。

3. コードブロックをcssに設定

　右上のjavascript▼をクリックしcssを選択してください

下記に4つのコードを記載しますので、それぞれ使用したいものを作成したコードブロックに張り付けてください。

①子ブロック含めた全体の色を変える

[data-page-links*="bl-ch:blue"]{
 background-color: #cce5ff;
 border: solid 1px #b8daff;
 border-radius: 5px;
 margin-bottom: 5px;
}

上記コードではタグ「#bl-ch:blue」を記載したブロックの色が薄い青になります。

色を変えたい人は background-color: とborder: solid 1pxの後を変更してください。下記のように色がついている□をクリックすることで任意の色を設定することもできます。

備考
・[data-page-links*="bl-ch:blue"]部の""内を変更することで使用するタグを変更することができます。
・border-radius: 5px; はブロックの角を丸くする設定です。
・margin-bottom: 5px; は色を付けたブロックの下に余白を追加する設定です。

②指定したブロックのみ色を変える方法

[data-page-links*="blck:blue"] > .rm-block-main {
 background-color: #cce5ff;
 border: solid 1px #b8daff;
 border-radius: 5px;
 margin-bottom: 5px;
}

上記コードではタグ「#blck:blue」を記載したブロックのみ色が薄い青になります。（子ブロックは色が変わらない）

コードを変更したい人は①と同様の考え方で実施できます。

③子ブロックのみの色を変える方法

[data-page-links*="chld:blue"] > .rm-block-children{
 background-color: #cce5ff;
 border: solid 1px #b8daff;
 border-radius: 5px;
 margin-bottom: 5px;
}

上記コードではタグ「#chld:blue」を記載した子ブロック以降の色が薄い青になります。（タグを記載したブロックは色が変わらない）

コードを変更したい人は①と同様の考え方で実施できます。

④ ①～③のすべてを設定する場合

[data-page-links*="blck:blue"] > .rm-block-main,
[data-page-links*="bl-ch:blue"],
[data-page-links*="chld:blue"] > .rm-block-children
{
 background-color: #cce5ff;
 border: solid 1px #b8daff;
 border-radius: 5px;
 margin-bottom: 5px;
}

上記コードでは①~③までのすべてを同時に設定することができます。

おまけ

参考にしたWeb記事

まとめ

今回はブロックの色を変える方法を紹介しました。

情報を区切る際に色を変えるのはとても有効だと思いますので是非使ってみてください。あと色がカラフルになるのが個人的には気に入っています。

最後に、Roam Researchの日本語情報はTwitterの#Roam部が一番集まっていると思います。気になった方はぜひチェックしてみてください。
また、投稿されたツイートの中から面白かったものをまとめた#先週のRoam部マガジンというのも作っているのでよろしければ寄って行ってください。