賢威でWordPress~ブログタイトルロゴの位置調整

賢威5.0テンプレート」では、
あらかじめ作成しておいたタイトルロゴを、
そのままテンプレートに埋め込んで、
テンプレートのデータを作ってくれます。

でも、ついつい、大き目のタイトルロゴを作ったら、
こんなことに…( ̄□ ̄;)!!


少し設定を変えるだけで、きれいに収まりますので、
その方法を見ていきましょう。

管理画面から、「外観」⇒「テーマ編集」を選択、

「cool-blueg12.css」を選択。
このファイル名は、テンプレートによって名前が違います。
「cool-blueg12.css」は、「クール版の青、2カラム」という意味。

そのCSSのページの中から、

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

という箇所を探します。
そこから、もうちょっと下に、
こんな箇所があるんです。

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

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

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

この、赤字で書いた部分。これを修正します。

top: 27px;
これは、トップからの距離がいくらか、という意味です。
今は、一番上から27ピクセル下がったところに画像を表示しているんですね。

画像を上に表示したい(トップからの距離を縮めたい)時は、
27よりも小さな数字にすればいいのです。
小さくなりすぎて、マイナスになってもかまいません。

逆に、画像をもっと下に表示したい(トップからの距離を広げたい)時は、
27よりも大きな数字にします。

少しずつ、実際の画面を確認しながら、
程よい高さを決めましょう。

位置が決まったら、デフォルトの設定「27」と、
どれくらい差があるか、みてください。

27から下がった(上がった)分だけ、
下にある、IE対策用の数値も変えていきます。

例えば、最初の27を20にした場合、
下のIE対策の部分は、同じように7を引いた13とする、といった按配。

/*●ヘッダーロゴ*/
#header-logo{
position: absolute;
top: 20px; ← デフォルトの27から7縮めた
}

/*IE6対策*/
* html #header-logo{ top: 13px; } ← デフォルトの20から7縮めた

/*IE7対策*/
*+html #header-logo{ top: 13px; } ← デフォルトの20から7縮めた

こんな感じで、3箇所の数字は、全部同じ数にするのではなく、
それぞれ同じだけ減らす(増やす)のがポイントです。

もし、後になって、「やっぱり違うヘッダー画像を使いたい」って時に、
新しいヘッダー画像が今の画像より大きかったり小さかったりしたときは、
ここで調整してくださいね。

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

“賢威でWordPress~ブログタイトルロゴの位置調整” への2件のフィードバック

  1. [...] 賢威でWordPress~豊富なテーマから好みのテンプレートを作る 賢威でWordPress~ブログタイトルロゴの位置調整 賢威でWordPress~ヘッダー説明文の変更 [...]

  2. [...] 賢威でWordPress~豊富なテーマから好みのテンプレートを作る 賢威でWordPress~ブログタイトルロゴの位置調整 賢威でWordPress~ヘッダー説明文の変更 [...]

サブコンテンツ

このページの先頭へ