CSS ペタぼたん 追加です
昨日はこのペタぼたんのおかげか
いつもの３倍近くペタを付けていただきまして
本当にありがとうございます
本来ならばみなさまにペタをしにいかなければならないのですが
なかなか出来ず申し訳なく思っております
見捨てないでこれからもよろしくお願いします m(_ _)m
前回のペタボタン ・・・・・・
色違いで作ってみました・・・・・
サイズは同じですので
CSSの画像のURLを変更するだけでOKです
※フリースペースの画像のURLはそのままでOKです
お使いのスキンにあわせて・・・・・
気分にあわせて・・・・
変更してくださいな・・・・
8/22 青を作り直しました
※設置して背景が黒やピンクになったり動かない場合はサムネイル画像をCSSに記入しています
_s.gif URLの最後の部分の _s を削除すればオリジナル画像になります
設置方法は・・・
ブログパーツじゃないよ ＣＳＳだよ ペタぼたん
すみません・・・
メニューより先に記事にしてしまいました
ココのブログについている ブログパーツみたいなペタぼたん
じゃまじゃなければ・・・・
つけてみませんか？
※Operaで表示位置が違っている場合があります
・・他の方は大丈夫のようです、おかしなのは私だけ？みたい・・・・・・・
↓まずは・・・ 画像を持ち帰って画像フォルダにアップして、画像のURLを調べてください
※サムネイル画像（最後が _s.gif）はアニメーションしないと思いますのでオリジナル画像のURLで
↓2枚のようですが1枚の画像です
8/21素材追加しました CSS ペタぼたん 追加です
フリースペースに
こちらは今まで通りペタ画面へのリンクになります
※もしフリースペースがいっぱいでフリープラグインが空いていたらフリープラグインでもOKです
次にＣＳＳの最後に
#frame {
position: relative;
}
div#toppeta{
position:absolute;
top:0px;
right:0px;
z-index:100;
}
/* ペタボタンロールオーバー */
#toppeta img {
visibility : hidden ;
}
#toppeta a{
display: block;
overflow: hidden;
padding:0;
margin:0;
width:150px;
height:150px;
background-repeat : no-repeat ;
background-image : url(画像のURL);
}
#toppeta a:hover {
background-position:-150px 0;
}
まずは・・・・・top:0px; right:0px; はそのままで
画像のURLだけ入れてアップしてみてください
するとブログの右の方にペタボタンがあらわれます・・・・
スキンやすでにCSSをさわっていたりした場合で表示される位置が違う場合があります
その場合でも下の説明のように好きな場所に移動させてください
赤い四角内(150px×150px)がクリックできる部分です
あまり上にして ↓ ココにかぶってしまうと チェックリストに追加がクリックできなくなります
コレを見ながらＣＳＳの
top:0px;
right:0px;
の数値を変えて表示させたい位置にもっていきます
上に移動は top: -**px (マイナスをつけます) 下に移動は top: **px と数字を入れた分移動します
右に移動は right: -**px (マイナスをつけます) 左に移動は right: **px
様子を見ながら数字を変更していって好みの位置に設置下さい
※設置が左の方でしたら right ではなく left: 0px; でやった方が早いです
rightでしたら画像の右上の角が、leftでしたら左上の角が基準になります
CSSの編集が出来ないスキンの場合
フリースペースに
※アメブロの変更によりコレではペタできません・・・ 下に追記しているのを利用ください
※もしフリースペースがいっぱいでフリープラグインが空いていたらフリープラグインでもOKです
そしてフリープラグインに
<style type="text/css"><!--
#frame {position: relative;
}
div#toppeta{
position:absolute;
top:0px;
right:0px;
z-index:100;
}
#toppeta img {
visibility : hidden ;
}
#toppeta a{
display: block;
overflow: hidden;
padding:0;
margin:0;
width:150px;
height:150px;
background-repeat : no-repeat ;
background-image : url(画像のURL);
}
#toppeta a:hover {
background-position:-150px 0;
}
--></style>
位置の設定方法は上の方法と同じです
※設置して背景が黒やピンクになったり動かない場合はサムネイル画像をCSSに記入しています
_s.gif URLの最後の部分の _s を削除すればオリジナル画像になります
自分で画像を作る場合・・・・
縦150px横300pxで・・・・
左側半分は普段表示される画像
右半分はマウスがのったときの画像
背景は透過させてください
で、上のCSSがそのまま使用できます
また縦300px横150pxの上下で画像を作られた場合は
↓CSSでココだけ変更してください ( 0 と -150pxが逆になって下に移動させます)
#toppeta a:hover {
background-position:0 -150px;
}
また、ペタ以外のボタンを作る場合は
を、参考にしてフリースペースに書くaタグ部分を変更してください
こんな説明で大丈夫でしょうか・・・・？
わかっていただけるか不安です
また勝手にアメブログッズの画像を使っちゃっていますが・・・・・
設置出来た方はコメントに「出来た～」だけでいいのでお知らせ下さい
すぐにペタしにいきます・・・・・？
このブログでつけています付箋紙にような
「チェックリスト」「メッセージ」のボタンは画像が出来ていませんので別の機会に紹介します
その前にメニュー ・・・・ わかってますよ・・・・・
11/18 アメブロの変更により修正しました
<div id="toppeta"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID"><img src="画像のURL"></a></div>
<div id="toppeta"><a href="http://peta.ameba.jp/p/addPetaComplete.do?targetAmebaId=あなたのID"><img src="画像のURL"></a></div>
※2009.2.20 スパム対策？この方法は使えなくなりました
お好きな方を使ってください
ここのブログのトップについているペタボタンは従来のようにペタ画面にリンクされています
サイドバーの下についているピンクのペタぼたんをクリックするといきなりペタがついた状態になります・・・
・・・・だめだ～遊んじゃっているよ～
メニューの記事も書かないで・・・・・
画像作って遊んじゃっています・・・・・
アニメーションgifしかブログに使えないから動きがね・・・・・
でも・・・ オモロ～
やっばっ・・・・
メニューに興味なくなってきちゃったよ～
今度のペタボタンはどうですか～？
マウスをのせるとクルクル回っているようにみえるはずなんですが・・・・
デカすぎですか～？
じゃまですね・・・・・
使いたいって要望があれば
そのうちに
画像も含めて配布しますね・・・・
あ～ぁ・・・・・
メニューの記事書かなくちゃ・・・・・・
・・・・ムシムシするから
・・・・・・また
・・・・・あとで～
やっぱし・・・・
Operaで表示位置がずれます・・・・・
おまけに8と9でも表示位置が違う・・・・
って、どうなっているんでしょ？
「相性が悪いから・・・」って思い込んで無視しようかな・・
macとかSafariではどうなっているのでしょ？