ヘッダーの高さ（縦の幅）を変更する方法

こんにちは、静かな法律家のブログにようこそ。

今回は、

ヘッダーの高さ（縦幅）を変更する方法

についてお話ししていきます。

目的

ヘッダーの高さを変更する目的は、

見栄えをよくするためです。見栄えをよくすれば、

あなたのサイトに訪れた人が、あなたのサイトのことを

好ましく思ってくれる確率が高まります。

とくに、ヘッダーに画像をいれたときは、

ヘッダーの高さはその画像の高さに極力あわせたいところですね。

※ヘッダーを画像に変更する方法はこちら

手順

当サイトは賢威6.1のテンプレートを使っておりますので、

これをベースに解説していきます。

管理画面で、外観→テーマ編集から、design.cssを選択します。

以下の部分を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background-color: #ffffff;
font-size: 1.2em;
}

#header-in{ padding: 1em 0; }

/*●ヘッダーロゴ（メインタイトル）*/

上の黄色い部分を、以下のように変更します。

#header-in{ padding: 0; }

 

これで、高さは縮まったはずです。

もちろん、逆に高さを高くしたい場合は、

#header-in{ padding: 1.5em 0; }

などとすればよいです。