[対応：5]ヘッダー画像の高さ調節方法

賢威テンプレートのヘッダー部分、ヘッダー画像の高さ調整についてご説明します。

賢威の場合は、デフォルト画像より少し大きな画像を入れると
下に画像が伸びてしまい窮屈になります。

画像が大きすぎるとグローバルメニューと重なってしまう事がありますので、
この画像の高さを調整して中央に表示させます。

 

賢威カスタマイズ ヘッダー画像の高さ調節方法

それでは、方法をご説明して言います。

WordPressの場合は、
ログイン後⇒ダッシュボード⇒外観⇒テーマ編集と進みます。

中のスタイルシートを選択して
cool-whiteg12.css（クール版の場合）をクリックします。

※テンプレートによって名前が違います。
テンプレ名ーカラー/カラム数.cssになりますので、
ご確認ください。

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

項目よりやや下のにある。

 

/*●ヘッダーロゴ*/
#header-logo{
    position: absolute;
    top: 27px;
}

/*IE6対策*/
* html #header-logo{ top: 20px; }

/*IE7対策*/
*+html #header-logo{ top: 20px; }

こちらのソースの修正を加えます。

top: 27px;の部分の数字を少なくすると、画像が上に上がります。
反対に数字を大きくすると、画像が下がります。

※注意
テンプレートの種類によっては、
ブラウザー別対策を行っている場合もありますので、
上で引いた数と同じだけ引いて表示します。

/*IE6対策*/
* html #header-logo{ top: 20px; }

/*IE7対策*/
*+html #header-logo{ top: 20px; }

 

【変更例】

/*●ヘッダーロゴ*/
#header-logo{
position: absolute;
top: 15px;
}

/*IE6対策*/
* html #header-logo{ top: 8px; }

/*IE7対策*/
*+html #header-logo{ top: 8px; }

このような感じになると調整完了です。

保存をして、ヘッダー画像を確認すると
下記のように変更されているはずです。

 

以上
賢威カスタマイズ ヘッダー画像の高さ調節方法
でした。