【見やすさ激変】SWELLでブロック間の余白をカスタマイズする方法

・SWELLでブロック間の余白を広くしたい。

・ブロックごとに変更はできるけど、少し面倒‥

・SWELLでブロック間の余白を、一括設定する方法はないの?

こんな悩みを解決します。

本記事で分かること
  • 文章は余白があると読みやすい
  • SWELLでブロック間の余白を一括設定する方法
  • オススメの余白設定
この記事を書いている人

Twitter:(@opio1224)

SWELLでは、ブロックごとに余白を調節できます。

しかし、全てのブロックの余白を手動で調節するのは面倒ですよね。

僕も余白を広くするために、毎回手動で変更して面倒な思いをしていました。

そこで今回は、SWELLでブロック間の余白を一括設定する方法を紹介します。

デフォルトの設定を変更するので、ブロックごとに変更する手間がはぶけますよ。

SWELLの初期設定の余白が気に入らない人は、試してみてください。

それでは紹介します。

Contents

SWELLでブロック間の余白をカスタマイズする理由

SWELLでブロック間の余白を、カスタマイズする理由は以下の通り。

余白をカスタマイズする2つの理由

  • 文章は余白があると読みやすくなる
  • SWELLの初期設定は余白が小さい

1つずつ詳しく見ていきましょう。

文章は余白があると読みやすくなる

文章は、余白があると読みやすくなります。

余白がなく文字がギッシリ詰まっていると、圧迫感があり「読みづらい文章」と感じてしまうからです。

余白がない文章

文章は、余白があると読みやすくなります。

余白がなく文字がギッシリ詰まっていると、圧迫感があり「読みづらい文章」と感じてしまうからです。

どんなに良い内容の記事でも、読みにくいと感じた読者は読んでくれません。

なので、記事の質も大切ですがそれ以上に「見た目」が大切です。

余白を空けて、読者の負担にならない読みやすい文章にしましょう。

余白がある文章

文章は、余白があると読みやすくなります。

余白がなく文字がギッシリ詰まっていると、圧迫感があり「読みづらい文章」と感じてしまうからです。

どんなに良い内容の記事でも、読みにくいと感じた読者は読んでくれません。

なので、記事の質も大切ですがそれ以上に「見た目」が大切です。

余白を空けて、読者の負担にならない読みやすい文章にしましょう。

余白がある文章と余白がない文章、どちらが読みやすかったでしょうか。

おぴお

余白がある文章のほうが、読みやすいですよね。。

全く同じ文章でも、余白を空けるだけで読みやすくなります。

せっかく良い記事を書いても、読んでもらえないと悲しいので、見やすさにもこだわりましょう。

SWELLの初期設定は余白が小さい

文章は余白が広いほうが読みやすいと話しましたが、SWELLの初期設定は余白が小さいです。

実際に、ブログで稼いでいる方のサイトを30ヶほど分析した結果、SWELLの初期設定より「余白を大きく」設定してあるサイトが80%を超えました。

したがって、WordPressテーマをSWELLにしている方は、余白を広くすることをオススメします。

もちろん個人の好みもありますが、稼いでいるサイトの良い所をマネするのが「稼ぐ近道」かと。

設定も簡単なので、試してみてはいかがでしょう。

SWELLでブロック間の余白をカスタマイズする方法

それでは、SWELLで「ブロック間の余白をカスタマイズ」する方法を紹介します。

今回、紹介する方法は下記の2通り。

余白をカスタマイズする方法

  • ブロック間の余白を個別に設定する方法
  • 記事全体の余白を一括設定する方法

「ブロック間の余白」を個別に設定する方法は、SWELL独自の機能です。

すでに多くの方がご存知かもしれませんが、おさらいしておきます。

段落ブロックを一括設定する方法はCSSを追加するので、念のためバックアップを取ってから行いましょう。

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

それぞれ詳しく解説していきます。

ブロック間の余白を個別に設定する方法

「ブロック間の余白」を、個別に設定する方法は、SWELLの独自機能でやり方は超簡単。

SWELL 余白カスタマイズ
記事編集画面

記事編集画面から、上のように2つの箇所から余白の設定が可能です。

2つの違いは、画面右側の設定箇所のほうが細かく設定できます。

使い所はこんな感じ。

僕の場合だと、箇条書きで説明する際に「吹き出し」と「ボーダー」の間の余白を、設定1にしています。

おぴお

こんな感じで使えるので、見やすくなるように工夫して使ってみてください。

記事全体の余白を一括設定する方法

ブロック間の余白を一括で変更するには、「CSSを追加」します。

※SWELLでは現状、CSSを編集する以外に方法はありません。

下記、CSSコードを「追加 CSS」にコピペすれば完了です。

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

数字を変更すると、余白の大きさを調節できます。

CSSコードを追加する場所は、「外観」⇒「カスタマイズ」⇒「追加 CSS」です。

WordPress 外観 カスタマイズ
WordPress管理画面 「外観」⇒「カスタマイズ」

WordPress管理画面から「外観」⇒「カスタマイズ」をクリック。

「追加 CSS」をクリック

カスタマイズ画面の一番下に「追加 CSS」という項目があるのでクリック。

CSSコードをコピーペースト
コピーしたCSSコードを貼り付け

上の画面のようにコピーしたCSSコードを貼り付けて、「公開」をクリックしたら完了です。

余白の大きさは数字を変えると調節できるので、あなたの好みの設定にしてみてください。

ちなみに僕の設定は、4.0emにしてあります。

理由は、稼いでいる個人サイトの7割で、4.0emくらいの設定にしてあったからです。

おぴお

余白の大きさで迷ったら4.0emが僕のオススメ!

SWELLステップブロック内の余白もカスタマイズしよう

先ほど、一括設定のところで紹介したCSSコードを追加しても、「SWELLステップブロック内」では反映されていません。

「SWELLステップブロック内」も、デフォルトだと余白は小さ目です。

SWELLステップブロックはよく使う機能だと思うので、こちらの余白も変更しておきましょう。

先ほどと同様に、下記CSSコードを「追加 CSS」にコピペしてください。

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

※追加する場所は、WordPress管理画面から「外観」⇒「カスタマイズ」⇒「追加 CSS」です。

コピペしたら、「公開」のクリックを忘れずに。

これでSWELLステップブロック内の余白も大きくできました。

おぴお

数字を変えると余白の大きさを調節できます。あなたの好みに設定してください。

SWELLで余白をカスタマイズして圧倒的な見やすさに:まとめ

今回は、SWELLでブロック間の余白を、一括で設定する方法を紹介しました。

記事の第一印象は見た目で決まり、「読みにくいな・・」と感じたらどんな良いことが書いてあっても読まれません。

しっかり余白を設定して、読者の負担にならない読みやすい記事を目指しましょう。

\読みやすい記事がこんな簡単に?!/

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

よかったらシェアしてね!

質問はこちらへお願いします

コメントする

CAPTCHA


Contents
閉じる