LinkWithinは手軽にブログの関連記事が表示できるのでオススメ！

My desk with the Link Photo by tychay

私のブログ記事の最後に、関連する記事が表示されているのはご存知でしょうか？

実はこれ、「LinkWithin」という関連記事を簡単に表示するブログパーツ（ウィジェットといいます）を使っているんです。

関連記事を表示するウィジェットにはこれ以外にもあるのですが、「LinkWithin」は、設置が簡単で、表示が軽快というところが気にいってます。

ということで、今回は「LinkWithin」を紹介していきます。ブログに関連記事を簡単に表示させたいあなたっ！是非試してみてくださいね^^

準備は簡単！

まずはこちらのサイトにアクセスします。

下記のスクショを参考にして必要事項を記入しましょう。ここでメールアドレスが必要になりますが、登録してもメールが送られてくることはありませんでした。

20140507231323

記入できたら「Get Widget」をクリックすると、ソースコードが表示されれます。

ブログへの設置も簡単！

ソースコードは以下スクショのような感じで表示されているので、ソースコード自体はテキストファイルなどにコピー＆ペーストして保存しておくと良いでしょう。

20140507231322

スクショのコメントにある通り、ソースコードはブログ設定の「デザイン」ー「記事下」の欄に貼付けるだけで、あっという間に関連記事が表示されるようになります。

ただ、いきなり本番環境で試すのが怖いというかたは、「テスト環境のススメ => はてなブログ」を参考にテスト用のブログを用意して試してみることをオススメします。

貼付け場所をスクショで示しておきますね。

20140507232559

簡単なカスタマイズを紹介

ソースコードを貼付けるだけでも十分使えるのですが、カスタマイズ出来る部分があるので、こちらも紹介しますね。

１．関連記事を表示する場所を変えたい

先ほどのソースコードはそのままで、記事内の表示したい場所に<div class="linkwithin_div"></div>というタグを追加すれば、その場所に関連記事を表示させることが出来ます。

記事下にシェアボタンや広告などを表示させていて、その表示順にこだわりたい場合は、このタグを使って表示場所を細かく指定することが出来ますね。

２．関連記事表示の見出しテキストを変えたい

記事下に貼付けたソースコードに<script>linkwithin_text='Your custom text:'</script>（「Your custom text:」は表示したい見出しテキストを入れます）を追加します。

20140508000530

もちろん日本語の見出しが使えるので、読み手にわかりやすい見出しを使うと良いですね。

１、２については、英語ですがLinkWithin - Frequently Asked Questionsに記載されています。

３．LinkWithinをスマフォでもちゃんと表示したい

ブログ設定の「デザイン」ー「記事下」のHTMLコードは「スマートフォン版にも表示する」にチェックが入っていれば、スマフォでもLinkWithinを表示させることができるのですが、LinkWithinの幅がスマフォ画面からはみ出るので、同じ記事下の欄に以下のコードを追加すると、回り込んではみ出ずに表示できるようになります。

<style>
.linkwithin_inner{
    width:100% !important;
}
</style>

設定すると、スマフォではこんな感じで表示されます。

20140508000529

あとがき

せっかく訪れてくれたかたも、一つの記事だけ読んだら帰ってしまうことが多いので、関連する別の記事も自動で表示されていれば、あわせて読んでもらえるかも知れませんよね。

手軽に導入できて軽快なLinkWithinは、とてもありがたいブログパーツです。まだ関連記事を表示するパーツを未導入なら、一度試してみては如何でしょう。

ちなみに、記事を書くスキルが高いかたのブログをみると、記事内に関連する記事をさりげなく埋め込むことができるようです。なかなか真似できませんが..^^;

tarのブログるっ

メガネ男子のtarが書くブログです。