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

↓驚くほど簡単にクオリティの高い量産サイトを作成する!!↓

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

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

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

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

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

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

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; }

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

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

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

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

マメボーｗの無料メルマガ購読のご案内

ブ、ブログじゃとても言え無い･･･マメボーｗの稼ぐ裏話をご紹介します。

私自身が壮絶な遠回りと多くの失敗の末に、
現在では、安定して月収100万円以上を稼げるようになったのか？
その戦略的思考を包み隠さず、あなたにお伝えしていきます。