PCインストラクターの川上です。
今日から、2013年の第4四半期がスタートしましたね！
そう、今年も残り3ヶ月を切った･･･ということになります^^;
年末に向けて、今から色々と準備しないと･･･、ですね。
今日はそういうこともあって
（ん？どういうことって？あまり気にしないでください^^）
アメブロでブログ運営されている方で、コメントの多い人はぜひカスタマイズしてほしいテクニックの一つを記事にします。
それは･･･
記事やコメントを読んだ後に読者登録することができる『読者になる』リンクを設置することです。
実は、私もこのように↓やってます（笑）
この↑ように、毎記事下に『読者になる』を見せるには
この２つでバッチリです！
どうバッチリか･･･、それではレッスンいきますね！
１．フリープラグインにスクリプトを追加する
１．フリープラグインにスクリプトを追加する
のスクリプトは次↓のとおりです。
（ちなみに･･･、スクリプトとは、ソースコードを記述したら即座に実行できるようなプログラムのことをいいます。ですので、コードだったり、ソースと書かれている場合もあります。）
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script >
<!--記事下に『読者になる』-->
<script type="text/javascript">
$(function(){
$(".skinArticle").after('<div class="readerunder"><a href=" http://blog.ameba.jp/reader.do?bnm=アメブロのID">このブログの読者になる</a></div>');
}
);
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script >
<!--記事下に『読者になる』-->
<script type="text/javascript">
$(function(){
$(".skinArticle").after('<div class="readerunder"><a href=" http://blog.ameba.jp/reader.do?bnm=アメブロのID">このブログの読者になる</a></div>');
}
);
</script>
上↑のスクリプトをフリープラグインにコピー＆ペーストします。
その際、
<!-- jQuery -->の部分は、すでにフリープラグインに書かれている場合は入れなくてOKです。
コピー＆ペーストした後は、
「アメブロのID」に自分のアメブロIDを入力してください。
例えば、URLがhttp://ameblo.jp/abcde/ ならば アカウントは abcde になります。
できたら、［保存］ボタンを押します。
すると、この段階では、まだリンク文字しか表示されません。
２．CSSでデザインを整える
次に
２．CSSでデザインを整える
ですね。
CSS編集ページに次のCSSを追加します。
（文字の大きさ、背景のカラー、線の種類やカラーなど）
/* 記事下へ『読者になる』を追加 */
.readerunder{
border:#CCCCCC 2px solid; /* 枠の色 太さ 種類 */
background-color:#FF99FF; /* 背景の色 */
text-align: center;/* 文字の配置 */
padding:10px;
margin:15px 0 30px 0;/* 上 右 下 左 */
}
.readerunder a{
color:#0000FF; /* リンク文字の色 */
text-decoration:underline; /* リンクの下線 */
font-size:14px; /* リンク文字の大きさ */
font-weight:bold; /* リンク文字の太さ */
}
.readerunder{
border:#CCCCCC 2px solid; /* 枠の色 太さ 種類 */
background-color:#FF99FF; /* 背景の色 */
text-align: center;/* 文字の配置 */
padding:10px;
margin:15px 0 30px 0;/* 上 右 下 左 */
}
.readerunder a{
color:#0000FF; /* リンク文字の色 */
text-decoration:underline; /* リンクの下線 */
font-size:14px; /* リンク文字の大きさ */
font-weight:bold; /* リンク文字の太さ */
}
上↑のコードをCSS編集の一番下にコピー＆ペーストします。
そして、自分で好きな色などに変更してあげます。
できたら、一番下の［保存］ボタンを押してあげます。
すると、このように↓記事下に『読者になる』リンクが挿入されます。
記事を読んだ後が一番読者登録されやすいと思われますので、読者の方を増やしたい方は記事下に設置してみてはいかがでしょうか？
以上、アメブロカスタマイズでした。
LIDS澄川・ライフデザインスクール
川上 雄大