WordPressで行間を調整してUXを向上させる4つの簡単な方法

文字がぎっしり詰まった、ごちゃごちゃした文章は、訪問者が最初の段落を読み終える前に離脱させてしまいます。行間を調整することは、サイト全体を再設計することなくコンテンツの見栄えを改善する最も手っ取り早い方法の一つです。.

このガイドでは、WordPressで行間を変更する4つの方法（ブロックエディターからカスタムCSSまで）を紹介し、ご自身の環境に最適な方法を選択できるようにしています。.

WordPressにおける行間の重要性

行間隔は、テキストの各行間の垂直方向のスペースを調整します。スペースが狭すぎると、内容が窮屈に感じられ、読みにくくなります。広すぎると、文章のまとまりがなくなり、まとまりのない印象を与えます。.

適切な行間は、読者がスムーズにコンテンツを読み進めることを可能にします。また、プロ意識を示すものでもあります。行間が適切なページは、考え抜かれたすっきりとした印象を与えます。一方、行間が不適切なページは、文章の質に関わらず、未完成な印象を与えてしまいます。.

ほとんどのWordPressサイトでは、行の高さを1.5～1.8に設定すると、デスクトップとモバイルの両方の画面サイズで快適かつ読みやすいテキスト表示が得られます。.

WordPress で行間隔を変更するにはどうすればいいですか?

WordPressでは、エディター、テーマ、コードの習熟度に応じて、行間隔を調整する方法がいくつか用意されています。ご自身の環境に最適な方法を試してください。.

方法1：クラシックエディターを使用してWordPressの行間隔を変更する

クラシックエディターを使用している場合、行間隔を調整する方法は2つあります。書式設定ドロップダウンメニューが最も手軽です。テキストエディターでは、インラインCSSを使用してより詳細な制御が可能です。.

「書式」ドロップダウンメニューを使用する

• ステップ1：WordPressの投稿またはページに移動し、調整したいテキストを選択します。

• ステップ2：クラシックエディターのツールバーにある「書式」ドロップダウンをクリックします。

• ステップ3：テーマが対応している場合は行の高さを選択し、1.5または2.0などのプリセット値を選択します。

「テキスト」エディタの使用

クラシックエディターでは、「ビジュアル」編集と「テキスト」（HTML）編集を切り替えることができます。「テキスト」エディターで行間隔をカスタマイズする方法は次のとおりです。

• ステップ1：クラシックエディターの右上隅にある「テキスト」タブをクリックして、HTMLビューに切り替えます。
• ステップ2：これで、段落タグにインラインCSSを直接​​追加して、行間隔を制御できます。

例えば：

<p style="line-height: 1.7;">この段落の行の高さは 1.7 です。</p>

Gutenberg と同様に、ここでの line-height プロパティでは、数値、長さの値、パーセンテージ、またはキーワードを使用して間隔を定義できます。.

方法2：Gutenbergエディターを使用して行間隔を変更する

Gutenbergブロックエディターには、コードを一切触ることなく行間隔を調整できる組み込みのタイポグラフィコントロールが備わっています。より詳細な調整が必要な場合は、ブロックのHTMLを直接編集することもできます。.

段落設定による行間隔の調整

• ステップ 1: WordPress の投稿 またはページ内で、変更する段落を選択します。

• ステップ2：右側のブロック設定サイドバーに移動します。「タイポグラフィ」または「テキスト設定」というラベルのセクションを探してください。

• ステップ3：[タイポグラフィ]の横にある3点メニューをクリックすると、[行の高さ]のオプションが表示されます。

• ステップ4：あとは、お好みに合わせて行間を調整するだけです。とても簡単です！

HTMLで行間隔をカスタマイズする

より詳細な制御が必要な場合は、カスタム HTML オプションをご利用ください。

やり方は次のとおりです:

• ステップ 1: 編集したい段落ブロックを選択します。「p」アイコンをクリックし、「コード」に切り替えます。

