記事の下に「読者になる」ボタンをいれて読者を増やす


内藤です

アメブロの芸能人ブログの記事下には、「読者になる」ボタンが顔つきで表示されています



記事下にあることでクリックしてもらいやすいですが、顔写真を載せることでさらに読者登録を促すこともできますね。

1.まずは使用する顔写真のURLを取得

アメブロの管理画面の左上にあるプロフィール写真から、画像URLを取得します。


画像の上で右クリック ⇒ 画像URLをコピー


2.フリープラグイン用コード

こちらの「コピーした画像URL」の部分に、先ほどコピーした画像URLを貼り付けます。また、「アメブロID」の部分に自分のアメブロIDを代入します。 http://ameblo.jp/inakadenetlifeならば、inakadenetlife。

<!– jQuery –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
var page_url = location.href;
var entries=$(".skinArticleHeader h1 a");
for(i=0;i<entries.length;i++){
var url=entries[i];
title = entries.eq(i).text();
$(".articleText").eq(i).append(‘<div class="readerLeadModOuter"><div class="readerLeadMod"><div class="readerLeadModInner"><div id="readerLeadModImg"><img width="60" height="60" alt="" src="コピーした画像URL"></div><div class="readerLeadModCnt"><dl><dt>読者になろう</dt><dd><p>ブログの更新情報が受け取れて、アクセスが簡単になります</p></dd><dd class="readerLeadModRegistBtn"><a href="http://blog.ameba.jp/reader.do?bnm=アメブロID" rel="nofollow">読者になる<i></i></a></dd></dl></div></div></div></div>’);
}});
</script >

コピーした時に ‘ や ” が全角になっている場合は半角に直してください

※JQueryに関する記述がある場合は、こちらは不要

<!– jQuery –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

コード全体をコピーし、フリープラグインに貼り付けます。

3.フリープラグインを使用する機能に移動

フリープラグインを既に使用している場合は、この作業は不要になります。

サイドバーの配置設定から、フリープラグインを使用しない機能から、使用する機能へ移動させます。

CSSで表示設定

これだけだと表示はされるものの、体裁ががたがたですので、CSSで表示を調整します。

以下をコピーし、「CSSの編集」でCSSの一番最後に追加します。
※「CSS編集用デザイン」を利用している必要があります

/*記事下読者*/
.readerLeadModOuter {
text-align: center;
}

.readerLeadMod {
margin: 20px auto;
width: 380px;
border: 1px solid #f0f0f0;
text-align: left;
overflow: hidden;
background-color: #fff;
}

.readerLeadMod .readerLeadModInner {
padding: 10px;
}

.readerLeadMod #readerLeadModImg {
float: left;
width: 60px;
height: 60px;
}

.readerLeadMod #readerLeadModImg img {
margin: 0;
padding: 0;
}

.readerLeadMod .readerLeadModCnt {
margin: 0;
padding: 0;
margin-left: 68px;
position: relative;
min-height: 60px;
height: auto !important;
height: 60px;
}

.readerLeadMod .readerLeadModCnt dl {
margin: 0;
padding: 0;
padding-bottom: 27px;
}

.readerLeadMod .readerLeadModCnt dl dt {
margin: 0;
padding: 0;
margin-bottom: 5px;
line-height: 1.2;
}

.readerLeadMod .readerLeadModCnt dl dd {
margin: 0;
padding: 0;
color: #999;
font-size: 10px !important;
font-family: “hiragino kaku gothic pro”,meiryo,”ms pgothic”,”arial”,sans-serif;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn {
height: 24px;
margin: 0;
position: absolute;
bottom: 0;
left: 0;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a {
font-size: 11px !important;
padding: 0 12px 0 31px;
display: inline-block;
border-radius: 2px;
color: #666;
text-align: center;
text-decoration: none;
line-height: 22px;
height: 22px;
overflow: hidden;
border: 1px solid #ccc;
background-color: #fbfbfb;
border-radius: 2px;
background-position: 0 0;
cursor: pointer;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a:hover {
background-color: #f0f0f0;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a i {
position: absolute;
top: 6px;
left: 12px;
display: block;
width: 14px;
height: 11px;
background-image: url(“http://stat100.ameba.jp/blog/img/user/ico_readerLead.1.000.png”);
background-repeat: no-repeat;
}



7

確認

これで記事の下に挿入されるようになります。
※ただし、パソコンで見たときのみになります。



試してみてくださいね