ここから本文です

cssでブログのタイトルを画像にする方法を教えて下さい 自分が使わせて貰っ...

bor********さん

2014/12/810:43:35

cssでブログのタイトルを画像にする方法を教えて下さい

自分が使わせて貰っているブログサービス(mmm.meブログ)では、例えばhtmlで画像にする場合

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="画像URL" border="0"></a></h1>

これで出来るので一応は解決なのですが



忍者レコメンドで画像付き最新記事を表示していて、画像なしの記事の場合自作した「NO IMAGE」の画像が表示されるはずなのですが、ブログタイトルを画像にしてから、その画像が記事の画像として認識されてしまいます。


htmlで画像を指定したからそれが読み込まれてしまったので、htmlで直接画像を入れるのではなく、cssで出来れば読み込まれないのではないかと考えています。
その考えで合っているのでしょうか


出来るとしたらどのようにすればいいのでしょうか


以下、ブログタイトル部分の、何も手を加えてない状態のcssです


h1 {
color:#000000;
font-size:25px;
font-weight:bold;
line-height:1.15;
margin:0 0 0 10px;
padding:15px 0 0 0;
text-decoration:none;
text-align:left;

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
color:#000000;
}


そのまま背景画像を指定したのですが

background-image : url("画像URL");
background-repeat: no-repeat;

これでも出来ませんでした。
その場合htmlに何か手を加えれば出来るのでしょうか


長文ですが、ご教授よろしくお願いします

閲覧数:
54
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

ndi********さん

2014/12/812:46:48

mmm.me も 忍者レコメンドも知らぬが html は fc2 と酷似しているようだ。
background-image : url("画像URL"); を加えただけでは背景画像は<%blog_name> の背景画像となるので、通常は「幅」と「高さ」を必要とする。
即ち
h1 {
color:#000000;
font-size:25px;
font-weight:bold;
line-height:1.15;
margin:0 0 0 10px; /* 適宜調整 */
padding:15px 0 0 0; /* 適宜調整 */
text-decoration:none; /* 不要 */
text-align:left;
background-image : url("画像URL");
background-repeat: no-repeat;
}
更に
width: ***px; /* 画像幅 */
height: ***px; /* 画像高さ */
text-indent: -9000px; /* 文字はアッチヘ行け */
を加え、更に
h1 a {
width: ***px; /* 画像幅 */
height: ***px; /* 画像高さ */
overflow: hidden;
outline: none;
display: block;
}
を加える。
これで画像をクリックすると、トップページに飛ぶという動作まで。

忍者レコメンドがヘッダー画像を適用するというのは信じられないが、どこかにミスがありそうな予感。

質問した人からのコメント

2014/12/8 19:42:24

降参 解決しました。レコメンドも問題なく画像なしの状態になりました。
ありがとうございましたm(_ _)m

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる