h1タグを飛ばしたかったが・・・

　ヘッダーのバナーを作ったのですが、技術的に折り合いがつかず、お箱入りになってしましました。なので　投稿で乗っけてみたいと思います。

こんな感じのをつくって　頭のタイトルにいれたかったんですが。

PNGファイルを重ねると、IE6ではやり重ねたりすると表示しなかたりする。　回避方法はあるんだけどもうJavascriptを使いたくない。　PHPですでに重たいので　Javascriptは読み込みの順番があるのですがpluginが順番を書き換えたりするので、また何かを改造するか、（改造できない）実装をあきらめるかになったので。今回は見送りとなりました。　　

実装失敗を繰り返しております。　見た目ぐらいはね、改造に成功したいんですけどね。悔しいのでここで発表！　PINGファイルです。

使用中のテーマについて　

　wordpressは　ダウンロード時　クラッシックとデフォルトのテーマが実装されていてえらべるんですが、　ダッシュボードから簡単に新しいテーマ（theme）をダウンロードでき、すぐに実装できます。

　僕が選んだのはフッターにリンクしている　スターダスト（stardust）と云うイタリアのデザイン事務所が配っているテーマをつかっています。

　ソースもスタイルシートもシンプルで色使いがうまいのでこのテーマを選びました。　すでに改造をかさねているので見た目はだいぶいじって変わってきたかなと思います。

これらが改造の内容です。　

1. CSSでフォントファミリーをゴシック系（メイリオ、ヒラギノ角ゴ）に変更する。
2. 標準のTEXT-SIZEも変更する。
3. ヘッダーのBGⁱ をバトルフィールバットカンパニーの迷彩服風にfireworksで画像を作り直しフィットさせる。
4. サイドバーと　メニューのBGを加工する。
5. テーマLOGOをヘッダーに入れる。
6. ページナビゲーションを入れ子メニューにする。
7. あと日付などを日本語表記するよにPHPをいじったりしています。

日本人用のtheme以外は言語の改造は必須ですが、地味に難易度が高かったりします。このテーマは割と少なめで簡単でした。　しかし海外用（アルファベット系）のテーマは日本語を入れるとなんか　かっこ悪くみえるんですよね。

話は戻ってタイトルロゴタイプをこんな感じで使いたかったんです。

H1タグを飛ばすと表題で書きましたが、TEXT情報のインデントを大きくとってブラウザの外に出して、文字の下のバックグラウンドに設定した画像を表に見せて、読みやすい文字やデザインされたロゴタイプを見せるのが目標です。ネストさせると一番親のバックグラウンドとうまく折り合いをつけるのがコツなんですけど・・今回はぼぼ透明もしくは白（＃FFF）が簡単なんですが、これが腕の見せ所ではあります。

/*バナーの例*/
div#h1buner{/* 親の要素の設定*/
	width:217px;
	height:72px;
	margin:10px 10px 0 0;
	padding:0 0 0 10px;
	background-color:transparent;
}
#h1buner ul {/*リストマークをなくす*/
	list-style-type: none;
}
#h1buner li {/*文字を飛ばす*/
	text-indent: -9999px;
	background-color:#FFF;
        background-image:none;
}
#h1buner li a{/*aタグをブロックタグにして大きさを指定*/
	display:block;
	height: 72px;
	width: 205px;
}
#h1buner li a:link,#h1buner li a:visited{/*リンク時のバックグラウンドのイメージの設定*/
	background:transparent left top no-repeat
url(http://www.nuritategomen.com/wordpress/wp-content/uploads/header_h1_bg.png);
	border:1px solid #000;
}
#h1buner li a:hover,#h1buner li a:active{/*ホバー時のバックグラウンドのイメージの設定*/
	background:transparent left top no-repeat 
url(http://www.nuritategomen.com/wordpress/wp-content/uploads/heder_h1_bg_hover.png);
	border:1px solid #d70606;
}

自慢げにソースさらすことでもないですね。preタグを使いたかっただけなんで御免！

1. background-image [↩]