【読みやすい!】SWELLでブロック間や行間の余白カスタマイズ方法

【読みやすい!】SWELLでブロック間や行間の余白のカスタマイズ
悩んでいる男性

SWELLを使って、行間やブロック間の余白を設定・カスタマイズする方法ってある?

今回はこんな悩みにお答えします。

この記事の内容
  • 行間・ブロック間の余白設定方法
  • 行間・ブロック間の余白一括カスタマイズ方法
  • ステップブロック内の余白のカスタマイズ方法
この記事を書いた人
しんでぃ
  • 本職は最高マーケティング責任者
  • しんでぃブログ(主にブログ運営×SWELL)
  • SWELLレビュー記事は公式サイト掲載
  • ブログ開設5ヶ月目で5桁収益
  • 現在8ヶ月で最高3.6万

Twitter : (@shinshindy33)

今回はWordPressテーマ「SWELL」で、行間やブロック間の余白を指定する方法とカスタマイズについて紹介します。

一部に適用する場合と、全体に適用する場合と2パターンご紹介します。

コピペで出来るので、気軽に試してみてください。

>>SWELLの口コミ評判レビューはこちら

>>SWELLの初期設定はこちら

目次

行間や余白を空けるだけで読みやすくなる

まずはこちらの3つの例をご覧ください。

パターンA

SWELLはWordPressテーマです。使いやすいのが特徴です。

グーテンベルグに完全対応しており、標準ブロックエディタ機能を強化した独自のカスタマイズが施されているため、高機能かつ操作性抜群です

デザインも洗練されており、CSSなどの知識なしでカスタマイズ可能です。初心者にとてもおすすめのテーマです。

パターンB

SWELLはWordPressテーマです。使いやすいのが特徴です。

グーテンベルグに完全対応しており、標準ブロックエディタ機能を強化した独自のカスタマイズが施されているため、高機能かつ操作性抜群です

デザインも洗練されており、CSSなどの知識なしでカスタマイズ可能です。初心者にとてもおすすめのテーマです。

パターンC

SWELLはWordPressテーマです。使いやすいのが特徴です。

グーテンベルグに完全対応しており、標準ブロックエディタ機能を強化した独自のカスタマイズが施されているため、高機能かつ操作性抜群です

デザインも洗練されており、CSSなどの知識なしでカスタマイズ可能です。

初心者にとてもおすすめのテーマです。

パターンA~Cの中で、どの文章が読みやすかったでしょうか。

答えはCですね。

このように、行間とブロック間の余白は読みやすさに大きな影響があります。

パターンCでは、適切な改行も考慮しています。

Shindy

文字ばかりの文章は、第一印象で読む気が失せますよね

適切な余白を持たせることで、文字ばかりの印象が薄れ、格段に読みやすくなるのです。

そこで今回は、SWELLの余白の設定方法とカスタマイズ方法について、以下の3つの場合で紹介します。

  1. 記事の一部だけに余白を設定する
  2. 記事の全体に行間・余白を一括設定する
  3. ステップブロック内の余白を一括設定する

※CSSの修正はご自身の責任の範囲内でお願いいたします。

SWELLで記事の一部だけに余白を設定する

まずは記事内で一部だけ余白を適用する方法です。

余白設定には2つのパターンがあります。

  • ブロック間:Enterキーで改行した時にできるブロック下の余白
  • 行間:Shift+Enterで改行した時、もしくは文章が折り返された時の行と行の間の余白

今回はブロック間と行間の余白設置それぞれの方法について紹介します。

  1. SWELL独自の余白設定(ブロック間)
  2. WordPress標準搭載のスペーサー機能(ブロック間)
  3. 行間の余白設定(行間)

SWELL独自の余白設定(ブロック間)

SWELLでは、各ブロックごとに余白を設定出来る機能があります。

SWELL独自の余白指定機能

ブロックでツールバーを呼び出しサイズ毎に指定する、あるいは右のブロックエディタから単位ごとに細かく指定する方法です。

実際の余白は以下のようになります。

余白無し(0em)

余白小(1em)

余白中(2em)

余白大(4em)

余白特大(6em)

