Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

WordPressのプラグインで行間を設定する方法

更新日:2021年9月11日

インターネット上の文章は、読みやすさが非常に大切です。
行間の余白が少ないと圧迫感があり、読みにくいと感じる読者もいます。
多くの読者に最後まで記事を読んでもらうためには、行間も読みやすく調整した方がよいでしょう。

WordPressでは様々なプラグインが存在します。
「こんな用途にまで?」と思わず驚くプラグインもあります。
しかし探してみたところ、行間を調整することだけが目的のプラグインはありませんでした。

行間の調整は難しくありませんので、プラグインを使用せずに調整する方法を解説します。
CSSを使用して調整しますので、CSSの使い方にチャレンジしてみてくださいね。

目次

  • 1 WordPressの行間設定は2種類
  • 2 段落と段落の間の余白を調整する方法
  • 3 行間の余白、行の高さを調整する方法
  • 4 WordPressのプラグインを使わずダッシュボードでCSSを変更する
  • 5 スタイルシートの変更前に、子テーマをインストールしておこう
  • 6 テーマによって指定するセレクタが異なる
  • 7 キャッシュで変更が反映されない時はChromeキャッシュクリア拡張機能
  • 8 WordPressでプラグインなしに行間を調整する方法まとめ

WordPressの行間設定は2種類

WordPressの行間には2種類あります。
改行と段落です。
HTMLタグでは改行が「<br>」、段落が「<p>~</p>」となっています。
ひとまず、改行と段落の2種類の行間があると覚えておけばOKです。

どちらの行間もスタイルシート、ないしCSSと呼ばれる言語で調整します。
ソースコードをコピーアンドペーストして、必要な部分を変更するだけで調整できます。

段落と段落の間の余白を調整する方法

段落と段落の間は、marginで調整します。
どの部分を調整するかの指定に、タグやクラス名が必要になりますが、どうやって確認するのかは後述します。

.content p{
margin-top:0.5rem;
margin-bottom:0.5rem;
}

上記が段落間の行間を調整するCSSです。それぞれ解説します。

.content p どのセレクタ(どの部分、部品)かの指定
margin-top:0.5rem; 上の余白を0.5文字分
margin-bottom:0.5rem 下の余白を0.5文字分

基本的にはセレクタと、予約の値を変更するだけでOKです。

行間の余白、行の高さを調整する方法

改行した場合の、行の高さを調整するソースコードは以下になります。

.content{
line-height:1.5rem;
}

.content どのセレクタ(どの部分、部品)かの指定
line-height:1.5rem; 行の高さの指定

こちらもセレクタと、行の高さを質する値の部分だけ変更すればOKです。

 

WordPressのプラグインを使わずダッシュボードでCSSを変更する

WordPressではダッシュボードから、CSSやJavaScriptなどを変更できるテーマエディターがあります。
ダッシュボードから肥大サイドバーの外観、テーマエディターを開いてください。

ずらずらと書かれている茶色文字の部分はコメントです。
そこにソースコードを書いても、ブログには反映されません。
*/がコメント部分の終わりになるので、それ以下の場所にソースコードをコピーアンドペーストしてください。

ソースコードが入力できたら、ファイルを更新ボタンをクリックしてブログに反映させます。

スタイルシートの変更前に、子テーマをインストールしておこう

WordPressはテーマも、アップデートされます。
ですのでせっかくCSSを変更しても、テーマをアップデートすると変更が消えてしまいます。
この問題を解消するために、必ず子テーマのインストールをしておきましょう。

Child Theme Configuratorというプラグインで、子テーマがワンクリックで作成可能です。
子テーマの作成が終わったら、外観から子テーマを選択して有効化してください。

子テーマをインストールせずに、親テーマを更新しないブログ運用を見かけます。
WordPressのバージョンが進むごとに、テーマのアップデートなしでは不具合が生じる可能性が高くなってきます。
WordPressそのもののアップデートを止めると、サーバーとWordPress間で不具合の可能性が高まります。

セキュリティのためにも、子テーマをインストールして運用してくださいね。

テーマによって指定するセレクタが異なる

テーマによって記事の文章が入っているセレクタは様々です。
セレクタを特定するのに便利なのは、Chromeのデベロッパーツールです。

以下の手順で、セレクタを確認してください。

  1. Chromeでブログを開き、行間を調整したい部分で右クリック+I
  2. デベロッパーツールでセレクタ名が出てくるので、ダブルクリックして選択してコピー
  3. テーマエディターに貼り付けて、行間を調整する

実際に画像で解説していきます。

マウスオーバーで、どのセレクタがどの部分なのかが確認できます。
上記の画像の場合、段落と段落の間の行間を指定するセレクタは「.entry-content p{}」となります。
改行の行間を指定するセレクタは「.entry-content{}」となります。

CSSは変更しても、表示されるデザインが変わるだけです。
テーマエディターで試してみて、崩れたり変になったりしたら削除すれば問題ありません。
致命的なエラーは出ませんので、安心してトライアンドエラーしてください。

キャッシュで変更が反映されない時はChromeキャッシュクリア拡張機能

WordPressにキャッシュ系の高速化プラグインを入れていたり、ブラウザのウェブキャッシュが残っていたりする場合、CSSを変更しても表示に反映されないことがあります。
WordPressの高速化プラグインは、デザインを編集する際は停止しておきましょう。

ウェブブラウザのキャッシュはそれぞれ使用しているブラウザの、キャッシュクリアをする方法を検索してみてくださいね。
Chromeの場合はOneClick Cleaner for Chromeという拡張機能が、ワンクリックでキャッシュクリアができて便利です。

CSSは記述が間違っていても、エラーが出ません。
Chromeのデベロッパーツールで確認しながら作業しないと、簡単なところで思わぬ時間をとられたりします。
こまめに確認しつつ、行間を変更していくようにしてくださいね。

WordPressでプラグインなしに行間を調整する方法まとめ

WordPressは様々なプラグインがあり、大変便利です。
「こんな機能が欲しい!」と思えばたいていの場合、プラグインが見つかります。
しかしさすがに、行間を変更するだけのプラグインは見つけられませんでした。
行間の変更は、それほどハードルが高くないからです。

行間隔の調整でCSSを編集すれば、CSSを覚える入り口になるかもしれません。
CSSを使いこなせれば、WordPressのデザインの大部分を自由に変更することができます。
おしゃれな見出しや、ブロックの作成も可能です。

またプラグインは便利ですが、頼りすぎると2つのデメリットがあります。
無料のプラグインはいつ更新が止まってもおかしくないので、WordPressで使用できなくなる可能性があります。
プラグインがエラーを起こすと、最悪の場合はブログが表示されないケースもあります。
プラグインの入れすぎは、WordPressの動作を重くします。
使用用途によっては仕方がありませんが、ブログなら10個程度のプラグインで十分に運用可能です。

WordPressを自由にカスタマイズするためにも、CSSを編集することに少しずつチャレンジしてみてくださいね。

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 WordPressの行間設定は2種類
  • 2 段落と段落の間の余白を調整する方法
  • 3 行間の余白、行の高さを調整する方法
  • 4 WordPressのプラグインを使わずダッシュボードでCSSを変更する
  • 5 スタイルシートの変更前に、子テーマをインストールしておこう
  • 6 テーマによって指定するセレクタが異なる
  • 7 キャッシュで変更が反映されない時はChromeキャッシュクリア拡張機能
  • 8 WordPressでプラグインなしに行間を調整する方法まとめ
© 2023 さきどりふぁくとり~