• ステップ2：もう一度コードアイコンをクリックし、「カスタムHTML」を選択します。これにより、段落が編集可能なHTMLに変換されます。

• ステップ 3: 次に、必要なコンテンツを含む次のコード スニペットを追加します。

<p style="line-height: 1.8em;">ここにテキストを入力してください。</p>

line-heightプロパティは、テキストの行間の間隔を制御します。.

設定方法は以下のとおりです。

• 数値： フォントサイズの乗数（例：1.5はフォントサイズの1.5倍を意味します）。
• 長さの値： 例えば、20ピクセルの間隔の場合は20px。
• パーセンテージ： 間隔は150％で、これはフォントサイズの150％に相当します。
• キーワード: 例えば通常 (通常は約 1.2 にデフォルト設定されます)。

注：ブロック設定で行った調整は、その特定の段落にのみ適用されますが、インラインCSSを使用した「カスタムHTML」ブロックを使用すると、より柔軟に対応でき、複数の段落や要素を思い通りにスタイル設定できます。

方法3：テーマカスタマイザーを使用して行間隔を調整する

テーマカスタマイザーを使用すると、個々のブロックや投稿を編集することなく、サイト全体の行間隔を調整できます。利用できる機能はテーマによって異なりますが、最新のテーマのほとんどにはタイポグラフィのコントロール機能が含まれています。.

ステップ1： WordPressの管理画面にアクセスし、 「外観」＞「カスタマイズ」を選択します。これにより、テーマカスタマイザーが開きます。

ステップ2： カスタマイザーを開いたら、「タイポグラフィ」、「コンテンツ」、「グローバル」などのラベルが付いたセクションを探してください。正確な名称と場所は、テーマによって異なる場合があります。

ステップ3： 行の高さのコントロールを見つけます。テーマによっては、次のいずれかが表示されます。

• スライダー：ドラッグするだけで間隔を調整できます。
• 数値入力フィールド：1.5などの特定の行の高さの値を入力してください。
• プリセットオプション：あらかじめ定義された行間設定を選択します。

ステップ4： 調整が完了したら、「公開」ボタンをクリックして変更を保存します。一番の魅力は？変更がサイトにどのような影響を与えるかをリアルタイムでプレビューできるので、結果をすぐに確認できます！

行間隔を調整するために追加のCSSを使用する方法は？

テーマに行の高さ調整機能が組み込まれていない場合は、カスタマイザーの「追加CSS」セクションを使用してください。以下のコードを追加すると、サイト上のすべての段落の行間隔を調整できます。.

特定のコンテンツ領域のみを対象とするには、セレクターをテーマのコンテンツクラスに合わせて調整してください。単位はpx、em、rem、または単位なしの値が使用できます。.

方法4：WordPressプラグインを使用して行間隔を調整する

コードやカスタマイザーを操作せずに間隔を調整したい場合は、プラグインを使うのが最も簡単な方法です。Spacerプラグインは、Gutenbergエディターに専用の間隔調整ブロックを追加し、スライダーまたは数値入力を使って要素間の高さを制御できるようにします。.

WordPressプラグインディレクトリからSpacerをインストールして有効化してください。ブロック挿入ツールに新しいSpacerブロックが表示されます。任意の2つのブロックの間にこのブロックを追加し、高さを設定して結果をプレビューしたら、ページを公開または更新してください。.

結論

行間隔 は小さな変更ですが、コンテンツの読みやすさや訪問者のページ滞在時間に大きな影響を与えます。個々のブロックを素早く調整したい場合は、Gutenbergのタイポグラフィ設定から始めてみてください。

テーマカスタマイザーの「追加CSS」セクションを使用して、サイト全体の行間を一度に調整できます。ほとんどのWordPressサイトでは、行の高さを1.5～1.8に設定するのが適切で、特定のフォントやデザインに合わせて微調整する前の安全な出発点となります。.

WordPressで行間隔を変更する際のよくある質問