まじょっこりー
ひっさびさー。おげんこりー。
はい、うざい二人です。
かみかみｗｗｗｗｗｗｗｗｗｗｗｗ 女王様に似たのねｗｗｗ
女王様のＰＣは直ったかしら？？？
【CSS】ペタ画像ロールオーバー＆自動定形文
ペタ画像のロールオーバーおよび記事下に自動的にペタしてねボタンを入れる方法です。
まずはペタのロールオーバーから。
ロールオーバーとは、画像などの上にマウスを重ねると、別の画像が現れることを言います。
画像に限らず、色を変えるだけでもロールオーバーが出来ます。
今回は画像を使って説明します。
画像を二枚用意します。通常表示される画像と、マウスを重ねた時に表示される画像です。
ペタ画像作成についてはさえらちゃんのブログ などで紹介されています。
二枚の画像が用意できたら、ブログのCSSに以下の文章を追加してください。
/* -----ペタボタンロールオーバー ここから-----*/
.e-peta img {
visibility : hidden ;
}
.e-peta a{
display: block;
padding:0;
margin:0;
width:250px;/*画像の横*/
height:125px;/*画像の高さ*/
background-image : url(最初の画像
) ;
background-repeat : no-repeat ;
}
.e-peta a:hover {
background-repeat : no-repeat ;
background-image : url(カーソルを載せた時の画像
);
}
/* -----ペタボタンロールオーバー ここまで-----*/
ブログの記事下に以下のタグを貼り付ければ、完成です。
<div class="e-peta"><a href="ペタのURL"><img border="0" src="ペタ画像 最初の画像"></a></div>
上記の方法だと、毎回タグを入力しなければなりません。
面倒くさいっ！！と言う方は、javascript を使って、記事下に自動定形文を入れる方法があります。
ブログのフリープラグインに以下の文章を追加してください。
<!-- 記事下固定定形文 ここから -->
<script type="text/javascript">
var myMe ='<center><div class="e-peta"><a href="ペタURL"><img border="0" src="ペタ画像 最初の画像"></a></div></center>'
$(function() {
$(".entry .foot").before('<div class="fix">'+ myMe + '</div>');
});
</script>
<!-- 記事下固定定形文 ここまで -->
後半を書きながら、何か違う気がしてきましたが、スルーします。
入力後は必ずブログの表示を確認してください。
ふぅー。ざっとこんなもん。是☆
※参考サイト → http://sooda.jp/qa/182797