はてなブログで

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

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

ベストアンサー

id:Sukai No.2

スカイ回答回数8ベストアンサー獲得回数42012/08/15 20:45:53

続きを読む機能としての画像を設置したいということだったんですね。
自分のはてなブログで試行錯誤したらできました。
前回書いた記述は全て消して、デザイン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ベストアンサー獲得回数42012/08/14 19:28:13

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

記事に以下を記述


<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ベストアンサー獲得回数42012/08/15 20:45:53ここでベストアンサー

続きを読む機能としての画像を設置したいということだったんですね。
自分のはてなブログで試行錯誤したらできました。
前回書いた記述は全て消して、デザイン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

MOKO(煎餅キラー)回答回数1ベストアンサー獲得回数02012/08/16 12:17:08

できると、夢で見た

id:zz-z

2012/08/16 12:33:39

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

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

トラックバック

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません