人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: はしさん
●カテゴリ:はてなの使い方
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● スカイ

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

記事に以下を記述


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


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


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

2 ● スカイ
ベストアンサー

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


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

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

3 ● MOKO(煎餅キラー)

できると、夢で見た


はしさんさんのコメント

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