2009年02月23日
ヘッダー画像にリンクを貼りたい
ブログのヘッダー画像に自分のBLOGのTOPページへのURLを貼りたいのですが、
Google等で調べた所、仕方等書かれているサイトまで行き着いたのですが、
なにやら違うCSSだったりで、やり方がどうしてもわかりません。
CSSの事はほとんど無知で、どなたか知っていらっしゃる方がいましたら、
恐れ入りますが、教えて頂けますでしょうか。
初歩的な質問で申し訳ありません。。。
Google等で調べた所、仕方等書かれているサイトまで行き着いたのですが、
なにやら違うCSSだったりで、やり方がどうしてもわかりません。
CSSの事はほとんど無知で、どなたか知っていらっしゃる方がいましたら、
恐れ入りますが、教えて頂けますでしょうか。
初歩的な質問で申し訳ありません。。。
公式ビューワが開けなくなった(起動できなくなった)
リボンチョーカー(探し物)
FS4.7.7で表示フォントが変わった?
リンデンラボからの 1ドル 引き落とし
スパムのノートカード
QAvimator
リボンチョーカー(探し物)
FS4.7.7で表示フォントが変わった?
リンデンラボからの 1ドル 引き落とし
スパムのノートカード
QAvimator
使用されているテンプレートによって対処内容が変わるので、現在のヘッダー部分 <div id="banner"> の HTML と CSS のソースを貼り付けていただくか、ブログの URL を教えていただけると確実かと思います。
ちなみに、横幅固定(740px)のデフォルトテンプレートを使用されている場合、最も簡単なのは以下のような方法です。
【HTML】
<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" title="「ホーム」や「ブログ名」など(オンマウス時にツールチップで表示されます)" accesskey="1"><img src="画像のURL" width="画像の横幅(ピクセル)" height="画像の縦幅(ピクセル)" alt="画像の説明文(「ヘッダー画像」など)" /></a></h1>
</div>
【CSS】
#banner,#subbanner {
padding: 0; /* もしくは削除 */
}
使用しているテンプレートはオリジナルテンプレートです。
URLは、 http://sakana.slmame.com/ なのですが、
ヘッダー画像にTOPページへ戻れるよう、リンクを貼りつけたいのです。
「現在のヘッダー部分 <div id="banner"> の HTML と CSS のソースを貼り付けていただくか」
と記入してくださっていましたが、
/* ブログタイトル・概要 */
#banner{
background-color: #ffffff;
height: 400px;
width: 700px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.tec29.com/usr/sakana/faq1.jpg);
}
この部分でよろしいのでしょか。。。?
大変お手数おかけしますが、またお返事頂けると幸いです。
sakanaさんのブログの場合、テンプレート「トップページ」「個別記事」「アーカイブ」の以下の部分
----
<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1">SLきまぐれ日記</a></h1>
<div class="description"></div>
</div>
----
を、以下のソースと入れ替えてください。
----
<div id="banner">
<h1><a href="<%BlogUrl%>" title="<%BlogTitle%>" accesskey="1"><img src="//img01.tec29.com/usr/sakana/faq1.jpg" alt="<%BlogTitle%>" /></a></h1>
</div>
----
これで、バナー画像にトップページへのリンクを張ったことになります。
そして、CSSは以下のように修正してください。
【#bannerの部分】
----
#banner {
height: 398px;
width: 700px;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
}
----
バナー画像の縦幅を「400px」とされていましたが、画像情報を拝見したところ、398pxのようです。
以下の部分は必要なくなったので削除してください。
----
.blogtitle{
font-size: 0px;
width: 0px;
margin: 0px;
padding: 0px;
text-align: left;
clear: both;
text-align: left;
}
.description{
font-size: 90%;
padding: 5px 10px 10px;
width: 730px;
text-align: left;
color: #;
line-height: 130%;
}
----
一度、上記の方法を試していただけますか?
お返事、本当にありがとうございます^^
教えていただいたように、試しました所、ヘッダー部分にリンクを
貼りつける事ができました!
しかも、気になっていた、ブログタイトルを消す方法まで教えてくださって、
本当に感謝感激です!
この方法を見つけるのに、かなり苦戦していたので、助けて頂いてとても嬉しいです。
丁寧なご回答本当に本当にありがとうございました^^