テンプレートのTOP画像をタイトル文字代わりにしたい（急募）

質問

お世話になります。
アメブロで友人のブログを作ったのですが、タイトルを表示させずに、テンプレート（スキン）をカスタマイズして自分で作成し、TOP画像全体をクリックすると最新記事（TOP）に行くようにCSSを変更したいのですが、初心者なのでやり方が分かりません。

タイトル●●●　←これをクリックすると通常なら最新記事へ行く形に
～○○の△△～

なりますが、TOP画像全体（自作のタイトル画像）をクリックする形に変更したいのです。そして、タイトル文字・タイトル文字の下の説明を非表示にしたいんです。

知識が乏しいため説明がうまくできず申し訳ありませんが、解る方おりましたらアドバイスお願いします。

回答No.2

Muller3 · ベストアンサー

間違っている箇所は特に見当たりません。
同じようにやってみましたが不具合はないです。
繰り返さないのにrepeat-x？とか、
position:absolute;は必要なのか？？？くらい。

文字が大きくなるのと画像が大きくなるのに何が関連性があるのかもしれませんが、提示されている内容からは読み取れません。
普通CSSで背景画像として設定された画像が、拡大されるなんてことはないと思うのですが。

いろんなブラウザで見てもそうなりますか？

お礼

回答ありがとうございます。
本日見てみたら画像の拡大が直っていました。どういうことでしょうか・・。
何度試してもダメだったのに、おかしいですね。。

でも確認までして頂きありがとうございました。
また機会がありましたらよろしくお願いします。

回答No.1

Muller3

これでわかるでしょうか？

1）　#headerに「←これ」と書いた記述部分を追加

#header {
background-image: url(http://タイトル画像URL);　←これ
background-repeat: no-repeat;　←これ
background-position: left top;　←これ
（略）
}

2）　/*header */内に以下の記述全てを追加。

#header h1 a {
font-size: 1px;
text-indent: -9999em;
display: block;
width: ○○px;　←※○○にタイトル画像の幅を入れる
height: △△px;　←※△△にタイトル画像の高さを入れる
}

3）#header h2に「←これ」と書いた記述部分を追加

#header h2 {
display: none;　　←これ
（略）
}

「画像置換」で調べてみるといろいろわかると思います。

補足

回答ありがとうございます。
回答をいただく前に画像を載せる所までは分かったのですが（背景に画像を表示することもできました）、トップのタイトル画像がやや大きく拡大されて表示されます・・・。
↓以下ペーストしてみたので間違っている個所があればご指摘願います。
分かりにくいのでまとめると
(1)タイトルを画像にしたい。サイズは760×350です。
(2)タイトル画像を押すとトップに戻るようにしたい。
(3)自作の背景画像を並べたい（繰り返し）
(4)タイトル画の上にルームやプログというものを表示させないようにする

どこをいじったせいなのか、ブログの文字がやや大きくなっている気もします。
アドバイスお願いいたします。

/* ---------- background-color : 背景色 ------- */
body {
background-image:url(背景画像のURLを入れてます);　
background-color:#FFFFFF;

}
#frame{
background-color:#FFFFFF;
}
#sub_a{
background-color:#FFFFFF;
}
#sub_b{
background-color:#FFFFFF;
}

(いじっていない所なので略)
/* -- // ameblo CSS Skin Layout Settings END --*/
#header{
height:350px;/*画像の高さ*/
background-image: url(タイトル画像のURLを入れてます);
background-repeat:repeat-x;/*繰り返さない*/
}

#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1 a{
width:760px;/*画像の横*/
height:350px;/*画像の縦*/
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
}
#header h2{
display:none;/*概要を非表示*/
}
div#userNaviArea{
display: none;
}