WordPressで行間を空ける(詰める)5つの調整方法【SWELL、CSS、スペーサー】

この記事では、WordPress(ワードプレス)ブロックエディタ(Gutenberg)で行間を開けるやり方を、画像を用いてわかりやすくご紹介します。

行間(余白)が詰めすぎていたり、空きすぎていたりすると、文章が読みづらくなります。

エンター(Enter)するだけで行間を開けることができたクラシックエディタ(Classic Editor)と違い、設定には少しコツがいります。

suya

CSSで全記事の行間を一括変更することもできます。

なるほどくん

なるほど!いろんなやり方があるんですね。

この記事でできること
  • 記事編集中に必要に応じて行間を追加できる
  • よく使う余白ブロックを保存して再利用できる
  • CSSで全記事の行間を一括設定できる
  • スマホだけ行間を変えるCSSカスタマイズがわかる
この記事を書いた人

suya

  • 前職は大手IT企業
  • マーケターエンジニアの両方を経験
  • 月1億円のWeb売上
  • セキュリティの専門家(国家資格
  • 前職は大手IT企業
  • マーケターエンジニア
  • 月1億円のWeb売上
  • セキュリティ国家資格

この記事を最後まで読めば、ブロックエディタ(Gutenberg)で行間を簡単に調節する方法がわかります。

ぜひ最後まで進めてみてください。

目次

1) Shift + Enter

記事編集中に、キーボードだけで行間を追加することができます。

空欄を選択して「Shift + Enter」を押します。

WordPress(ワードプレス)ブロックエディタの行間追加(Shift+Enter)
空欄の段落を選択して「Shift + Enter」
suya

これだけで、空白ブロックが消えなくなります。

HTMLをのぞくと、改行タグ <br> が挿入されていることがわかります。

<p><br></p>

このやり方のメリット・デメリットは以下の通りです。

  • 一瞬で行間ブロックを作成することができます。
  • 細かい高さ調整などはできません。

2) スペーサーブロック

記事編集中に、ブロックで行間を追加することができます。

空欄を選択して「/spacer」と入力して[スペーサー]ブロックを選択します。

もしくは、上の[+]ボタンからブロック一覧を開き、[スペーサー]を選択します。

WordPress(ワードプレス)ブロックエディタの行間追加(スペーサー追加)
空欄の段落を選択して「/spacer」と入力
suya

空欄でスラッシュ(/)を入力すると、ブロックを検索できるショートカットが起動します。

スペーサーブロックは、ピクセル(px)単位で高さを設定することができます。

WordPress(ワードプレス)ブロックエディタの行間追加(スペーサー設定)
スペーサーの高さを設定
suya

いつも同じ高さのスペーサーを使いたいなら、再利用ブロックに保存しましょう。

HTMLをのぞくと、コンテナータグ <div> が挿入されていることがわかります。

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

このやり方のメリット・デメリットは以下の通りです。

  • ピクセル(px)単位で細かい高さ調整ができます。
  • 行間ブロックの追加・設定に一手間かかります。

3) 再利用ブロック

記事編集中に、オリジナルの余白(行間)ブロックを追加することができます。

スペーサーブロックなどを使った余白ブロックを一度作成して、再利用ブロックに保存すれば使い回すことができます。

再利用ブロックを作成する方法

高さを調整したスペーサーブロックなどを選択して、[オプション]ボタンから[再利用ブロックに追加]をクリックします。

WordPress(ワードプレス)ブロックエディタの行間追加(再利用ブロックの追加)
[オプション]ボタンから[再利用ブロックに追加]

再利用ブロックに検索しやすい名前をつけて[保存]をクリックします。

WordPress(ワードプレス)ブロックエディタの行間追加(再利用ブロックの名前)
検索しやすい名前をつけて[保存]

日本語だと「/(スラッシュ)」の後に入力変換する必要があるため、英語で名前をつけるのがおすすめです。

再利用ブロックを利用する方法

ショートカット検索

空欄を選択して「/(スラッシュ)」から再利用ブロックを検索して利用します。

WordPress(ワードプレス)ブロックエディタの行間追加(再利用ブロックのショートカット)
空欄を選択して「/」から検索

通常検索

空欄を選択して「」ボタンから再利用ブロックを検索して利用します。

WordPress(ワードプレス)ブロックエディタの行間追加(再利用ブロックの検索)
空欄を選択して「+」ボタンから検索

このやり方のメリット・デメリットは以下の通りです。

  • スペーサー以外にもアイコンなどで余白(行間)を装飾することができます。
  • 既存の記事がある場合はリライト作業が必要になります。

4) SWELLの「ブロック下の余白量」設定

ブロックエディタ完全対応のデザインテーマ「SWELL(スウェル)」なら、行間(余白量)を調整する専用機能があります。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

\ おしゃれで簡単 /

\ 購入から導入まで /

記事編集中に、マウス操作で行間を選択することができます。

空欄以外のブロックを選択して「ブロック下の余白量」を設定します。

編集エリアのボタン、もしくは右側のブロック設定で操作できます。

WordPress(ワードプレス)ブロックエディタの行間追加(SWELLのブロック下の余白量)
空欄以外で「ブロック下の余白量」を設定
suya

「このブロックに設定」の下に余白(行間)ができています。

HTMLをのぞくと、CSS(スタイルシート)が設定されていることがわかります。

.u-mb-60 {
    margin-bottom: 6em!important;
}

