livedoor ナレッジ

タイトル画像のズレを修正

タイトル画像のズレを修正したいのですが、いま一つやり方が分かりません。
どなたかご存知の方は何卒修正のやり方をお教え下さい。

現在は、スタイルシートとHTMLテンプレートの両方で画像を指定していますから、2つ出てきてしまっています。

背景に画像を使うということでは、スタイルシートのほうがきれいにできるのですが、画像をクリックして、トップページに戻るということをしたいようですから、スタイルシートのほうは無効にしましょう。

#banner,#subbanner{
	height:118px;
	text-align:center;
	background:url(htt～～～.gif) repeat-x;
	margin-bottom:0px;
}

から、background:url(htt～～～.gif) repeat-x;の行を削除します。
これで画像のダブりはなくなります。
しかし、これだけでは、タイトル部分の画像がうまく収まりません。
それは、この少し下にある

.blogtitle{
	font-size:medium;
	font-weight:bold;
	padding-top:55px;
}

の設定のためです。
これは、タイトル文字の設定をするためのものですが、タイトル文字を使わないにも関わらず、HTMLテンプレートのほうで

<h1 class="blogtitle"><a href="http://blog.livedoor～～～

と具合に、使ってしまっていますから、画像に位置に影響が出ています。
HTMLテンプレートのほうの class="blogtitle" を削除するのが本筋ですが

<h1><a href="http://blog.livedoor～～～

スタイルシートから、padding-top:55px;の行を削除しても表示は整います。

.blogtitle{
	font-size:medium;
	font-weight:bold;
}

もう一つ、このままでは、ブログの説明が書けませんね。
もし、ブログの説明も表示したい場合は、

.description{
	color:#CF3065;
	font-size:small;

}
のところに、margin-top:-20px; とでも入れれば、

.description{
	color:#CF3065;
	font-size:small;
	margin-top:-20px;
}

画像の下のほうに重なって表示されて、オシャレかも知れません。
こういう風にするには、もう少し、下に空きのある大きめの画像を使ったほうが良いかもしれません。
その場合は、

#banner,#subbanner{
	height:118px;

のheightの後の値（118px）も、それに合わせて大きくしてください。