デザインテンプレート販売中 >>

WordPressの改行の行間設定|段落幅を詰める・広くするCSSカスタマイズ

ブログ運営者ならお察しの通り、文章の行間によって記事の読みやすさは大幅に向上します。

「行間や段落に間隔が全くない文章」と、「行間や段落に適度な間隔がある文章」では、当然後者のほうが読みやすい文章になります。

そこでこのページでは、WordPressの改行の行間設定のやり方をご紹介していきたいと思います。

当ブログのデザインをあなたのブログにも実装してみませんか?

  • 3月15日ついにリリース
  • デザイン2種を展開
  • 今すぐあなたのブログをオシャレに

WordPressの行間には2種類ある

行間と一口に言っても、WordPressには2つの行間があります。

  • 段落と段落の間の間隔
  • 行と行の間の間隔
アフィ
アフィ

それぞれ詳しく見ていきましょう。

段落の行間

WordPressのエディターで2行改行した場合、自動的に段落と段落の間には適度な余白が空くようになっています。

実例をご紹介すると、こんな感じです。

 

この文章は、上の1行と下の2行でこのように分かれています。

 

段落と段落の間には、このように隙間がありますね。

改行の行間

WordPressのエディターで記事作成を行っていった場合、文章が長くなると自動でカラム幅に合わせて文章が折り返されます。

実例をご紹介すると、こんな感じです。

 

この行と行の間に適度な空白があることがご確認いただけるはずです。

WordPressの行間を詰める・空けるCSSカスタマイズ

ここまでWordPressの2つの行間について見てきましたが、どちらの行間も同じ設定にて空白の広さを変更することが可能です。

空間が詰まりすぎている・空きすぎていると感じる人は、これから紹介する方法で行間をカスタマイズしてみてください。

アフィ
アフィ

これから紹介する設定でスマホでもPCでも、行間の間隔が調整できます。

まずは、ダッシュボードの外観の中にあるテーマエディターをクリックします。

テーマエディター

 

スタイルシート(style.css)をクリックし、以下のCSSコードをコピー・アンド・ペーストします。

/************************************
** 段落の空白を調整
************************************/
.content p {
margin-bottom: 1.4em;
}>

アフィ
アフィ
コードの「1.4em」という数値を変更すれば、行間の空白を調整することができます。1.4emが1番おすすめです。
最後に、ファイルを更新をクリックして変更を保存します。
ファイルを更新

 

ここまでの設定で、WordPressに投稿されている全記事の行間設定が完了しました。

試しにこれまでに投稿した記事の行間を確認してみてください。

また、テーマエディターを編集することになりますので、事前にバックアップを取っておくと安心ですね。

BackWPupの設定方法と使い方|WordPressの自動バックアッププラグインでもしもに備えよう!
WordPressのカスタマイズをする・しないに関わらず、ブログ運営者として是非ともやっておきたいのがWordPressのバックアップです。 いざというときにバックアップデータがなければ、それまでに書いた記事も全て無くなってしまう・・...
アフィ

2017年8月にブログをスタート。
1つの特化型ブログで月間75万PVを達成し、現在では複数の特化型ブログから安定的に月収50万円以上の収入を確保しています。
詳しく

アフィをフォローする

当ブログのデザインをあなたのブログにも実装してみませんか?

  • 3月15日ついにリリース
  • デザイン2種を展開
  • 今すぐあなたのブログをオシャレに
WordPressの使い方
アフィをフォローする
アフィブログ

コメント