このやり方のメリット・デメリットは以下の通りです。

  • マウス操作だけで大雑把に行間を挿入できます。
  • ピクセル(px)単位などの細かい高さ調整はできません。

5) CSSカスタマイズ(行間・余白量)

全記事の行間を詰めたり、空けたりする設定も可能です。

ここでは、WordPressテーマ「SWELL」を例にして説明します。

SWELLでは、以下のCSS(スタイルシート)をコピペで追加すれば、行間設定を変更することができます。

/* Line height */
.post_content {
  line-height: 2;
}
/* Block margin */
.post_content > * {
  margin-bottom: 3em;
}
/* Inline img middle */
.post_content p > img {
  vertical-align: middle;
}
スタイルデフォルト説明
line-height1.8行間の高さ
→ 好みの行間に変更
margin-bottom2emブロック間の余白量
→ 好みの余白量に変更
  • 「vertical-align」でインライン画像が上にはみ出ないようにしています。(お好みで)
  • 「margin-bottom」を変更しても、表の上に表示される「スクロールできます」のガイドテキストは浮かないみたいです。

line-height(行間)

line-height」は、ブロック内でテキストが折り返されたとき(改行されたとき)の行間が変更されます。

「line-height: 1.8」の場合

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

「line-height: 2」の場合

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

margin-bottom(余白量)

margin-bottom」は、ブロックとブロックの間の余白量(行間)が変更されます。

「margin-bottom: 2em」の場合

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

「margin-bottom: 3em」の場合

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

スマホだけ変更したい場合

スマホだけ行間(余白量)を変えたい場合は、以下のようなコードをさらに追加してください。(数字はお好みで)

@media (max-width: 599px) {
.post_content {
  line-height: 2.2;
}
.post_content > * {
  margin-bottom: 2.8em;
}
}

タブレットだけ変更したい場合

タブレットだけ行間(余白量)を変えたい場合は、以下のようなコードをさらに追加してください。(数字はお好みで)

@media screen and (max-width: 782px) {
.post_content {
  line-height: 2.1;
}
.post_content > * {
  margin-bottom: 2.9em;
}
}

このやり方のメリット・デメリットは以下の通りです。

  • 全記事の行間を一括で変更できます。行間を縮めることもできます。
  • CSSカスタマイズ(コード)が必要になります。

ここからは、以下の 2つのCSSカスタマイズ方法を説明します。

CSSカスタマイズの方法
  1. 子テーマでCSSを設定する方法
  2. カスタマイザーの「追加CSS」で設定する方法

1) 子テーマでCSSを設定する方法

子テーマ(Child)を利用している場合は、上記のCSSをコピペで設定できます。

左メニューの[外観][テーマエディター]をクリックして、テーマファイルの編集画面を開きます。

SWELL CHILD」テーマのスタイルシート(style.css)の下部に、上記のCSSをコピペして[ファイルを更新]します。

WordPressテーマ「SWELL(スウェル)」のCSSカスタマイズ(子テーマ)
CSSをコピペして[ファイルを更新]

子テーマでは、外観(見た目)を確認しながら編集することができません。

編集したら、公開ページを[F5]ボタンで更新するなどして外観(見た目)を確認してください。

2) カスタマイザーの「追加CSS」で設定する方法

カスタマイザーでは、外観(見た目)を確認しながらCSSを編集することができます。

左メニューの[外観][カスタマイズ]をクリックして、「カスタマイザー」を開きます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)を開始
[外観]→[カスタマイズ]をクリック

左メニューの[追加CSS]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの追加CSSを開始
[追加CSS]をクリック

赤枠の欄に上記のCSSをコピペして[公開]をクリックします。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズの追加CSSを変更
上記のCSSをコピペして[公開]
suya

CSSだけであれば子テーマやプラグインは必要ありません。

参考) プラグインでCSSを設定する方法

一応プラグインを使う方法もあります。

詳しくは、「Simple Custom CSS and JS」などで検索してみてください。

参考)文字サイズ(フォントサイズ)を変更

ついでに文字サイズ(フォントサイズ)を変更したい場合は、以下をご覧ください。

この記事のまとめ

WordPress(ワードプレス)ブロックエディタ(Gutenberg)で行間を空けるやり方を見てきました。

クラシックエディタ(Classic Editor)から乗り換えて、最初につまずくポイントの 1つです。

なるほどくん

つまづいてました。

デザインテーマSWELL(スウェル)なら、ブロックエディタ完全対応で編集作業も思いのままです。

導入するだけでおしゃれ(スタイリッシュ)なデザインになる「SWELL(スウェル)」を、あなたのサイト(ブログ)に導入しましょう。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

\ おしゃれで簡単 /

\ 購入から導入まで /

\ 記事テンプレート付き /

SWELLのデザインカスタマイズは、以下も参考にしてください。

SWELLの外観カスタマイズ(カスタマイザー)のより詳細の使い方は、以下をご覧ください。

アクセスや収益をUPさせるノウハウ紹介

実際の経験を元に、効果のあった施策をまとめました。

よかったら見ていってください。

ドメインパワーUPでSEOに効く被リンク獲得リスト

被リンクというと、ブラックなやり方を想像される方が多いかもしれません。

しかし、多くのサイトを分析してみると、みんな使っている登録サイトが存在することがわかりました。

ドメインパワーがSEOに重要な地位を占める現状では、自然なホワイトリンクの獲得戦略が欠かせません。

実際に既存サイトでも大きな効果を上げることができたので、ここでご紹介したいと思います。

リンクフリー
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる