Hatena_tangoで金太郎の写真を別の写真にしたい
昨日公開したダイアリーの新しいテーマHatena_tangoですが、左上の画像を別の画像にできるように、psdファイルをアップしました。photoshopが使える方は好きに合成して作ってみてください。
hatena_tango.psd
少し敷居が高いので、サンプルでいくつかアップしました。該当のスタイルシートを「詳細デザイン」のスタイルシート欄に入れたら左上の画像が切り替わります。よろしければ使ってください。
しなもん
h1{
background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20060412/20060412142217.gif");
text-indent:150px;
}
兜
h1{
background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20060412/20060412142214.gif");
}
ラッパ水仙
h1{
background: url("http://f.hatena.ne.jp/images/fotolife/d/domu/20060412/20060412142215.gif");
}
外人の女性
h1{
background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20060412/20060412142216.gif");
}
蟹
h1{
background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20060412/20060412142213.gif");
text-indent:140px;
}半分くらいジョークです。
DOCTYPEとCSS
最近、同じCSS・同じブラウザなのに、あのサイトではできていて、このサイトじゃできないみたいな事があって思い当たってるのがページ「DOCTYPE」が違ってたって事が何度かありました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- IEでIMGにpaddingがつかない
- FFでanchorのかかったimgにtext-decorationがつかない
- table内でのtext-alignが普通（？）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- IEでIMGにpaddingがつく
- FFでanchorのかかったimgにtext-decorationがつく
- table内でのtext-alignが変（？）
具体的に自分が最近であったのはこの辺りだったのですが、調べてみると上に上げたような違いをまとめてるサイトがちらほらありました。
見た目やCSSだけじゃ気付かない意外な盲点だったので、一度、眺めるべきだなと思いました。
Designing with Web Standards―XHTML+CSSを中心とした「Web標準」によるデザインの実践 (Web designing books)
- 作者: ジェフリーゼルドマン,Jeffrey Zeldman,石田優子,ソシオメディア,ミツエーリンクス
- 出版社/メーカー: 毎日コミュニケーションズ
- 発売日: 2004/10
- メディア: 単行本
- クリック: 32回
- この商品を含むブログ (20件) を見る
この辺を読んだら詳細が分かるのかな。