ブロック下に指定した余白ができます。

WordPress標準搭載のスペーサー機能(ブロック間)

WordPress標準搭載のスペーサー機能を、各ブロック間に使用する方法もあります。

WordPress搭載のスペーサー

こちらは、SWELL独自機能の余白設定よりも大きな余白を、より細かく指定できます。

WordPress搭載のスペーサーは大きい余白を指定できる

SWELLの余白指定では単位がemであったのに対し、こちらはピクセルでの指定です。

大きな余白を指定するには向いていますが、呼び出しがやや面倒なため、普段使いではSWELLの独自機能の方が便利です。

行間の余白設定(行間)

行間の余白を設定するには、編集画面右のブロックエディタから指定できます。

行間の余白設定

ブロックエディタ内にある「行の高さ」を変更することで、行間が指定できます。デフォルトでは1.5になっています。

実際の行間の余白は以下のようになります。

行の高さ(1.5)
行の高さ(1.5)

行の高さ(3)
行の高さ(3)

SWELLで記事全体の余白を一括設定する

各ブロック毎で余白を設定出来るとはいえ、これを毎回設定するのはかなり面倒ですよね。

そこで、CSSで記事内全体の行間とブロックの余白を一括で設定する方法を紹介します。

行間の余白カスタマイズ

下記CSSコードを「追加 CSS」にコピペするだけです。

※追加CSSの場所は、「外観」>「カスタマイズ」>「追加CSS」です。

  
    /*行間*/
	.post_content{
	line-height: 2.0;
	}
  

数字を変えることで、行間を調整できます。

追加CSSにコピペ
追加CSSにコピペして「公開」をクリック

ブロック間の余白カスタマイズ

こちらも同様に、下記CSSコードを「追加 CSS」にコピペするだけです。

  
    /*ブロック間*/
	.post_content > *{
	margin-bottom: 3.0em;
	}
  

3.0の数字を変えることで、ブロック間の余白を調整できます。

ステップブロック内の余白を一括設定する

先ほど紹介したCSSコードを追加しても、SWELLのブロック機能にある「ステップブロック」内の余白は変わりません。

Shindy

僕は今回カスタマイズした理由も、このステップブロック内の余白を設定するためでした

そこで、「ステップブロック」内の余白設定方法についても紹介します。

ステップブロック内の行間の余白カスタマイズ

下記CSSコードを「追加 CSS」にコピペするだけです。

※追加CSSの場所は、「外観」>「カスタマイズ」>「追加CSS」です。

  
    /*ステップブロック行間*/
	.swell-block-step__body{
	line-height: 2.0;
	}
  

先ほどと同様に数字を変えることで、行間を調整できます。

ステップブロック内のブロック間の余白カスタマイズ

こちらも同様に、下記CSSコードを「追加 CSS」にコピペしてください。

  
    /*ステップブロックブロック間*/
	.swell-block-step__body> *{
	margin-bottom: 3.0em;
	}
  

3.0の数字を好きな数字に変え、ブロック間の余白を調整できます。

ステップブロックのタイトル下の余白カスタマイズ

もう1点気になったのは、ステップブロックのタイトル下の余白でした。

ステップブロックタイトル下の余白

今回は、h3の見出しと同じ余白で設定しました。

以下がCSSコードです。

  
    /*ステップブロックタイトル余白*/
	.swell-block-step__title {
	margin: 3em 0 2em;
	}
  

3.0emの数字を変えるとタイトルの上の余白が、2emを変えるとタイトルの下の余白がそれぞれ変わります。

今回はh3の見出しに合わせていますが、好きな大きさに調整してください。

まとめ:余白で文章を読みやすくしよう

以上、SWELLでの余白の設定方法とカスタマイズ方法を紹介しました。

余白を調整するだけで、文章が読みやすくなります。

執筆の際は、余白に気をつけながら読みやすい文章を心がけましょう。

Shindy

簡単に出来るので、ぜひ挑戦してみてください

\読みやすいブログを作りたいなら/

その他のSWELLカスタマイズ

【読みやすい!】SWELLでブロック間や行間の余白のカスタマイズ

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

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