WordPressで行間を調整する方法

【簡単です^^】WordPressで記事の行間を調整する方法!

悩む人のイラスト
WordPressでブログを書いてます。
行間をもう少し広げたいんですが、どうすればいいのか教えて下さい!

その質問にお答えします。

 この記事の内容

  • 記事の行間を調整する方法

 所要時間

『読むだけ』
 ⇒「約1分」

『やってみる』
 ⇒「5〜15分」

 この記事の信頼性

システムエンジニアが実際に試した(体験した)内容を記述し、重要な部分を含めて解説しています!

★プロフィール★

 当サイトの運営環境

【1】WordPressで記事の行間を調整する方法

WordPressで行間を調整する方法

たけちん
手順は簡単です。
早速やってみましょう!

 手順

  1. CSSコードの記述
  2. HTMLコードの記述
  3. プレビューで確認

1. CSSコードの記述

たけちん
下記のCSSコードを子テーマの『style.css』にコピペします。
(もしくは、カスタマイズの『追加CSS』)

 CSSコード

コード表示
(ここをクリックorタップ)
Copy
p {
     line-height: 1.85; /*行間 THORデフォルト*/
}
たけちん
上記CSSコードの『1.85』の部分を、お好みで調整して下さい。
数字を大きくすると間隔が広くなります。
単位などは下記を参照願います。

 おすすめの行間設定値はコチラ!

 プロパティ設定

  • line-height: normal;/*ブラウザが判断した高さ*/
  • line-height: ~px;
  • line-height: ~em;
  • line-height: ~%;
  • line-height: ~;
    /*単位なしはフォントサイズと連動*/
    (この設定が好ましい)

2. HTMLコードの記述

たけちん
ビジュアルエディタの【<>】またはテキストエディタにHTMLコードを書きます。

 HTMLコード(例)

コード表示
(ここをクリックorタップ)
Copy
<p>これはテスト文章です。ここに文章を書いて確認しましょう。時を巻いて戻す術はない。『ノーアタック!ノーチャンス!』早く記事を書きたい!</p>

3. プレビューで確認

たけちん
プレビューで確認しながら調整して下さいね!

カスタマイズの『追加CSS』にCSSコードを記述すると、リアルタイムで変更されるので調整するのに便利です。

【まとめ】

 手順

  1. CSSコードの記述
  2. HTMLコードの記述
  3. プレビューで確認

【※】おすすめの行間設定

悩む人のイラスト
どのくらいに設定したらいいの?

一般的にきれいに見える数値は1.5〜1.9となっています。

お使いのフォントや全体のデザインで調整しましょう。

『文字の間隔』を調整する方法はコチラの記事で解説しています。

関連記事

WordPressでブログを書いてます。文字の間隔をもう少し広げたいんですが、どうすればいいのか教えて下さい! WordPress(ワードプレス)で、文章の文字間隔を調整する手順を解説します。 […]

【ownCloudの導入方法】

ロリポップの無料ownCloudは、リモートワークなど、グループでファイルの共有が出来ます。

更に、大切なPCデータのバックアップとしても機能しますので、ぜひ導入してみて下さい。

詳細はコチラの記事で解説しています。

簡単ファイル共有

2台のパソコンから「同じファイル」にアクセスしたいなぁ。 あと、離れた家族やお友達と「プライベートな動画や画像」をシェアしたいんだけど。 簡単にできるのかな? その疑問にお答えします。  この記事[…]

c-eyecat_server-0806-002

ownCloudでは第三者に対し、簡単にファイルの受け渡しができます。

詳細はコチラの記事で解説しています。

ファイルの簡単受け渡し方法

メールじゃ送れない動画や画像の大きなファイルを受け渡ししたいなぁ。家族やお友達とも、プライベートな動画や画像をたくさんシェアしたい。簡単に出来るのかな? この記事の内容 ownCloudによる[…]

ownCloudファイルの受け渡し方法

★よくあるご質問【FAQ】★

【Q.】ownCloudって何がそんなに便利なの?

WordPressで行間を調整する方法
最新情報をチェックしよう!