CSSでヘッダーサイズを調整する方法：簡単なフォント調整

ウェブサイトのテキストヘッダーを、すべてのウェブブラウザで適切なサイズにしたいですか？HTMLには、H1（最も大きいもの）からH6（最も小さいもの）まで、6段階の見出しが用意されています。H1、H2、H3、またはその他のタグのサイズを大きくしたり小さくしたりしたい場合は、CSSを使ってサイズを設定できます。このWikiHowガイドでは、font-size CSSプロパティを使用して、ウェブサイトのヘッダーフォントサイズを変更する最も確実でアクセスしやすい方法をお教えします。また、WordPressをお使いの場合は、テーマのCSSエディタやブロックエディタでヘッダーのフォントサイズを調整する方法もご紹介します。

知っておくべきこと

• ヘッダタグ（H1、H2など）のフォントサイズは、CSSのfont-sizeプロパティで指定できます。
• すべてのブラウザでヘッダーが正しく見えるようにするには、em、rem、vhのような相対単位を使用します。
• WordPressを使用している場合は、「外観」>「カスタマイズ」>「追加CSS」で好みのヘッダーサイズを追加できます。

font-size CSSプロパティを使う

1. ヘッダーサイズの単位を選択します。CSSのfont-sizeプロパティを使用すると、2つの異なる方法でヘッダーフォントのサイズを変更できます：

   • 相対単位：相対的な単位で: 通常、他の要素との相対的な単位でフォントを調整します。これにより、ユーザーがウィンドウのサイズを変更したときに、ヘッダーのサイズが自動的に調整されます。
   • 絶対単位：ピクセル(px)、ポイント(pt)、インチ(in)など、特定のサイズを指定したい場合は、絶対単位を使用します。ただし、レスポンシブ・ウェブ・デザインの場合、ページを拡大してもユーザーがブラウザ上でテキストのサイズを調整できないため、問題が生じる可能性があります。
2. 一般的な相対単位。ユーザーのスクリーンサイズに関係なく、ヘッダーサイズが一貫していることを確認するには、相対単位にこだわることをお勧めします。font-sizeプロパティで使用する最も一般的な相対単位は次のとおりです：

   • em：要素のフォントサイズに対する相対単位でヘッダーサイズを調整します。emを使用すると、読者がコンピュータや携帯電話、タブレットで使用しているフォントに基づいてフォントのサイズが変更されるため、非常に便利です。
     • 例えば、font-size: 1.2emを使用すると、見出しのサイズが1.2倍、つまりデフォルトのサイズより20%大きくなります。
     • また、ヘッダタグがフォントサイズが指定された他の要素、例えば div の中にある場合、ヘッダコードで font-size: 1.2em を使用すると、ヘッダのサイズは div で指定されたフォントサイズより 20% 大きくなります。
   • rem：emと似ていますが、親要素ではなくルート（html）要素のフォントサイズに基づいてサイズを変更します。remを単位としてヘッダーサイズを設定すると、ヘッダーが他のコンテナ内にある場合でも、常にルート要素のフォントサイズに基づいて調整されます。
     • たとえば、HTMLボディのフォントサイズが100%に設定されている場合、H1タグでfont-size: 5remを使用すると、H1ヘッダーのサイズはデフォルトのフォントの5倍になります。
   • vh：ビューポート（ユーザーから見える画面の領域）の高さに基づいて変更します。
     • 例えば、font-size: 10.0vhは、フォントをビューポートの高さの10%にします。
   • vwvhと同様に、vwはビューポートに対する相対的なサイズを調整しますが、高さではなく幅を調整します。
3. ヘッダタグのフォントサイズを指定するには、font-sizeプロパティを使用します。測定単位を選択したら、.NET Frameworkのヘッダタグの要素を作成（または既存の要素を編集）することで、ヘッダのサイズを変更することができます。 以下に、いくつかの例を紹介します：

   • 例えば、H1のサイズをビューポートサイズの20%に変更したい場合、次のようにします：
     h1 { font-size: 20vh; } とします。
   • この例では、H1タグより少し小さくしたいH2ヘッダー・タグのサイズもCSSで調整する。ビューポートの高さの17％にしてみましょう：
     h1 { font-size: 20vh; } h2 { font-size:17vh; } このようにします。
