セクションごとのスタイル オプションを活用して、ページにバリエーションとコントラストをもたらしましょう。

既定では、ページ セクションはサイト全体のスタイルに従いますが、個々のセクションのスタイルを設定することで、デザイン、背景、色、その他のセクション固有の設定を変更することができます。

ページ セクションやセクション スタイルはバージョン7.1で利用可能です。

セクションのスタイルを変更する

個々のページ セクションのスタイルを設定する方法は次の通りです。

1. [ページ] パネルを開き、ページ上で [編集] をクリックします。
2. セクションにカーソルを合わせ、[セクション編集] をクリックします。オプションはセクションの種類によって異なります。
3. セクションごとのオプションのスタイルを設定するには、[デザイン] をクリックします。このタブには、[フォーマット] や [ギャラリー] など、別の名前が使用される場合があります。セクションの種類によっては、このタブでアンカー リンクを作成できます。
4. 背景画像、動画、またはアートを追加するには、[背景] をクリックします。背景コンテンツは、セクションの端から端までフルブリードで表示することも、はめ込みで表示することもできます。
5. カラー テーマ を選択するには、[色] をクリックします。カラー テーマに変更を加えると、そのテーマを使用しているサイト内のすべてのセクションに影響します。

創造エディターのグリッドと間隔をカスタマイズする

創造エディターのセクション スタイルを開いた後、[デザイン] タブでこれらの設定を変更できます。

• グリッドの高さを変更する - [行数] を使用して、セクションのグリッド内の行数を設定します。これは、デスクトップ レイアウトとモバイル レイアウトで異なる設定が可能な唯一のセクション スタイル オプションですが、最小行数は、追加したブロック数とその配置方法にも依存します。セクションの右下隅にある青い矢印アイコンをクリックしてドラッグすることで、ページ上で高さを直接変更することもできます。
• ブロック間隔の調整 - [間隔] を使用して、グリッド内のブロック間のパディングの量を設定します。[間隔なし]、[プリセットの間隔] を選択するか、[...] をクリックして、カスタムで縦と横の間隔を設定します。
• セクションのパディングを追加してカスタマイズする - コンテンツの高さと配置をより細かく調整するために [画面いっぱいに表示] を有効にします。セクションのコンテンツの周囲にパディングが必要ない場合は、無効のままにしておきます。次のオプションは、[画面いっぱいに表示] が有効になっている場合にのみ表示されます。
  • セクション グリッドの外側にパディングを追加する - [高さ] で [小]、[中]、[大] から選択するか、[...] をクリックしてカスタムの高さを設定します。
  • 追加の高さのパディングを表示する場所を設定する - [配置位置] でコンテンツを上端で揃え、コンテンツの下にパディングを追加します。コンテンツを中央に配置するためには、コンテンツの上下にパディングを追加します。コンテンツを下端で揃えるためには、コンテンツの上にパディングを追加します。

クラシック エディターの高さやスペースをカスタマイズする

クラシック エディターのセクションでセクションスタイルを開くと、[デザイン] タブでこれらの設定を変更できます。

• セクションの高さを変更する - [セクションの高さ] で、ページ上でのセクションの高さを変更します。コンテンツが多いセクションは、設定よりも高く表示される場合があります。これは、セクションのコンテンツの上下のパディングの量にも影響します。
• コンテンツの幅を変更する - [コンテンツの幅] で、セクションの幅のどれだけの範囲をコンテンツが占めるかを設定します。
• セクションの境界線に対するコンテンツの配置方法を変更する - [コンテンツの配置位置] を使って、コンテンツがセクションの境界線に対しどのように配置されるかを設定します。

セクションの仕切りを追加する

ブロック セクション、自動レイアウト、ギャラリー セクションの下部に独自の仕切りを追加できます。サイトの最初のセクション仕切りを作成すると、その仕切りの設定が後で作成する仕切りに適用されます。セクションの仕切りを異なるものにしたい場合は、作成時にそれぞれを手動でカスタマイズします。

セクションの仕切りを追加する方法は次の通りです。

1. [ページ] パネルを開き、ページ上で [編集] をクリックします。
2. セクションにカーソルを合わせ、[セクション編集] をクリックします。
3. [デザイン] で、[仕切り] トグルをオンに切り替えます。
4. 表示される設定を使用して、仕切りをカスタマイズします。

セクションの仕切りをカスタマイズする

[仕切り] トグルをオンに切り替えたら、次のオプションを使用して仕切りのスタイルを設定します。

• 図形 - シャッフル アイコンをクリックして設定をランダムにするか、設定アイコンをクリックして図形を選択し、設定を手動で変更します。
• ストローク - 仕切りに実線の境界線、点線の境界線、もしくは境界線なしを選択します。
• 色 - 境界線の色をサイト全体のパレットから選択します。
• 太さ - 小、中、大のオプションで境界線の太さを設定します。...をクリックし、手動で仕切りの太さを変更します。

仕切りのないセクション

ストアやブログ セクションなど、セクション区切りが含まれないセクションがページに含まれている場合は、空白のブロック セクションを使ってセクション区切りの外観を再現できます。

この仕切りが上のセクションと相互作用する機能は、組み込みのセクション仕切りの場合と完全に同じではないことにご注意ください。たとえば、セクションに背景画像が設定されている場合、仕切りは画像に直接隣接するのではなく、画像の下に表示されます。

コレクション セクションの下に仕切りを追加する方法は次の通りです。

1. ページ パネルを開き、仕切りがないセクションのページで [編集] をクリックします。
2. そのセクションの下にある [セクションを追加] をクリックします。
3. [白紙セクションを追加] をクリックし、[セクション] をクリックします。
4. 新しいセクションにカーソルを合わせ、[セクション編集] をクリックします。
5. [高さ] を小に設定し、[仕切り] トグルをオンにします。
6. 必要に応じて仕切りをスタイリングします。このセクションにブロックを追加しないでください。

セクション スタイルでは何を変更できますか？

セクション スタイルで変更できる内容は、セクションの種類によって異なります。

ブロック セクションと自動レイアウト

ブロック セクション (創造エディターまたはクラシック エディター) と自動レイアウトでは、背景と色、ならびにセクション固有のデザイン オプションをカスタマイズできます。セクション固有のスタイルについて詳しくはこちらをご覧ください。

• 創造エディター
• クラシック エディター
• 自動レイアウト

コレクションとギャラリー セクション

ブログやストア セクション、ギャラリー セクションなどのコレクション セクションでは、色やセクション固有のデザイン オプションをカスタマイズできます。セクション固有のスタイルについて詳しくはこちらをご覧ください。

• コース セクション
• ブログ セクション
• カレンダー セクション
• ギャラリー セクション
• ポートフォリオ セクション
• セクションを保存する
• 動画セクション