はてなブログで

http://d.hatena.ne.jp/Sukai/←の続きを読むのように、ボタンに触れると、色が反転するのは、はてなブログでもできますか?
できるのであれば、やり方を教えてください!

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/08/17 12:16:11

ベストアンサー

id:Sukai No.2

回答回数8ベストアンサー獲得回数4

続きを読む機能としての画像を設置したいということだったんですね。
自分のはてなブログで試行錯誤したらできました。
前回書いた記述は全て消して、デザインCSSに以下を記述してください。

.seemore{
font-size: 0em;
text-indent: -5000px;
position:relative; left:80px;
}
.seemore a {
display:block;
width:200px;
height:30px;
border:0;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:top;
}
.seemore a:hover {
width:200px;
height:30px;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:bottom;
}

id:zz-z

http://taikodaisukinanasisan.hatenablog.jp/entry/2012/08/14/100413
やってみたのですが、記事の続きが表示されません…。
スミマセン。迷惑かけて…。

2012/08/16 09:57:32
id:Sukai

本当ですね。
私もCSS初心者なのでこれ以上の方法が分かりません。
お役に立てなくてすみません。

2012/08/16 16:11:04

その他の回答2件)

id:Sukai No.1

回答回数8ベストアンサー獲得回数4

マウスで触れると画像が変わる仕組みは利用できると思います。
以下のようにで試してみてください。

記事に以下を記述


<a href="http://d.hatena.ne.jp/Sukai/" id="a"></a>


デザインCSSに以下を記述

#a {
display:block;
width:200px;
height:30px;
border:0;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:top;
}
#a:hover {
background-color:
transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:bottom;
}


質問の意図とずれていたらすみません。

id:zz-z

続きを読むが2つ表示されるのはどうすればいいでしょう?
f:id:zz-z:20120815095025j:image

2012/08/15 09:50:42
id:Sukai No.2

回答回数8ベストアンサー獲得回数4ここでベストアンサー

続きを読む機能としての画像を設置したいということだったんですね。
自分のはてなブログで試行錯誤したらできました。
前回書いた記述は全て消して、デザインCSSに以下を記述してください。

.seemore{
font-size: 0em;
text-indent: -5000px;
position:relative; left:80px;
}
.seemore a {
display:block;
width:200px;
height:30px;
border:0;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:top;
}
.seemore a:hover {
width:200px;
height:30px;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20120306/20120306225752.gif");
background-position:bottom;
}

id:zz-z

http://taikodaisukinanasisan.hatenablog.jp/entry/2012/08/14/100413
やってみたのですが、記事の続きが表示されません…。
スミマセン。迷惑かけて…。

2012/08/16 09:57:32
id:Sukai

本当ですね。
私もCSS初心者なのでこれ以上の方法が分かりません。
お役に立てなくてすみません。

2012/08/16 16:11:04
id:upnusimoko No.3

回答回数1ベストアンサー獲得回数0

できると、夢で見た

id:zz-z

2012/08/16 12:33:39

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません