記事下に読者になろうの表示

★　記事下に読者になろうの表示


●　内容

①　記事下(記事フッター）に【読者になろう】の表示をする。
　　表示場所は変更できます。
②　オフィシャルブログに表示されているものなので、もしかしたら、今後、
　　一般ブログにも適用される可能性がるので注意してください。
　　（ＣＳＳ部分は一般ブログにも設定されているため）
③　表示例は下記の様になります。






●　やり方

①　下記をフリープラグインに追加する。
画像部分(ModImg)と名前部分(ModCnt_dt1)は変えてください。

<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'>

$('.articleLinkArea').readerLeadMod_disp({

ModImg:'http://contents.pigg.ameba.jp/api/0/user/new-blue-777/image?part=all&direction=FR&shadow=false&scale=264&action=glad',

ModImg_w:60,

ModImg_h:60,

ModCnt_dt1:'リアナ',

ModCnt_dt2:'さんの読者になろう',

ModCnt_dd:'ブログの更新情報が受け取れて、アクセスが簡単になります',

ModBtn:'読者になる',

ModBtn:'http://blog.ameba.jp/reader.do?bnm='

});

</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>


・　初期値は下記の様になっているため、初期値と同じ内容の行は消してください。

ModImg ='http://stat.profile.ameba.jp/profile_images/common/default.gif';
ModImg_w =60;
ModImg_h =60;
ModCnt_dt1='●●';
ModCnt_dt2='さんの読者になろう';
ModCnt_dd ='ブログの更新情報が受け取れて、アクセスが簡単になります';
ModBtn ='読者になる';
ModURL ='http://blog.ameba.jp/reader.do?bnm=';


・　通常は下記でＯＫです。画像部分(ModImg)と名前部分(ModCnt_dt1)は変えてください。

<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'>

$('.articleLinkArea').readerLeadMod_disp({

ModImg:'http://contents.pigg.ameba.jp/api/0/user/new-blue-777/image?part=all&direction=FR&shadow=false&scale=264&action=glad',

ModCnt_dt1:'リアナ'

});

</script>

・　'.articleLinkArea'　は、表示する場所です。変えることができます。


・　相手に知らせて読者になる場合は、下記の様にします。
　　画像部分(ModImg)と名前部分(ModCnt_dt1)は変えてください。

<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'>

$('.articleLinkArea').readerLeadMod_disp({

ModImg:'http://contents.pigg.ameba.jp/api/0/user/new-blue-777/image?part=all&direction=FR&shadow=false&scale=264&action=glad',

ModCnt_dt1:'リアナ',

ModBtn:'http://blog.ameba.jp/readermessage.do?bnm='

});

</script>

●　ＣＳＳ部分の例（通常は不要です）

.readerLeadModInner{/* 読者になろう 全体 */

background-color:#ffffff;

}

.readerLeadMod{/* 読者になろう 全体(枠) */

border:1px solid #F0F0F0;

}

.readerLeadModCnt dt{/* ●●さんの読者になろう */

color:#000000;/* 文字色 */

}

/* ブログの更新情報が受け取れて、アクセスが簡単になります */

.readerLeadModCnt dd p{

color:#000000;/* 文字色 */

font-family:"hiragino kaku gothic pro",meiryo,"ms pgothic","arial",sans-serif;

}

.readerLeadModRegistBtn a i{/* 読者になる */

background-image:url("http://stat100.ameba.jp/blog/img/user/ico_readerLead.1.000.png") !important;

}

.readerLeadModRegistBtn a{/* 読者になる */

background-color:#ffffff !important;

color:#000000 !important;/* 文字色 */

border:1px solid #CCCCCC !important;

}

■　オフィシャルブログの状態を見ると【●●さんの読者になろう】の部分が
　　表示されていない不具合が見られるので、その様な場合は下記を
　　ＣＳＳの一番下に追加してください。(CSSの要素重複のため表示されない）

.readerLeadModCnt dt{/* ●●さんの読者になろう */

color:#666666;/* 文字色 */

}

●　ソースコード

// 【読者になろう】の表示 

$.fn.extend({

 readerLeadMod_disp:function(Mod_disp_o){

  var d_ModImg    ='http://stat.profile.ameba.jp/profile_images/common/default.gif';

  var d_ModImg_w  =60;

  var d_ModImg_h  =60;

  var d_ModCnt_dt1='●●';

  var d_ModCnt_dt2='さんの読者になろう';

  var d_ModCnt_dd ='ブログの更新情報が受け取れて、アクセスが簡単になります';

  var d_ModBtn    ='読者になる';

  var d_ModURL    ='http://blog.ameba.jp/reader.do?bnm=';

  var ModImg      = Mod_disp_o.ModImg     || d_ModImg;

  var ModImg_w    = Mod_disp_o.ModImg_w   || d_ModImg_w;

  var ModImg_h    = Mod_disp_o.ModImg_h   || d_ModImg_h;

  var ModCnt_dt1  = Mod_disp_o.ModCnt_dt1 || d_ModCnt_dt1;

  var ModCnt_dt2  = Mod_disp_o.ModCnt_dt2 || d_ModCnt_dt2;

  var ModCnt_dd   = Mod_disp_o.ModCnt_dd  || d_ModCnt_dd;

  var ModBtn      = Mod_disp_o.ModBtn     || d_ModBtn;

  var ModURL      = Mod_disp_o.ModURL     || d_ModURL;

  $(this).each(function(){

   $(this).after('<div class="readerLeadMod"><div class="readerLeadModInner">'+

    '<div id="readerLeadModImg"><img width="'+ModImg_w+'" height="'+ModImg_h+'" src="'+ModImg+

    '" alt=""></div><div class="readerLeadModCnt"><dl><dt>'+ModCnt_dt1+ModCnt_dt2+'</dt>'+

    '<dd><p>'+ModCnt_dd+'</p></dd>'+'<dd class="readerLeadModRegistBtn"><a rel="nofollow" href="'+

   ModURL+ameba_id_get()+'">'+ModBtn+'<i></i></a></dd></dl></div></div></div>');

  });

 }

});