cover image

本文をセクションごとに分けられるようになりました

管理画面で「見出しに合わせてセクションを分ける(区切る見出しの指定)」を設定すると、本文がセクションごとに分けられるようになりました。
 
と、言ってもちょっとわかりづらいと思ったので、デモ用のサイトを作りました。
 
notion image
 
導入し、偶数奇数でセクションごとの背景色を変えるとこんな感じになります。
 

利用方法

  1. 管理画面のサイトデザイン編集を開く
  1. ↓のような項目が増えていますので、区切りを設定したい要素を選択してください。
notion image
選択出来る項目は
  1. Heading 1
  1. Heading 2
  1. Heading 3
になります。
それぞれの見出しの上で区切って、次のセクションになります。
 
セクションは次のようなdomにわけられます。
<section class="separatedSection">
  <div class="separatedSection__contentsWrapper">
    <h2>見出しサンプル</h2>
    <p>本文サンプル</p;>
  </div>
</section>
HTML
 
また、今回の変更にともなって、
  • タイトルエリア
  • コンテンツフッターエリア
  • フッターエリア
それぞれに、ラッパー要素を追加しました。サイズ調整等にお使いください。

デザイン変更方法

上記サンプルのように設定する場合はこのようなCSSとなります。
.page {
  background-color: #f0f7ff;
}
.page .container {
  max-width: 100%;
  padding: 0;
}
.titleSection__contentsWrapper,
.separatedSection__contentsWrapper,
.contentsFooterSection__contentsWrapper  {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px;
}
.separatedSection:nth-child(even),
.contentsFooterSection {
    background-color: #fff;
}
CSS
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
 
今後もAnotionをよろしくお願いします。