アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -163ページ目

CSS ペタおねだりボタンのロールオーバー

最近つき始めました

ペタおねだりボタン・・・・



自分で好きな画像にしてついでにロールオーバーもしちゃいませんか・・



ロールオーバーさせますからマウスがのったときの画像も必要になります


今回はこんな画像を作ってみました



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!    アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

    300px × 310px  ( 300px × 155px )       170px × 176px ( 170px × 88px )


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!   アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

上半分が普段の画像で下半分がマウスがのったときの画像になります

※画像を作るときは上下同じ高さにしてください



画像ができましたら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 高さは画像の半分の高さです



記事にペタボタンを貼り付けます



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


ペタボタンを貼り付けたら・・・HTMLタグを表示にして

ペタボタンのタグの最初に <p class="e-peta">  

最後に </p> を加えます

※この部分のタグはマークアップされていませんのでCSSで自動で変更することができません

 毎回記事にペタボタンを貼り付けるたびにこの作業が必要になります
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


もし・・・記事にペタボタンを貼り付けたときに

<p><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=exlink&amp;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&amp;guid=ON"><img height="50" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_01.gif" width="150" /></a></p>





記事を書いているときは・・・・こんなですが・・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


記事では・・・・ マウスをのせてください


ペタしてね



ペタしてね

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

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

文字を使わないで アイコンを   の場合・・・

var Gtm = "";
var Gti = "http://amebabbs.ameba.jp/img/screen/cmn/ico/ico_top.gif" ;


※文字を使わないでアイコンだけでもOKです その場合は var Gtm = "";
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

文字を このページのトップへ  アイコンを  の場合・・・


var Gtm = "このページのトップへ";
var Gti = "http://stat.ameba.jp/blog/ucs/img/char/char2/173.gif" ;


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



ちなみに・・・・   このアイコンは http://stat.ameba.jp/p_skin/cmn/img/icon_pagetop.gif

すごいよ!! アメブロさん

昨日・・・・
ソーシャルブックマークの件でアメブロに問い合わせをしたんです



みなさまはリクミィのページに
「ソーシャルブックマークに追加する」って付いているのをご存知でしたか?

フォトにいたっては「ソーシャルブックマークに追加する」に加えて
レイティング(web拍手みたいなの・・)まで付いちゃっています



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



「これらの機能をブログの記事にも付けられるようにしてください」
って問い合わせしました・・・・




で・・・・

返事が来ました・・・・

すごいよ!!アメブロさん
問い合わせをして2時間半で返事が来ました!!



設置予定はありませんが今後の検討課題にします
って返事でした





が・・・
この返事の早さ・・・・
返事の内容はどうでもいいです
なぜかチョッピリうれしくなっています
へんですか?