[対応: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; }
このような感じになると調整完了です。
保存をして、ヘッダー画像を確認すると
下記のように変更されているはずです。
以上
賢威カスタマイズ ヘッダー画像の高さ調節方法
でした。