【CSS】見出しの長さを文字に揃える方法【WordPress】

ブログを運営しているのですが、記事を書く時に、見出し（h2など）の枠の長さがタイトルより幅が長く、気になっています。文字数を同じ幅にしたいのですが、どうすればよいか知りたいです。

このようなお悩みを解決します。

本記事の内容

・見出しと文字数の横幅を合わせるコード【CSS】
・まとめ：標準の見出しに違和感がある方は変えてみましょう

本記事の信頼性

本記事を書いている僕は、ブログを初めて半年以上が経過し、少ないですがアドセンスとアフィリエイトでの収益化を実現しました。

最近ブログを書いていて、友人と見出しについての話題になり、見出しのタイトルの文字数と枠線の長さを一致させることができたら良いなということで、それを可能にするコードを紹介します。

ちなみに、当ブログはOPENCAGE（オープンケージ） という、ブロガー向けのテーマを扱っているサイトのWordPressテーマ「STORK19」 というテーマを利用しています。

そのため、本記事はSTORK上での作業を説明しますが、コード自体は汎用的なので問題ないと思います。

今回紹介するのは、CSSのコードになります。

見出しと文字数を合わせるコード【CSS】

コードを、CSSに追記するだけです。

例は、h2の見出しの文字数と枠の長さを合わせるためのコードとなります。

試しに追加CSSに貼り付けて試してみてください。

h2 {
display: inline-block;
border}

※ ちなみに、inline-blockはボックスなどを横並びにする時にも使えるコードです。

その①：「追加CSS」に追記、保存

その②：ブログ記事の見出しをH2にして確認

CSSに追記したら、実際にできているかどうか確認しましょう。

まとめ：標準の見出しに違和感がある方は変えてみましょう

この方法では、H2だけではなくその他の見出し種類（H3やH4）でも適用できます。

その場合は、先ほどのコードのH2部分を変えるだけです。

例えば、H3の場合は以下のとおりです。

h３ {
display: inline-block;
border}

今回は以上です。