サイドバーコンテンツ

1-1

1-2

1-3

※こちらのデモの「カラム内にカラムを挿入する」部分がNotion側の仕様変更で利用できなくなる可能性がありますので、ご注意ください。

前回のサンプルである、PCでスクロールに追従するサイドバーを利用するとコンテンツ内でカラムわけができない制約があります。

PCで画面に追従するコンテンツ

そこで今回はPCでスクロールに追従するサイドバー（スマホでは非表示）と、カラム分けされたコンテンツを両立する方法について書いていきます。

まずこちらの記事を参考にして、カラム内にカラムを挿入し、サイドバーとして挿入したいコンテンツとそれ以外のコンテンツで分割します。

（A Journalさん記事をありがとうございます！）

Notionのブロックをもっと自由に操る | 列の中に列を作る方法も

今回のサンプルでは、サイドバーとメインコンテンツでまず２つに分け、メインコンテンツ内で上記記事のテクニックを利用してさらに３カラムに分割しました。

その後、サイドバーのコンテンツを囲うnotion-rowのIDを指定して、以下のCSSを追記します。

/* サイドバーをスマホでは非表示にする */
#block-c502927635c043338c2f49d537b653d5 {
		display:none;
}
@media (min-width: 640px) {
		.page,
		.notion-row {
				overflow: visible;
		}
    
		/* 固定したい要素のID */
		#block-c502927635c043338c2f49d537b653d5 {
				display:block;
				position: sticky;
				top: 50px;
				align-self: flex-start;   
		}
}

これでサイドバーとカラム分けされたコンテンツを両立できるようになります。

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を利用すると内容が同期できて便利です。