【この記事を読むのに必要な時間は約 3 分です。】
現在、外部連携ブログパーツとして「Zenback」を利用しているが、加えて、自分のブログの関連記事をサムネイル画像付きで表示してくれるブログパーツ「LinkWithin」を導入してみた。
どのプラットフォームを採用するかで利用方法に違いがあるようだが、今回はWordPressで説明する。
ウィジェット（プラグイン）の取得
「LinkWithin」のサイトへアクセスして、右側の各欄に必要事項を記入して「GetWidget!」をクリックする。
するとWordPressの場合、プラグインとして追加されているので、プラグインから「LinkWithin」を選択して有効化する。
E-mailアドレスを記入する。
Blog Link
「LinkWithin」ブログパーツを利用するサイトURLを記入する。
Platform
利用するサイトのプラットフォームを「Blogger」「WordPress(self-hosted)」「TypePad」「Other」の4種類の中から選択する。今回は、「WordPress(self-hosted)」。
Width
表示するカラム数を3～5storiesの間で選択する。
1記事の大きさは119px×177pxなので、幅は357～595pxになる。
カラム数を変更したい場合は、再度、「LinkWithin」にアクセスして、所定事項を記入、カラム数を変更した上で、「GetWidget!」をクリックする必要がある。
カスタマイズ
デフォルトの表題「You might also like」を好きな文字に変更できる。
また、設置場所とスタイルをカスタマイズすることが出来る。
設置場所
以下のコードを例えばsingle.phpなどの任意の場所に挿入すれば良い。
<div class="linkwithin_div"></div>
表題の変更
以下のスクリプトの「Your custom text」の部分を好きな文字に変更したうえで上記コードに続けて記載すると良い。
<script>linkwithin_text='Your custom text:'</script>
スタイル
<div>タグに「linkwithin_div」というクラスが設定されているので、スタイルシートで編集すると良い。
ちなみに私はsingle.phpに挿入し、style.cssに以下のように書き足している。
single.phpは以下のとおり。
<?php get_template_part('loop', 'single'); ?>
この部分の下に挿入。
<!-- Linkwithin -->
<div class="linkwithin_div"></div>
<script>linkwithin_text='当ブログの関連記事一覧:'</script>
<!-- /Linkwithin -->
style.cssは以下のとおり。
/* =Link within
-------------------------------------------------------------- */
.linkwithin_div{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
font-size: 1.2em;
color: #4169e1;
}
WordPressの場合は、これで終了である。他のプラットフォームは利用方法が若干違うので注意して欲しい。以上
