カラム内カラムを利用しながらサイドバーを作ってみる
サイドバーコンテンツ
1-1
1-2
1-3
※こちらのデモの「カラム内にカラムを挿入する」部分がNotion側の仕様変更で利用できなくなる可能性がありますので、ご注意ください。
前回のサンプルである、PCでスクロールに追従するサイドバーを利用するとコンテンツ内でカラムわけができない制約があります。
そこで今回はPCでスクロールに追従するサイドバー（スマホでは非表示）と、カラム分けされたコンテンツを両立する方法について書いていきます。
まずこちらの記事を参考にして、カラム内にカラムを挿入し、サイドバーとして挿入したいコンテンツとそれ以外のコンテンツで分割します。
今回のサンプルでは、サイドバーとメインコンテンツでまず２つに分け、メインコンテンツ内で上記記事のテクニックを利用してさらに３カラムに分割しました。
その後、サイドバーのコンテンツを囲う
notion-rowのIDを指定して、以下のCSSを追記します。CSS
これでサイドバーとカラム分けされたコンテンツを両立できるようになります。
2-1
2-2
2-3
2-4
※カラム内カラム挿入を使って、メインコンテンツの中で更にカラムを分けています。
Contents 1-1
Contents 1-2
Contents 1-3
Contents 2-1
Contents 2-2
Contents 2-3
Contents 3-1
Contents 3-2
Contents 3-3
3-1
Contents 1-1
Contents 1-2
Contents 1-3
Contents 2-1
Contents 2-2
Contents 2-3
Contents 3-1
Contents 3-2
Contents 3-3
カラム分けの方法は少しむずかしいので、下記Notionのリンクからこの記事の元Notionを複製して利用できるようにしておきます。
また、サイドバーを複数ページで共通して挿入したい場合には、カラム分け自体は各ページで作業が必要ですが、内容に関しては Synced Blockを利用すると内容が同期できて便利です。