記事の行間と段落を最初に一括で設定する方法

どうも、”TL” です。

今回はわたしがWordPressにてブログを作成する際につまずいた、行間と段落を最初に一括で変更する方法ご紹介したいと思います。

なお、上でいう「行間と段落」というのはそれぞれ以下を意味しています。

　行間：改行を入れず長い文章を入力した際に、改行された最初の行と次の行の間の間隔を言います。

　段落：長い文章の途中で改行を入れてブロックを分けた場合の１ブロック目と２ブロック目の間隔を言います。

設定前の「行間」と「段落」のそれぞれの間隔について

まず最初に、WordPressにて記事を作成する際に、以下のような記事を作成します。

作成した記事をプレビューで確認してみると。

改行をせずに長い文章を入力した場合は、１行目と２行目の間隔（①）が空きます。

その一方で、改行をして文章を入力した場合は、２行目と３行目の間隔（②）が空きます。

この（①）と（②）の上下間隔が異なるのが嫌だったので、この間隔を同じにしてみました。

間隔を一括で変更する方法について

記事ごとに変更する方法もありますが、それでは記事を作成する毎に手間がかかるため避けたかったです。

色々調べてみるとこうすれば良い事が判明しました。

１．「外観」を選択（①）して「カスタマイズ」をクリック（②）します。

２．「追加CSS」を選択します。

３．追加CSSの欄に下記のコードを追加します。

.single-content p {
  line-height: 210%;
  margin:0 0 0;
}

一括変更後のプレビュー結果

２の一括変更設定を行なった後にプレビューで記事を確認してみると以下になります。 

記事本文は先ほどと同じ内容になっていますが、１行目と２行目の間隔（①）と２行目と３行目の間隔（②）が同じになっています。

つまり、２のCSS内容を追加すると、改行を入れても入れなくても同じ上下間隔になるので、記事を書くときに上下間隔をあまり意識しなくても良くなります。

なお、上の画像はフォントサイズを “15px” にしてありますので、わたしの「追加CSS」欄に実際に入力したのは、以下の内容になります。

.single-content p {
  line-height: 210%;
  margin:0 0 0;
  font-size: 15px;
}

注意して頂きたいのが、前の記事でも書きましたが、「.single-content」の部分は「class名」を指定する箇所ですが、サイトの環境によってこの値が変わってきますので、それぞれのサイトに合わせて変更してください。

まとめ

この行間と改行の間のスペースは人の好みによって見やすさや感じ方が変わってくると思いますが、わたしはこのくらいが一番見やすいと感じましたので、この値で設定しています。

個人の感覚に合わせて変更して頂けたらと思います。

Follow me!