● 内容
① アメンバー限定画像の下にアメンバー申請と読者になるを横並びで配置します。
② 読者になるは、通常の読者になると相手に知らせて読者になるが選択できます。
・通常の読者になるは、相手に知らせるか？知らせない？が選択できるページです。
・知らせて読者になるは、相手に知らせないが選択できないページです。
● やり方
① フリープラグインへ下記を追加する。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
amember_reader_set(1);
});
</script>
■ 説明
・ 下記はフリープラグインに既に書かれていれば不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
・ amember_reader_set(1);
0・・・通常の読者になる
1・・・相手に知らせて読者になる
② ＣＳＳへ下記を追加する。
.amemberEntry-under .amemberBtn{/* アメンバーになる */
background-image:url(アメンバーになるの画像のＵＲＬ);
background-repeat:no-repeat;
width:200px;/* 幅 */
height:60px;/* 高さ */
display:block;
text-indent:-9999px;/* テキストインデント */
}
.amemberEntry-under .readerBtn{/* 読者になる */
background-image:url(読者になるの画像のＵＲＬ);
background-repeat:no-repeat;
width:200px;/* 幅 */
height:60px;/* 高さ */
display:block;
text-indent:-9999px;/* テキストインデント */
}
.amemberEntry-under .amemberBtn:hover{/* アメンバーになる(ロールオーバー) */
background-image:url(アメンバーになるの画像のＵＲＬ);
background-repeat:no-repeat;
}
.amemberEntry-under .readerBtn:hover{/* 読者になる(ロールオーバー) */
background-image:url(読者になるの画像のＵＲＬ);
background-repeat:no-repeat;
}
.amemberEntry-under{/* アメンバーになると読者になるの親要素 */
width:430px; /* アメンバーになる＋読者になるの幅＋右余白×２ */
height:60px; /* 高さ */
margin:auto; /* 中央寄せ */
}
.amemberEntry-under li{/* アメンバーになると読者になる */
list-style:none; /* リストなし */
padding-right:10px; /* 右余白 */
float:left; /* 横並びにする */
}
● ソースコード
// 読者になるをアメンバー限定画像の下に配置する
function amember_reader_set(reader_type){
var reader_normal_URL = "http://blog.ameba.jp/reader.do?bnm=";
var reader_message_URL = "http://blog.ameba.jp/readermessage.do?bnm=";
var amember_URL = "http://amember.ameba.jp/amemberRequest.do?oAid=";
var reader_URL;
if(reader_type==0){
reader_URL=reader_normal_URL;
}else{
reader_URL=reader_message_URL;
}
$(".amemberEntry .amemberEntryBtn").append('<ul class="amemberEntry-under"><li><a class="amemberBtn" href="'+amember_URL+ameba_id_get()+'">アメンバーになる</a></li><li><a class="readerBtn" href="'+reader_URL+ameba_id_get()+'">読者になる</a></li></ul>');
}