TOP画像をクリックするとブログのTOPページに戻れるようにしたいのですが･･･

トップ画像をクリックするとブログのトップページに戻れるようにしたいのですが、 のryu_zさんのコメントを参考にしてやってみたところ、一応TOP画像の辺りをクリックすればTOPページに戻れるようにはなったのですが･･･どうしてもTOP画像の上と左にTOPページへとリンクされない｢ただの画像｣の部分ができてしまいます。(つたない日本語ですみません)
この部分のズレを消すにはどうしたら良いのでしょうか？
スタイルシート初心者の私にもわかりやすく教えていただければ幸いです。


以下は私のスタイルシートの、この｢ズレ｣と関係ありそうな部分です。

}
#cgmmenu{
background:url(http://www4.uploader.jp/user/pekachu/images/pekachu_uljp00064.jpg) no-repeat 50% 0;
height:140px;
padding-right:30px;
}


}
.blogtitle a {
width: 869px;
height: 140px;
margin:0 auto;
padding:0 42px 2px;
display:block;
text-indent:-9999px;
}


私のブログへのリンクです。


ご回答の程、よろしくお願い致しますm(_ _)m

こんにちは。
回答遅くなってすみません。

今は<div id="cgmmenu">に背景画を設定してあり、リンクは<div id="banner">の中にあります。
両者はマイナスマージンで重なるようにしてあるけど、この指定ヶ所の違いが今回の問題の原因になっているので、リンクと背景画のエリアを一致させたほうがいいですね。
具体的にはid="cgmmenu"はテンプレートから削除して、id="banner"に背景画を設定します。

あと余談になりますが、ブログタイトルの文字を消すなら
フォントサイズをゼロにしたり、

.blogtitle{
	…
	font-size:0;
}

テキストインデントをマイナスにしたり、

.blogtitle a{
	…
	text-indent:-9999px;
}

という小細工をするよりは

.blogtitle span{
	display:none;
}

として表示そのものを消した方がスマートです。

あと、ブログの説明も消すのでしたら、

.description{
	…
	display:none;
}

と入れておくといいです。


以上の事を踏まえると変更は、
1. まずは各テンプレートから↓の行を削除します。

	<div id="cgmmenu"><ul>
		
	</ul></div>

2. 次にCSSを以下のように変更します。

#banner{
	height:140px;
	margin:0 auto;
	text-align:center;
	clear:both;
	background:url(http://www4.uploader.jp/user/pekachu/images/pekachu_uljp00064.jpg) no-repeat 50% 0;
}

#banner a:hover{
}

.blogtitle{
	width:869px;
	margin:auto;
	padding:0;
	text-align:left;
}

.blogtitle a {
	width:869px;
	height:140px;
	margin:auto;
	padding:0;
	display:block;
}

.blogtitle span {
	display:none;
}

.description{
	width:778px;
	margin:0 auto;
	padding:3px 42px 0;
	line-height:135%;
	text-align:left;
	font-size:12px;
	color:#191970;
	display:none;
}

注、「.blogtitle span」の項目は元々無いので追加します。

分からないことがあったらコメント欄に書き込んでください。
お手数ですがよろしくお願いします。