WordPressでヘッダーの高さをカスタマイズする方法（テーマ：Xeory）

やっとこブログ

7年前

WordPressで人気の高いテーマ「Xeory」で、ヘッダー部分の高さをカスタマイズする方法をご紹介します。

ヘッダーに画像を大きく載せたい場合や、ロゴデザイン等の都合でもう少しヘッダーを高くしたい場合など、自分のサイトの状況に合わせて変更する際の参考になればと思います。

ヘッダーに画像を設定したい場合は「WordPressでヘッダーに画像を設定する方法（テーマ：Xeory）」の記事を参考にしてください。

ヘッダーに色を付けたい場合は「WordPressでヘッダーとメニューに背景色をつける方法（テーマ：Xeory）」の記事を参考にしてください。

ちなみにヘッダーの範囲は使用する「テーマ」で変わってしまいますが、今回の「Xeory」は下記の赤枠で囲ってある部分がヘッダーになります。

この部分の高さをカスタマイズする方法をご紹介します。

1.WordPressにログイン

WordPressにログインします。WordPressへのログインは「WordPressをインストールした場所」で多少変わります。ドメイン直下のフォルダにインストールした場合は、「http://サイトURL/wp-login.php」、wpという名前のフォルダにインストールした場合は「http://サイトURL/wp/wp-login.php」になります。

ほとんどの場合は、

http://サイトURL/wp-login.php
http://サイトURL/wp/wp-login.php

上記のどちらかでログイン画面に移行できるはずです。下記のログイン画面が表示されたら、WordPressをインストールした時に設定した「ユーザー名」「パスワード」を入力して、WordPressにログインしましょう。

2.CSSのカスタマイズ

WordPressにログインしたら、ヘッダーの高さを変更するために、該当箇所のCSSをカスタマイズしていきましょう。

今回も追記するCSSは1行だけですので、場所さえ分かってしまえば簡単に完了します。

2-1.テーマの編集に移動

WordPressのトップページから「外観」をクリックして「テーマの編集」をクリックしましょう。

2-2.スタイルシート（style.css）をクリック

下図の右下の赤枠で囲っている「スタイルシート（style.css）」をクリックしましょう。

2-3.変更箇所の検索

「スタイルシート（style.css）」を選択したら、該当箇所のCSSを検索していきます。

キーボードの「ctrlキー」を押しながら「Fキー」を押して、「#header」と検索します。下図の赤枠で囲ってある「#header」の部分が出てくるはずです。この部分のCSSに1行追加します。

2-4.CSSの追記

下記が初期の「#header」部分のCSSです。

#header {
background: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef; 
}

上記のCSSを下記のように1行追加します。

#header {
background: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef; 
height: ○○○;
}

○○○の部分に、高さを入力します。

ちなみに今回追記したCSSは下記のCSSです。

height　：　高さを指定する

無事にCSSを追記したら、最後に下の「ファイルを更新」をクリックして、完了です。

追記したCSSに間違いがなければ、ヘッダー部分がカスタマイズされているはずです。

3.まとめ

以上でWordPressでヘッダーの高さをカスタマイズする方法の完了です。

ヘッダー部分は、自分のサイトを訪れてくれたユーザーが最初に目にする場所でもありますので、重要な箇所だと思います。

高さの調節や画像の設定など、細かい設定をすることで、訪れたユーザーに「このサイト良さそうだな・・」と思ってもらえるような「見た目の良い」サイトを作成できるよう、自分のサイトに合わせて設定してみましょう。

その他のWordPressカスタマイズは、

【hタグ】

【ヘッダー・メニュー】

【サイドバー】

【プラグイン】

【URL変更】

【その他】

上記の記事を参考にしてください。