SWELLの各ブロックで使用できるレイアウト設定・上下の余白調節

SWELLでは、ボックス装飾で様々なデザインを簡単に使用することができます。

しかしそれだけでなく、上下の余白量を調節したり、PCだけ・スマホだけで表示したりするという細かなレイアウトの調節も簡単に行うことができるようにしています。

このページではそれらの設定方法を解説していきます。

ブロックエディターでのレイアウト設定方法

段落ブロックと、SWELLブロックの装飾ブロックのコントロールパネル（エディター右側の設定パネル）に、「レイアウト設定」という特殊項目を追加しています。

ここから、ブロックに適用したいレイアウトにチェックを入れるだけで簡単に余白量などの微調節が可能です。

上下の余白調節が可能なブロックについて

ver. 1.2.5より、段落ブロックと装飾ブロックで使用可能な「レイアウト設定」のうち、「上下の余白に関する設定」が以下のブロックでも使用可能になりました。

• リストブロック
• カラムブロック
• ボタンブロック
• 画像ブロック
• 見出しブロック
• 関連記事ブロック

クラシックエディターでのレイアウト設定方法

クラシックエディタでは、ツールバーの「スタイル」メニューから使用できます。

適用したいレイアウトを選択すると、その位置にレイアウトスタイルの適用されたDIVタグが挿入されます。

複数のレイアウトを適用させたい場合は、すでに挿入されているブロックの中にカーソルがある状態で、さらにスタイルメニューからレイアウトを選択してください。

divの入れ子状態が気になる人は、「テキストエディター」に切り替えて、直接一つのdivタグにレイアウトスタイル用のクラスを付与してご使用ください。