Roam Researchでブロックを横に並べる方法②
本noteではRoam Researchでブロックを横に並べる方法のうちの一つを説明します。
ブロックを横に並べる別の方法を説明したnoteは↓こちら↓
できるようになること
・ブロックを横に並べること。
・ページの幅に応じて横に並べたブロックの配列が変わるようにすること。
・区切った区画を複数つかうこと。
（下記GIFはやることリストが縦2区画分使っています。）
なお、下記GIFでは画面の横幅いっぱい使う方法とブロックに色を設定する方法も設定しています。
設定方法
ブロックを横に並べる
1. roam/cssページの作成
どこのページでもいいのでroam/cssと記載し、roam/cssページを作成します。※作成済みな人は不要です。
2. roam/cssページ内にコードブロックを作成
/と入力し、選択肢の中からCode Blockを選択してください。
3. コードブロックをcssに設定
右上のjavascript▼をクリックしcssを選択してください
4. コードブロックに下記コードを記載
.roam-block-container[data-page-links*="dailynotes_grid"] .rm-block-children {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(600px, 1fr) );
}
span.rm-page-ref[data-tag="dailynotes_grid"] {
display: none;
}1行目の"dailynotes_grid"は使用したいタグ名に変更可能です。
4行目のminmax(600px, 1fr)の600の値を変えることでブロックの最低幅を変えることができます。分割数や画面サイズに合わせて調整してください。考え方は下記記事がわかりやすいかと思います。
7~9行目はタグを非表示にする設定をしています。表示させる場合は削除してください。
roam/cssの設定自体でつまづいた場合は下記noteも参考になると思います。基本的な設定方法を動画付きで説明しています。
区切った区画を複数使う
分割した区画を複数使うことでより複雑なレイアウトを構築することができます。下記Gifではやることリストが縦2つの区画、一時メモが横2つの区画を使用しています。
※#個人と#振り返りでブロックを横に並べるコードも若干異なります。画面を開いたときに個人は縦2列、振り返りは縦3列になるように調整しています。
縦2区画
.roam-block-container[data-page-links*="rm-row-span2"] {
grid-row: span 2;
}
span.rm-page-ref[data-tag="rm-row-span2"] {
display: none;
}横2区画
.roam-block-container[data-page-links*="rm-col-span2"] {
grid-column: span 2;
}
span.rm-page-ref[data-tag="rm-col-span2"] {
display: none;
}それぞれ1行目のrm-row-span2およびrm-col-span2を使用したいタグ名に変更可能です。
また、2行目のspan 2の数字を変えることで使う区画の数を変えることができます。
使い方
ブロックを横に並べる
横に並べたいブロックの親ブロックにタグを記載
（紹介したコードだと#dailynotes_grid）
区切った区画を複数使う
複数の区画を使いたいブロックにタグを記載
（紹介したコードだと#rm-row-span2等）
まとめ
今回はブロックを横に並べる方法のうち2つ目の方法を説明しました。
サイドバーを開くと縦にならんだり、複数区画を使ったりすることもできるのでレイアウトの自由度も広がり、面白い設定だと思います。是非チャレンジしてみてください。
また、独学なため間違い等あるかもしれませんが、その際はご連絡ください。
最後に、Roam Researchに興味を持っている人はTwitterの #Roam部 がおススメです。Roamの日本語情報の一番集まっている場所だと思います。
また、これまでの私のRoam Research関連の投稿は下記noteにまとめてます。細かいTipsが多いですが、一つくらいは刺さる投稿があると思います。