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

記事上のウィジェットエリア

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

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

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

目次
目次前広告表示エリア

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

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

レイアウト設定パネル
レイアウト設定パネル

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

SWELLブロックの「装飾ブロック」で使うと、適用中のレイアウトの名前が表示されるので分かりやすくて便利です!

SWELLブロックのガイド表示
SWELLブロックのガイド表示

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

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

  • リストブロック
  • カラムブロック
  • ボタンブロック
  • 画像ブロック
  • 見出しブロック
  • 関連記事ブロック
上下の余白設定パネル
上下の余白設定パネル

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

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

レイアウトの選択

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

レイアウトの使用

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

複数のレイアウトブロック

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

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
閉じる