livedoor ナレッジ

トップ画像について教えてください。

ブログのトップ画像を自分の好みにに変更することはできたのですが、タイトルの文字が残っているままなんです。
このタイトルの文字を消して画像だけ残し、さらにその画像をクリックするとトップに戻るように設定するにはどうすればよいのでしょうか？

よろしくお願いします。

次は、各HTMLテンプレートを開きます。
全てのテンプレートを変更する必要がありますので、網羅した説明の仕方をしますが、最初はトップページだけを変更して確認して下さい。

少しスクロールさせると、

<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>

というところがあります。
デザインによっては、

<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>

という具合に

accesskey="1"

が付いているかも知れません。（トップページにはなくとも個別記事ページ、各アーカイブにはあることがあります。）

ここを

<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>"><img src=" 画像のURL " border="0" alt="<$BlogTitle ESCAPE$>"></a></h1>
<div class="description"><$BlogDescription$></div>

という具合に変えて下さい。

accesskey="1"

が付いているテンプレートなら

<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><img src=" 画像のURL " border="0" alt="<$BlogTitle ESCAPE$>"></a></h1>
<div class="description"><$BlogDescription$></div>

となります。
" 画像のURL "には、スタイルシートで削除した新しい画像のURLを入れて下さい。
HTMLテンプレートのほうを変えた場合、画像の大きさでデザインが変わる可能性があります。
これで、一度、見ます。
［この内容で保存する］をクリックし、再構築のページを開きます。
［インデックス（トップの記事）］の状態のままで再構築します。
ブログを開き直して（更新ボタンを押して）状態を見て下さい。

画像が左に寄っているようなら、HTMLテンプレートの変更箇所の前に

<center>

変更箇所の後ろに

</center>

と入れます。

もっと微調整したい場合は、画像の大きさを変えるとか、paddingの指定を付けるとか、細かな作業をすることになります。

トップページで納得したら、他のHTMLテンプレートも同様に変更します。

タイトルの表示と、その背景にある画像は全く違うものですから、背景の画像をいじってもタイトルの表示は変わりません。

HTMLのほうで設定されている、タイトル文字列の代わりを画像にさせたいのでしたら、HTMLの方を変えなければなりません。

本来、タイトルに文字を使うデザインと画像を使うデザインは、設計の仕方が違うものです。
そのため、質問者の考えているよりも、本質的で、細かな変更をすることになります。


画像の変更は、スタイルシートの

#banner{ }

の中の

background:url( )でやっていることを前提に説明します。

もし、

#banner,#subbanner{ }

の中でやっているのであれば、別の工夫が必要です。


まず、スタイルシートを開きます。
現在のスタイルシートをコピーして、メモ帳などに貼り付け保存しておきます。

タイトル背景の画像の指定を削除して下さい。邪魔になります。
元に戻すのではなく、画像のURLを指定しているところを削除して下さい。

もう一つ、スタイルシートにある

.blogtitle{ }

の { } の中も削除して下さい。

［この内容で保存する］をクリックします。

回答欄の字数制限のため、回答を分けて書きます。
回答番号順に読んで下さい。

他にも、背景画像はそのままで、タイトル文字の変わりに透明なgif画像を使うという手もあります。

#banner,#subbanner{ }

の中に背景画像を付けている場合は、こちらのほうが使えます。
しかし、そのためには、gif画像の作り方も説明しなければなりません。

そちらをやりたい場合は、とりあえず、これで質問を閉じて、また質問して下さい。