【SWELL】行間・字間・ブロック間の余白をカスタマイズする方法

  • URLをコピーしました!
お困りさん

SWELLで記事を作ってみたけど、なんだか読みづらい…。
読みやすさをアップさせるには、どうすればいい?

このようなお悩みを持つ方に向けて本記事では、

  • 行間
  • 字間
  • ブロック間

の3種類に分けて余白を設定する方法をご紹介していきます。

余白とは、読み手に内容をより伝わりやすくすることができるとてもたいせつな要素

この余白は、であれば簡単なカスタマイズで設定することができます。

十分にとられた余白によって、読み手にとって文章が読みやすくなるだけではなく、ブログのおしゃれ度もアップして自身のブログへのモチベーションにもつながりますよ◎

おしゃれなブログの作り方はこちらの記事でもご紹介しています。

ぜひ参考にして、お役立てくださいね^^

筆者のプロフィール

「おうちで働く」をあきらめない転勤族ママ

  • 転勤族の妻歴6年目の30代フリーランスママ
  • 同い年の夫、年少娘の3人家族
  • 現在は、企業様の広報や画像制作の業務委託をメインに活動中
  • 「おうちで働く」に向けて頑張るママに寄り添う発信活動・サービス構築にも注力しています◎
転勤族妻
しの
CONTENTS

(スポンサーリンク)

【SWELLカスタマイズ】行間に余白をとる方法

お困りさん

行間ってどの部分を言うの?

行間とは、文章の行と行のあいだのこと。

行間とは

行間に適度に余白があるほうが、読みやすさがグッとアップしますよ◎

行間の取り方の違い

SWELLで行間に余白をとるには、以下のCSSコードを追加しましょう。(追加方法はこちらで解説)

/*行間*/
	.post_content{
	line-height: 2.0em;
	}
/*ここまで*/
  • CSSコードを追加する前に、バックアップを取ることをおすすめします
  • ご紹介したCSSコードによる動作不良やデザイン崩れへの責任は負いかねます
  • 自己責任のうえ、CSSコードを追加してください
CSSコードって何?というかたはこちらをクリック

Cascading Style Sheets(カスケーディング・スタイル・シート)の略。
ウェブ上の文章を装飾するときに必要な言語です。
CSSによって文章の色やレイアウトを指定する、ということが可能になっています。

【SWELLカスタマイズ】字間に余白をとる方法

字間とは、文字と文字の間のこと。

お困りさん

字間は簡単だね!

SWELLでは、この字間をCSSコードを追加せずに調整することができます。

STEP
カスタマイズをクリック
カスタマイズをクリック
STEP
サイト全体設定をクリック
サイト全体設定をクリック
STEP
基本デザインをクリック
基本デザインをクリック
STEP
フォント設定から字間を選択
字間の設定

標準(normal)の状態でも読みやすいので、気にならなければそのままでも十分かと思います◎

しの

当ブログはやわらかい世界観にしたいので、
.05emに設定してすこし余白をとっています。

【SWELLカスタマイズ】ブロック間に余白をとる方法

お困りさん

今度はブロック間。
これはどの部分を言うの?

そもそもブロックとは、この青枠で囲われた箇所のこと。

ブロックとは
しの

ワードプレスのブロックエディタでは、このブロックごとに編集や装飾などができます。

このブロックごとのあいだのことを、ブロック間と言います。

ブロック間とは
お困りさん

Enter(エンター)で余白を作るのはだめ?

ブロックエディタでは、編集画面ではEnterで余白がとれていても、実際の投稿画面では余白が反映されません。

エンターで作った余白

そこで、SWELLでブロック間に余白をとるには、以下3つの方法があります。

  1. SWELL機能:”ブロック下の余白量”を設定する
  2. SWELL機能:”スペーサー”を活用する
  3. CSSコードを追加する
しの

用途やご自身の使いやすさに応じて、使い分けてみてくださいね^^

①SWELL機能:”ブロック下の余白量”を設定する

こちらは、特定のブロック間だけの余白をカスタマイズしたいときにおすすめの方法です。

わたしの場合、同じ見出し内で話題・テーマを切り替えたいときなどに多用しています◎

しの

手軽&シンプルでおすすめ!

STEP
下に余白をつけたいブロックを選択
ブロックツールバー
STEP
”ブロック下の余白量”をクリック
ブロック下の余白量設定①
STEP
余白量を調整
ブロック下の余白量設定②

上記でご紹介したやり方のほうが単純で操作性も良いですが、サイドバーからも同様に余白量を設定することができます。

ブロック下の余白量設定③

上記のSTEP1のあとに、サイドバーからお好みの余白量を設定してみてくださいね。

②SWELL機能:”スペーサー”を活用する

こちらは、余白量を自由にカスタマイズしたいときにおすすめの方法です。

STEP
余白部分にしたい箇所で”スペーサー”を呼び出し
スペーサー設定①
しの

段落部分に『/スペーサー』または『/spacer』と入力しても呼び出せます!

STEP
ドラッグまたは数値を入力し高さをカスタマイズ
スペーサー設定②

①でご紹介した”ブロック下の余白量”よりも自由に余白をとりたい場合は、このスペーサー機能を活用しましょう◎

毎回同じ高さのスペーサーを使いたい方には、ブログパーツに保存しておくのもおすすめです。

ブログパーツへの保存方法

STEP
ダッシュボードでブログパーツ⇒新規追加をクリック
ブログパーツ設定①
STEP
任意のタイトルを入力
ブログパーツ設定②
STEP
スペーサーを呼び出し保存したい余白量を設定
ブログパーツ設定③
STEP
用途:ブロックパターンにチェックを入れて公開をクリック
ブログパーツ設定④
STEP
パターン①:呼び出しコードをコピーして余白部分にしたいブロックに貼り付け
ブログパーツ設定パターン1①
ブログパーツ設定パターン1②
STEP
パターン②:余白部分にしたいブロックでブログパーツを呼び出し
ブログパーツ設定パターン2①
ブログパーツ設定パターン2②

この手順で一度ブログパーツを作っておけば、簡単に毎回同じ高さのスペーサーを使って余白をとることができますよ◎

③CSSコードを追加する

こちらは、ブロック間の余白をサイト全体一括でカスタマイズしたいときにおすすめの方法です。

設定には、以下のCSSコードを追加しましょう。(追加方法はこちらで解説)

/*ブロック間*/
	.post_content > *{
	margin-bottom: 2.5em;
	}
/*ここまで*/
  • CSSコードを追加する前に、バックアップを取ることをおすすめします
  • ご紹介したCSSコードによる動作不良やデザイン崩れへの責任は負いかねます
  • 自己責任のうえ、CSSコードを追加してください

当ブログでは、この方法でサイト全体のブロック間の余白量をカスタマイズしたうえで、①でご紹介した”ブロック下の余白量”を適宜調整しています。

CSSコードの追加方法

行間・ブロック間に余白をとる方法として、CSSコードの追加をご紹介しました。

では実際にSWELLでは、どのようにCSSコードを追加するのか解説していきます。

  • CSSコードを追加する前に、バックアップを取ることをおすすめします
  • ご紹介したCSSコードによる動作不良やデザイン崩れへの責任は負いかねます
  • 自己責任のうえ、CSSコードを追加してください
STEP
カスタマイズをクリック
カスタマイズをクリック
STEP
追加CSSをクリック
追加CSSをクリック
STEP
コピーしたCSSコードを貼り付けし公開
CSSコードを貼り付け
お困りさん

簡単!!

しの

カスタマイズ画面は公開前にプレビューできるので、各数値はお好みに応じて調整してくださいね◎

余白をしっかりとれば、おしゃれブログに近付ける!

おしゃれなブログのカギとなる、行間・字間・ブロック間に余白をとる方法についてご紹介しました。

まとめると…

行間

CSSコードを追加する

字間

カスタマイザーから設定する

ブロック間

  1. ブロック下の余白量を設定する
  2. スペーサーを活用する
  3. CSSコードを追加する

であれば、どれも簡単な設定で余白をとることができ、読みやすさの向上につながります◎

ぜひご紹介した方法で、カスタマイズしてみてくださいね。

すこし視点は異なりますが、余白の重要性を視覚的に学ぶにはこちらの本もおすすめです。

・    ・    ・

ワードプレス初心者の方におすすめしたいテーマ『SWELL』

  • 簡単におしゃれなブログが作れる
  • 記事の執筆にストレスがかからない
  • かゆいところに手が届く感動的な使い心地
しの

SWELL利用歴1年の本音レビューはこちら!

(スポンサーリンク)

CONTENTS