賢威6.1~ヘッダー画像の上下幅を変えたい

賢威6.1マネー版で、ヘッダーに画像を設定した場合、

keni615

このヘッダーは半分くらい真っ白なので見えにくいかもだけど、
ヘッダー画像の上部、と、ヘッダー画像とグローバルメニューの間、
要は、ヘッダー画像を挟んで上下のスキマが広いので、
細めのヘッダー画像を作っても、ちょっとヘッダーが大きくなりすぎな気がします。

まぁ、ヘッダーを目立たせて出オチを狙うってのもありかもですが、
そういうのはランディングページの役目であって、
コンテンツ重視のメインブログのヘッダーが異常に派手なのはいけすかない・・・

サイトが立ち上がった瞬間、読者さんの受ける印象として、
ヘッダー「だけ」ってのもねぇ。。。Σ( ̄Д ̄;)

ここにさらにイメージ画像を入れてしまうと、
サイトが立ち上がったとき、まるっきりコンテンツ部分が見えなくなってしまうでしょ?

それではメインブログとしてちょっと・・・

あと、PRIDEみたいにアドセンスを利用する場合、
ヘッダーが勝ちすぎて、ヘッダーとアドセンスしか見えない状態だと、
アドセンスの警告対象にもなってしまうので注意です。

ま、最初に見たとき、PCの画面半分くらいがヘッダーで埋め尽くされてて、
「あぁ、こりゃしつこいわ・・・」と思ったのがきっかけで、
ヘッダー画像を細く作り直したり、いろいろしたんだけど、

根本的にヘッダー画像の上下の余白が大きすぎるんだ!
という責任転嫁で自分を納得させ、じゃぁ、あの幅を縮めよう!
ってなことでやってみました。

「外観」⇒「テーマ編集」から、「design.css」へ進みます。

keni613

その中から、下記のような記述を探します。

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

#header{
background: url(./images/common/bg-header.png) center bottom repeat-x #ffffff;
font-size: 1.2em;
}

* html #header{ background: #ffffff; } /*IE6*/

#header-in{ padding: -1em 0; } ← ここがヘッダー画像のすぐ上の幅

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の

の1行の幅はこちらのwidthの値を変更*/
}

#header .header-logo{
margin-bottom: 0.2em; ← ここがヘッダー画像のすぐ下の幅
font-size: 2.167em;
}

私はヘッダー画像のすぐ上の幅を「-1」にして、
ヘッダー画像のすぐ下の幅を「0.2」にしています。

keni616

なんか、すっきりした感じ♪

あわせて読みたい関連記事

コメントは停止中です。

サブコンテンツ

このページの先頭へ