【WordPress／Stinger】ヘッダーにタイトルを重ねる方法

私は現在Wordpressでテーマ「Stinger3」を使用しているのですが、最初使ったときになんか違うと思ったんですよね。
そう、Stingerってヘッダー画像とサイト名が分離しているんです。

私は以前にfc2で作っていたブログの影響か「ブログとはヘッダーの中にタイトルがあるものだ」という固定観念を持っています。
ということで今回はWordpressでヘッダーとブログタイトルを重ねる方法を紹介していきます。

スポンサーリンク

style.cssの「#container #header #header-in #h-l」に「position: absolute;」を追加する

なんて紹介されていたりするのですが、私の場合この方法を試すとどうしてもサイトの横に無駄なスペースができてしまって、サイトが無駄に横にスクロールしてしまうようになりました。

そこで発想を転換。
標準のカスタマイズ機能で設定できるヘッダー画像を消して、style.cssから背景としてヘッダー画像を設定しました。
私のブログだとこんな感じ。

body {
background:url(header.jpg) no-repeat top center #EAEAEA;
background-color: #f3f3fa;
}

私はヘッダー画像の上に少し隙間を開けたかったので画像自体に背景の#f3f3faと同じ色の余白をとっています。

その後「#container #header #header-in #h-l」でヘッダーの高さを調整。
「#container #header #header-in #h-l .sitename」でサイト名の位置や色を調整すれば設定完了です！

-ブログ