区切りセクションブロック

プラグイン「Emanon Blocks」を有効化すると、「区切りセクションブロック」が利用できます。区切りブロックは、サイドバーなし（1カラム）のページで使用することを前提としたブロックです。「サイドバーなし」に指定した投稿ページ、固定ページで使用してください。

設定

区切りセクションブロックはサイドバーを非表示にした上で使用するブロックですので、主にランディングページなどでコンテンツ部分の区切りを表現したい時に使うブロックになります。区切りセクションブロック内に背景画像を配置することで簡単にランディングページを作る事ができます。

それでは区切りセクションブロックについて紹介します。ブロックエディタのEmanon Blocksから区切りブロックを配置します。

区切りセクションブロックの詳細な設定は編集画面右側のサイドバーで行います。

区切り線［上］設定 区切り線［下］設定

区切り線は、上下にスタイルの設定が可能です。

上下ともにアーチ型やトライアングルなど8種類のデザインを指定できます。デフォルト設定は非表示になります。

ブロック設定

区切りブロックの全体を囲むタグの指定が可能です。タグはdiv・sectionから選択します。

コンテンツ幅

区切りブロック内のブロック配置エリアの横幅を最大1180pxまで指定できる機能です。コンテンツ幅指定を無効にするとページ幅が自動で適用されます。

コンテンツ内余白［標準設定］

区切りブロック内の余白を上下指定が可能です。0pxから64pxまで余白を指定します。パソコン、スマホ・タブレットそれぞれに余白を指定できます。

コンテンツ内余白［詳細設定］

区切りブロック内の余白を任意の数字で設定する場合、ブロック内余白を詳細設定に指定してください。

またパソコン・タブレット・スマホでそれぞれの表示に合わせて余白を指定できます。

区切りセクション内（インナーブロック）のブロック間余白

表示例

区切りブロックは、インナーにブロックを配置することができます。下記ブロックは、Emanon Blocksの「区切りブロック」内に「カバーブロック」を全幅で配置した表示例です。

上記の表示を再現する手順です。

1. Emanon Blocksの「区切りブロック」内にカバーブロックを配置後、カバーブロックを全幅に指定します。

   

2. 区切りブロックの区切り線［下部］設定を2重ウエーブに指定します。

   

3. コンテンツ内余白［標準設定］で全ての余白を0に設定します。