MENU
無料相談・お問い合わせ
無料相談・お問い合わせ

見出しのインライン画像をテキストと中央揃えにする方法

WordPress

WordPressの見出しに画像を入れたとき、テキストと画像の位置がずれて見栄えが悪くなることがあります。今回は、CSSを使って簡単に中央揃えにする方法をご紹介します。

目次

HTML構造

例えば、以下のようなHTML構造で画像とテキストが並んでいる場合、

<h3 class="wp-block-heading">
    <img src="画像URL" alt="" width="64" height="64">
    これはH3見出しです
</h3>

これはH3見出しです

このままだと、画像がテキストのベースラインに揃ってしまい、垂直方向の位置がずれて見えます。

調整後：
CSSで画像の位置とサイズを調整すると、バランスよく整えることができます。

これはH3見出しです

解決方法：vertical-alignを使う

画像とテキストを垂直方向で中央揃えにするには、vertical-align: middle;を使用します。

h3.wp-block-heading img {
    vertical-align: middle;
}

これだけで、画像の中央とテキストの中央が揃い、バランスの良い見た目になります。

vertical-alignの他の値

vertical-alignには他にも便利な値があります。

  • middle – 中央揃え
  • text-top – テキストの上端に揃える
  • text-bottom – テキストの下端に揃える
  • baseline – ベースラインに揃える（デフォルト）

用途に応じて使い分けてみてください。

さらに調整：画像サイズと余白

より見やすくするために、画像サイズを調整し、テキストとの間に余白を追加することもできます。

h3.wp-block-heading img {
    vertical-align: middle;
    width: 48px;
    height: auto;
    margin-right: 8px;
}

画像サイズの目安

用途に応じて、以下のサイズを参考にしてください。

  • 32px – かなり小さめ、控えめなアイコンに
  • 40px – 小さめ、すっきりした印象
  • 48px – 程よいサイズ
  • 56px – 少し大きめ、存在感あり

インラインスタイルが優先される場合

HTMLに直接styleが書かれている場合、CSSが効かないことがあります。その場合は!importantを使用します。

h3.wp-block-heading img {
    vertical-align: middle;
    width: 48px !important;
    height: auto;
    margin-right: 8px;
}

特定の見出しにのみ適用する方法

すべての見出しではなく、特定の見出しにのみスタイルを適用したい場合は、カスタムクラスを使います。

  1. HTMLにカスタムクラスを追加

WordPressのブロックエディタで、見出しブロックの「追加CSSクラス」欄にカスタムクラス名を入力します。

例：heading-with-icon

  1. CSSでカスタムクラスを指定
/* カスタムクラスを持つ見出しの画像のみスタイル適用 */
h3.heading-with-icon img {
    vertical-align: middle;
    width: 48px !important;
    height: auto;
    margin-right: 8px;
}

カスタムクラスを使えば、必要な見出しにだけピンポイントでスタイルを適用できるので、サイト全体のデザインに影響を与えずに調整できます。

まとめ

見出しのインライン画像をテキストと中央揃えにするには、vertical-align: middle;を指定するだけで簡単に実現できます。

この方法は見出しだけでなく、段落内のアイコンなど、あらゆるインライン画像に応用できます。ぜひお試しください。

WordPress

関連記事

目次