なんだか激しかったタイトル画像

ブログ

「S*PRI 〜WEBデザイナーができるまで〜」
ついに解決しました。
お題はこれ！

  • S*PRI（画像）という文字にtopへ戻るリンク
  • ブラウザの大きさに合わせて幅の変更
  • ブログの左右の空き

これらをすべて解決したやり方を発表！

body {
text-align:center;　(IE対策中央寄せ)
}
div.adminmenu {
margin: 0px auto;　(普通に中央寄せ)
padding: 0px;　(IEでレイアウトが崩れたため↓で8px)
text-indent:8px;　(paddingの代わり)
text-align:left;　(bodyで中央寄せしたので左寄りに戻す)
}
h1 {
height:180px;　(背景画像の高さ)
margin: 0px auto;　(普通に中央寄せ)
padding: 0px;　(テンプレートに色々かかってるので0に)
text-align:left;　(bodyで中央寄せしたので左寄りに戻す)
background:url('画像のある場所');　(タイトル文字を外した背景
画像)
}
.hatena-body {
margin: 0px auto;　(普通に中央寄せ)
text-align:left;　(bodyで中央寄せしたので左寄りに戻す)
}

とこれ
背景透明のタイトル文字。
　
今までcssの背景でやるか、はてなのh1を画像に変える設定でやるか、
でしたが、↑の方法はその両方でやっています。
cssの背景でやってあればブラウザがいくら小さくなってもタイトル画像はh1の大きさに合わせます。
大きくなった場合の対策をして背景はやたら長いです。
(19インチワイドでは背景の終わりは見えませんでした)
cssだけではリンクをつける場合どうしても画像にはできませんでした。
(h1の文字がどうしようもなかった)
そんな時お姫様はこう言いました。
　
姫「じゃあそこだけ画像で！」
俺「あっなるほど！」
　
まぁそんな感じで出来上がったのが↑の・・・うーん・・・ハイブリッド型！
いやいやそんな事普通に閃け！俺！
まだまだ修行が足りないようです・・・。
パンダらしく中国の山に引き篭って修行してきます！