こんにちは。
『やさしいブログの作り方』の松田です。
アメブロの記事の最後には関連する記事のリストを表示させることができますが、これと同じような機能を持つブログパーツにLinkWithinというのがあります。
§ LinkWithin - Related Posts with Thumbnails
LinkWithinは、自身のブログ内の記事を巡回して関連記事を自動的に表示してくれるブログパーツです。
アメブロに用意されている関連記事表示機能と異なるところは、属しているテーマに関係なくランダムに過去記事のリンク先を表示してくれるという点です。
英語のサイトですが、登録は簡単です。
● Emailには自分のメールアドレス
● Blog Linkには自分のブログのアドレス
● Platformは「other」を選択
● Widthにはリンク先の表示数(3~5)を選択
を入力すればフリープラグインに貼りつける以下のようなタグが表示されます。
<script>
var linkwithin_site_id = *******;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
var linkwithin_site_id = *******;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
※ ******* には各自のID番号が入ります。
取付後すぐには情報が不足しているのでうまく表示されませんが、しばらくするとブログ内の記事をプログラムが巡回してリンク先を表示してくれるようになります。
━━━ さて、このLinkwithinは、フリープラグインに貼りつけるパーツですが、カスタマイズすることで各記事の最後に自動挿入することができます。
記事下に自動挿入されるようにするには以下のような記述をフリープラグインに記述します。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>
<script type="text/javascript">
$(function() {
$("div.articleText").after('<div align ="center" class="linkwithin_div"></div>');
});
</script>
<script type="text/javascript">
linkwithin_text='他にもこんな記事が読まれています'
</script>
<script>
var linkwithin_site_id = *******;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>
<script type="text/javascript">
$(function() {
$("div.articleText").after('<div align ="center" class="linkwithin_div"></div>');
});
</script>
<script type="text/javascript">
linkwithin_text='他にもこんな記事が読まれています'
</script>
<script>
var linkwithin_site_id = *******;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
※ 「他にもこんな記事が読まれています」の部分は見出しになりますので自分の好きな表現に変えることができます。
関連記事の表示件数が多いと記事エリアの横幅からはみ出す場合がありますので、その際は表示件数を減らしてください。
上記カスタマイズは新デザインスキン用になります。