2009年02月23日

ヘッダー画像にリンクを貼りたい

ブログのヘッダー画像に自分のBLOGのTOPページへのURLを貼りたいのですが、
Google等で調べた所、仕方等書かれているサイトまで行き着いたのですが、
なにやら違うCSSだったりで、やり方がどうしてもわかりません。
CSSの事はほとんど無知で、どなたか知っていらっしゃる方がいましたら、
恐れ入りますが、教えて頂けますでしょうか。
初歩的な質問で申し訳ありません。。。


同じカテゴリー(その他の質問)の記事画像
ログインは出来るけど
DMCA違反対策
移動も消去もできないアイテム
frickrに新規登録する方法
phoenixviewerでのボイスチャット不具合
SSが撮れない現象
同じカテゴリー(その他の質問)の記事
 公式ビューワが開けなくなった(起動できなくなった) (2018-07-22 19:36)
 リボンチョーカー(探し物) (2017-03-12 16:29)
 FS4.7.7で表示フォントが変わった? (2016-07-07 18:14)
 リンデンラボからの 1ドル 引き落とし  (2015-10-05 00:44)
 スパムのノートカード (2015-01-06 09:23)
 QAvimator (2014-07-15 19:25)

Posted by sakana  at 23:55 │Comments(4)その他の質問

この記事へのコメント
画像にリンクを張るだけであれば HTML しか使いませんが、ご質問の内容は、画像が思った通りに表示されないということでしょうか?

使用されているテンプレートによって対処内容が変わるので、現在のヘッダー部分 <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; /* もしくは削除 */
}
Posted by YumeYume at 2009年02月24日 12:10
とてもご丁寧なお返事ありがとうございます^^

使用しているテンプレートはオリジナルテンプレートです。
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);
}

この部分でよろしいのでしょか。。。?
大変お手数おかけしますが、またお返事頂けると幸いです。
Posted by sakanasakana at 2009年02月24日 21:11
あぁ、背景に画像を指定してしまったんですね。

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%;
}
----

一度、上記の方法を試していただけますか?
Posted by YumeYume at 2009年02月24日 22:37
yumeさん

お返事、本当にありがとうございます^^

教えていただいたように、試しました所、ヘッダー部分にリンクを
貼りつける事ができました!

しかも、気になっていた、ブログタイトルを消す方法まで教えてくださって、
本当に感謝感激です!

この方法を見つけるのに、かなり苦戦していたので、助けて頂いてとても嬉しいです。

丁寧なご回答本当に本当にありがとうございました^^
Posted by sakanasakana at 2009年02月25日 11:37
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。