Last Updated on 04-04-25 by Shinichi

WordPressのテーマによっては、記事タイトルの行間が狭すぎたり広すぎたりして、視覚的なバランスが崩れることがあります。特に「Corporate Lite」テーマを使用している場合、行間の調整が必要なケースが見られます。この記事では、追加CSSを使って簡単に行間を調整する方法を初心者にも分かりやすく解説します。WordPressの多くのテーマで応用可能な方法なので、ぜひ参考にしてください。こちらのYouTubeを参考にさせて頂きました。

手順: WordPressで記事タイトルの行間をカスタマイズ

1. WordPressの管理画面にログイン

1. WordPressの管理画面にログインします。
2. 左メニューから「外観」→「カスタマイズ」を選択します。

カスタマイズ画面は、サイトのデザインを変更するための便利なツールです。初心者でも簡単に操作できるよう設計されています。

2. カスタマイズ画面で「追加CSS」を選択

1. カスタマイズ画面が開いたら、メニューの「追加CSS」をクリックします。
2. ここにCSSコードを追加することで、テーマのデザインを柔軟に変更できます。

「追加CSS」を使用すると、テーマファイルを直接編集する必要がなく、テーマのアップデート時にもカスタマイズが失われないというメリットがあります。

3. CSSコードを使って調整

以下のCSSコードを入力します。このコードは、記事タイトルの行間を調整するためのものです。

.entry-title {
    line-height: 1.5; /* 行間を調整 (1.5倍) */
}

• line-heightプロパティを使って行間を設定します。値を調整することで、行間の広さを自由に変更できます。
• 1.5は1.5倍の行間を意味します。他の値（例: 1.2, 1.8）を指定することで、好みの間隔にカスタマイズ可能です。

タイトルの行間が広くなりました。

4. CSSを保存して公開

1. CSSを入力したら「公開」ボタンをクリックして保存します。
2. サイトをリロードして、行間が調整されているか確認してください。

カスタマイズが反映されない場合は、ブラウザのキャッシュをクリアしてください。これで新しいスタイルが適用されることがあります。

主要なCSS設定の解説

• line-height: 行間の高さを指定するプロパティ。通常、1.2から1.4がデフォルトですが、この値を変更することで行間を調整できます。
• .entry-title: 記事タイトルに適用されるクラスです。テーマによってクラス名が異なる場合があるため、必要に応じて確認してください。

ブラウザの開発者ツールを使用すれば、特定の要素に適用されているクラス名を確認できます。これにより、的確にスタイルをカスタマイズできます。

ヒント: 開発者ツールを活用しよう

ブラウザの「検証」機能（右クリック→「検証」）を使うと、HTMLとCSSを直接確認できます。適切なクラス名を見つけて、必要な変更を的確に行うことが可能です。作業を効率化するためにも、ぜひ活用してみてください。

また、CSSを追加した後は、プレビュー機能を使って変更内容が反映されているか確認すると安心です。

WordPressで記事タイトルの行間を追加CSSで調整する方法　まとめ

この記事では、WordPressで記事タイトルの行間を追加CSSで誰でも簡単に調整できる方法をを紹介しました。追加CSSを使えば、サイトのデザインを細かく調整できるので、見やすく魅力的なレイアウトを実現できます。お役に立てれば幸いです。

ワードプレス関連記事
📌ワードプレスでロゴのサイズと位置の変更―追加CSS設定で超簡単
📌ワードプレスで文字色の変更-追加CSSで超簡単
📌ワードプレスで記事タイトルの行間を調整する方法-追加CSSで超簡単-
📌ワードプレス文字サイズと行間を調整する方法-追加CSSで超簡単
📌【HTML初心者向け】アフィリエイトリンク画像を左・中央・右揃えにする方法
📌ワードプレスの子テーマの作り方 – 初心者が最後に辿り着いた方法
📌もしもアフィリエイトどこでもリンクの画像の大きさを調整する方法