4. では、ビューポートの高さ（vh）を測定単位として使う代わりに、remを使いましょう。この例では、H1、H2、H3のフォントサイズを、HTML要素に設定されているフォントサイズに相対的に変更します：

   html { font-size: 100%; } h1 { font-size: 3.5rem; } h2 { font-size: 2.75rem; } h3 { font-size: 2rem; }

WordPressテーマのヘッダー用CSSを編集する

1. WordPressのダッシュボードにサインインします。WordPressサイトをデザインしていて、サイト全体のヘッダーサイズを設定したい場合、WordPressダッシュボードのカスタマイザーを使ってテーマのCSSを変更することができます。

   • まだの方は、CSSでヘッダーサイズを変更する方法をご覧ください。
2. 外観をクリックします。左のパネルにこのオプションが表示されます。

   • まだの場合は、マイサイトをクリックして編集用のサイトを開きます。
   • WordPressを専用サーバーまたは共有サーバーにインストールしている場合は、FTPでファイルをダウンロードするか、ブラウザで編集して、直接ファイルを作成することもできます。探しているファイルはcustom.cssまたはstyle.cssと呼ばれ、テーマのメインディレクトリにあるはずです。
3. カスタマイズをクリックします。このオプションは、左パネルの「外観」の下にあります。

   • CSSを直接編集しなくてもヘッダーサイズを変更できるものもあります。Headings "エリアが表示されている場合は、メニューを使ってヘッダーサイズを調整することができます。
4. 追加CSSをクリックします。左のパネルに表示されます。これでCSSエディターが開き、テーマの既存のCSSに独自のカスタム追加を加えることができます。
5. 希望のヘッダー要素をCSSに追加します。font-sizeプロパティを使用して希望のヘッダーサイズをフィールドに入力または貼り付けると、右側のパネルにプレビューが表示されます。プレビューでは、異なるスクリーンサイズ上であなたの変更がどのように見えるかも表示されます。

   • ここで入力したCSSは、テーマの他のCSS設定よりも優先されます。 つまり、テーマでH1サイズが20pxに設定されている場合、追加CSSでH1を2.75remに設定すると、あなたの変更が優先されます。
6. Publishをクリックして変更を保存します。テーマのグローバルCSSを編集すると、新しいヘッダーサイズがWordPressウェブサイト全体に適用されます。

WordPressブロックエディターでヘッダーサイズを変更する

1. WordPressブロックエディターでサイドバーを展開します。ブロックエディタを使ってWordPressのページや投稿を編集している場合、各ヘッダタグ（H1、H2、H5など）のサイズを個別に簡単に調整できます。これにより、選択したヘッダーのCSSが自動的に更新されます。エディターの右側に設定サイドバーが表示されていない場合は、右上の設定メニューアイコンをクリックして表示させてください。

   • テーマの場合とは異なり、ブロックエディターでは、編集のために開いている投稿またはページ上のヘッダーサイズのみを変更できます。
2. 編集したいヘッダーをクリックします。ヘッダーをクリックすると、ポップアップウィンドウにヘッダーの種類（例：H1）が表示されます。
3. サイドバーのタイポグラフィエリアでヘッダーサイズを選択します。例えば、XXLを選択すると、選択したヘッダーは最大のサイズに調整されます。

   • ヘッダーサイズは統一しておくのがベストです-H1が一番大きく、次にH2など。
4. 他のヘッダーも同様にします。ページ上の別のヘッダーを選択し、そのサイズを手動で調整することができます。

   • つのヘッダーを調整しても、ページ上のすべてのヘッダーのサイズは変わりません。言い換えれば、一つのH1を "Large "にしても、他の全てのH1が "Large "になるわけではありません。各ヘッダーのサイズを個別に変更する必要があります。
5. 公開をクリックして変更を保存します。これで、新しいヘッダーサイズがすべての読者に見えるようになります。

この記事は " How to Adjust Header Size in CSS： この記事は、CC BY-NC-SAの下で公開されている "How to Adjust Header Size in CSS: Easy Font Property Guide "を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。