WordPressで行間と改行幅をカスタマイズする方法（テーマ：Xeory）

やっとこブログ

7年前

ブログの文章なんだか読みづらいな・・と感じたことありませんか？

サイトのデザインや色あい、文字の色、文字の大きさなどでも変わってきますが、見やすいブログには「行間」と「改行幅」も大切な要素です。

ブログはどうしても文字が多くなってしまうので、読みづらいブログだと、調べたいことや求めている情報が書かれていても、正直読むのが苦痛になります。

「行間」が余りひっつきすぎても読みづらいですし、行間がありすぎても文章のまとまりが分からないです。

「改行幅」もしっかり設定しないと、どこが改行なのかも一見分からないので見づらいです。

自分のサイトのデザインや文字の色等に合わせて、「行間」と「改行幅」をカスタマイズして「文章の見た目」の良い、見やすいブログになるように設定してみましょう。

1.行間と改行幅とは

「行間」とは、読んで字の如く「文章の行と行の間」のことです。普通に文章を打ち込んでいると、画面の端で自動的に次の行に折り返されて入力されていきます。この時の行と行の間のことです。

「改行幅」とは、こちらも読んで字の如く「文章を改行したときの幅」のことです。改行をせずに隙間なく埋められた文章は、段落も分からず非常に読みづらいです。適切な段落で改行して、「改行幅」も設定をして、文章を読みやすくしましょう。

下図は「Table of Contents Plus（toc）で目次を設定する方法」の記事の文章の引用ですが、イメージ的には下図の様な感じです。

下記の記事で「行間」と「改行幅」のカスタマイズの手順を説明します。

WordPressにログインをして、左側のメニューから「外観　→　テーマの編集」の順にクリックしましょう。

「テーマの編集」の画面を開いたら、「行間」と「改行幅」を設定しているcssが記載されている場所を検索します。

「テーマの編集」画面の右側、下図の赤枠で囲ってある部分に「base.css」がありますので、ここをクリックします。

「行間」を指定している場所を検索します。キーボードの「Ctrlキー」を押しながら「Fキー」を押して検索バーを表示させてから「.post-content p」と検索しましょう。

検索が完了したら、下図の部分が検索結果として表示されるはずです。この部分のCSSをカスタマイズしていきます。

検索が完了したら、CSSの変更をしていきます。「行間」と「改行幅」でそれぞれ変更する場所が違いますので、ひとつずつ変更していきましょう。

先程検索した「.post-content p」に記載されているCSSの中で、「line-height： 1.6;」の数字部分「1.6」が「行間」を設定している箇所ですので、ここの「1.6」の数字を変更します。

やっとこブログは「1.9」に設定しています。「1.6」から「0.1」ずつ増やしてサイトを見て～と繰り返していたのですが、「1.9」が見やすいなぁと思いました。

使用しているWordPressのテーマやサイトのデザインで合う「行間」は違うと思いますので、自分のサイトに合わせて数字を変更して、行間をカスタマイズしてください。

「改行幅」は、「margin: 0 0 1.6em;」の数字部分「1.6em」が設定している箇所ですので、ここの[1.6em」の数字を変更します。「em」はサイズの単位なので、そのままにして、数字のみを変更しましょう。

やっとこブログは「1.6em」のままです。変更していません。こちらも「1.6em」から「0.1」ずつ増やしたり減らしたりしてサイトを見て～と色々試してみたのですが、結局「1.6em」が見やすいと感じたので変更しませんでした。

こちらも自分のサイトに合わせて数字を変更して、改行幅をカスタマイズしてみてください。

以上が「WordPressで行間と改行幅をカスタマイズする方法」です。

場所さえ分かってしまえばいつでも簡単に変更可能ですので、自分のサイトに合わせて常に見やすい「行間」と「改行幅」を設定して、読みやすい文章になるようにカスタマイズしましょう。

その他のWordPressカスタマイズは、

【hタグ】

【ヘッダー・メニュー】

【サイドバー】

【プラグイン】

【URL変更】

【その他】

上記の記事を参考にしてください。