CSS ペタおねだりボタンのロールオーバー
最近つき始めました
ペタおねだりボタン・・・・
自分で好きな画像にしてついでにロールオーバーもしちゃいませんか・・
ロールオーバーさせますからマウスがのったときの画像も必要になります
今回はこんな画像を作ってみました
300px × 310px ( 300px × 155px ) 170px × 176px ( 170px × 88px )
上半分が普段の画像で下半分がマウスがのったときの画像になります
※画像を作るときは上下同じ高さにしてください
画像ができましたらCSSの最後に・・・
.e-peta img {
visibility : hidden ;
}
.e-peta a{
width:170px;/*画像の横*/
height:88px;/*画像の高さ(半分)*/
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
.e-peta a:hover {
background-position: 0 -88px;/*画像の高さ(半分)*/
}
※height 高さは画像の半分の高さです
記事にペタボタンを貼り付けます
ペタボタンを貼り付けたら・・・HTMLタグを表示にして
ペタボタンのタグの最初に <p class="e-peta"> を
最後に </p> を加えます
※この部分のタグはマークアップされていませんのでCSSで自動で変更することができません
毎回記事にペタボタンを貼り付けるたびにこの作業が必要になります
もし・・・記事にペタボタンを貼り付けたときに
<p><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=exlink&guid=ON"><img height="50" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_01.gif " width="150" /></a></p>
↓HTMLタグを表示したときに前後にすでにpタグが付いていた場合は↓
<p class="e-peta"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=exlink&guid=ON"><img height="50" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_01.gif" width="150" /></a></p>
記事を書いているときは・・・・こんなですが・・・
記事では・・・・ マウスをのせてください
JavaScript ページトップへ(改)
ページトップへの文字やアイコンを変更したいです・・・・って要望が・・
で
JavaScript ページトップへ のちょっと改良です
フリープラグインに文字とアイコンのURLを入れてから貼ってください
※前のを使われている場合は前のは削除してください
<script type="text/javascript" src="http://ameblo.jp/skin/templates/21/ab/10007882321.css"></script>
<script language="javascript"><!--
var Gtm = "文字";
var Gti = "アイコンのURL";
window.onload = function(){myGt();}
// --></script>
http://ameblo.jp/skin/templates/21/ab/10007882321.css
この部分のURLも別ですので注意下さい
文字の部分に「トップへ」「ページトップ」「TOP」なと表示したい文字をいれて
アイコンのURLで好きなアイコン画像のURLを指定します
たとえば・・・・
文字を 上へ アイコンを
の場合・・・
var Gtm = "上へ";
var Gti = "http://stat.ameba.jp/common_style/img/common/icon/rank_up2.gif";
文字を使わないで アイコンを
の場合・・・
var Gtm = "";
var Gti = "http://amebabbs.ameba.jp/img/screen/cmn/ico/ico_top.gif" ;
※文字を使わないでアイコンだけでもOKです その場合は var Gtm = "";
の場合・・・
var Gtm = "このページのトップへ";
var Gti = "http://stat.ameba.jp/blog/ucs/img/char/char2/173.gif" ;

ちなみに・・・・
このアイコンは http://stat.ameba.jp/p_skin/cmn/img/icon_pagetop.gif
すごいよ!! アメブロさん
昨日・・・・
ソーシャルブックマークの件でアメブロに問い合わせをしたんです
みなさまはリクミィのページに
「ソーシャルブックマークに追加する」って付いているのをご存知でしたか?
フォトにいたっては「ソーシャルブックマークに追加する」に加えて
レイティング(web拍手みたいなの・・)まで付いちゃっています
「これらの機能をブログの記事にも付けられるようにしてください」
って問い合わせしました・・・・
で・・・・
返事が来ました・・・・
すごいよ!!アメブロさん
問い合わせをして2時間半で返事が来ました!!
設置予定はありませんが今後の検討課題にします
って返事でした
が・・・
この返事の早さ・・・・
返事の内容はどうでもいいです
なぜかチョッピリうれしくなっています
へんですか?
