cover image

ヘッダーとフッターへパンくずリストを表示できるようになりました

Notionでページシェアした場合と同じ見た目の、ヘッダーへのパンくずリストを表示できるようになりました。
新規にサイト作成を行った方は標準でONになっております。
 
ヘッダー部とタイトル部へそれぞれ配置した例
ヘッダー部とタイトル部へそれぞれ配置した例
 
また、以前はタイトル上にのみだったパンくずリストをフッター部にも配置できるようになりました。これにより
  • ヘッダー
  • タイトル上
  • フッター
の3箇所へそれぞれ表示非表示を切り替えられるようになります。
※パンくずリストでコレクションそのものが抜けてしまう不具合がありますが、こちらは近いうちに修正予定です。

既存のサイトへの適用

以前の状態を保持するためにチェックを入れていますので、こちらを外すと利用できるようになります。
また、今回の適用からPCスマホ両方でヘッダーの高さを45pxに固定しました。CSSで調整していた場合にはご確認をお願いします。
※すぐに適用されない場合:適用して最初のページ閲覧では以前のキャッシュが残るため、アクセス→30秒以上おいて再度アクセスすれば適用されます。
notion image
 

CSSのためのクラス

パンくずリストにはそれぞれ .breadcrumbs のクラスがついていますが、それぞれの場所に合わせて以下のクラスを追加で付与しています。
/* ヘッダー部のパンくずリスト */
.headerBreadcrumb {}

/* タイトル部のパンくずリスト */
.titleSectionBreadcrumb {}

/* フッター部のパンくずリスト */
.footerSectionBreadcrumb {}
CSS
 
アップデート内容は以上です!
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
今後もAnotionをよろしくお願いします。