【期間限定 1/7(水) まで】エックスサーバー最大30%OFFキャンペーン実施中!

【SWELL非公式マニュアル】細かなレイアウト調整方法

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

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

目次

\ 初心者におすすめ /

以下の3つを利用すると
最短最速でブログ収益化ができます

【レンタルサーバー】

エックスサーバー

【WordPressテーマ】

SWELL

【SEOツール】

ラッコキーワード

上記のリンクを選択すると、各サービスの詳しい記事に移動します。

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

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

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

レイアウト設定パネル
SWELL公式サイト:レイアウト設定パネル

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

SWELLブロックのガイド表示
SWELL公式サイト:SWELLブロックのガイド表示

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

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

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

ver.2.5時点まででの変更点

  • レイアウト設定」は廃止されたので、サイドバーのブロックパネル「ブロック下の余白量」から設定してください。
  • 各ブロックの上側の余白設定を廃止。
  • ほとんどのブロックで設定可能。
  • ブロックツールバーからは5段階・サイドバーの設定パネルからは7段階で調整できるようになりました。
SWELL公式サイト:ブロックツールバー
SWELL公式サイト:サイドバーの設定パネル

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

レイアウト設定」の廃止に伴い、クラシックエディターでの余白の設定は自分でクラスを設定する必要があります。

SWELL公式マニュアル:SWELLの各ブロックで使用できるレイアウト設定・上下の余白調節

この記事を書いた「ブルー」です。
プログラマー×ブロガー
へなちょこシステムエンジニアが副業ブログで月収10万円を達成。エックスサーバー、SWELL、ラッコキーワードを使った稼げるブログを作る方法を解説します。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次