linkwithin導入の小技(センタリングなど)

アメブロでも導入されている方が既に多数いらっしゃる「linkwithin」。
このウィジェット(ブログパーツ)は、関連するエントリーをサムネイル付きで表示してくれるというなんともありがたいサービスです。
登録から使用のプロセスも驚くほど簡単ですので、初心者でもすぐに利用出来ると思います。

当ブログでも(そのうち外す予定ですが)利用させていただいてますが、中央配置をする方法などのご質問がありましたので、今回はそういった小技をご紹介しようと思います。

FAQを読んで悩み解決！？

まずは「よくある質問」いわゆるFAQを読むのが基本です。
というわけで、用意されているFAQを早速日本語に直してみます。

Q…動作しません
A…サポートページからメールを送ってください。大体3日以内に回答できるよう頑張ります。

Q…表示される記事はどのように選ばれますか？
A…タグやタイトル、記事の内容などの数種類の要素を基にしています。

Q…たまにサムネイルの代わりにテキストリンクが表示されます。なぜですか？
A…画像の無い記事が多く選ばれた場合テキストリンクになります。

Q…表示させる位置はどうすればカスタマイズできますか？
A…表示させたい場所に<div class="linkwithin_div"></div>と書いてください。

Q…ウィジェット上部のテキストはどうすればカスタマイズできますか？
A…表示させたいページ上(アメブロならフリープラグイン)にHTMLで<script>linkwithin_text='好きな文章';</script>と書いてください。

Q…ウィジェット内に広告は表示されますか？どうやって収入を得ていますか？
A…収益を共有するような仕組みを将来的に考えていますが、今のところはありませんし、あくまでもオプションにする予定でいます。

Q…数個のブログを持っているのですが、それぞれにウィジェットを使うにはどのようにしますか？
A…それぞれのブログに対してそれぞれ最初から使用申請してください。それぞれにユニークなIDを発行しなくてはうまく動作しません。

以上、FAQを日本語に直してみました。
これでちょっとした問題は解決できるかと思います。

それではこれを踏まえて、ここからは本題の「ボク的小技」をご紹介したいと思います。

小技その1…センタリング

よく質問を受けるのが、センタリングの方法です。
これはごく普通にCSSでやっちゃいます。

#lws_0{
padding:0 35px;/*この35pxの部分を微調整していい感じにしてください*/
}

これだけでOKですよ！
簡単ですので、サクっとやっちゃいましょう！

小技その2…アドセンスと記事フッターの間に表示

↑こんな感じですね。
これはプラグインにスクリプトを書きます。

jQuery(function(){if(jQuery(".entry").length){jQuery(".entry .foot").eq(0).before('<div class="linkwithin_div"></div>');
jQuery.getScript("http://www.linkwithin.com/widget.js");
}
});

そして、以下のコードを消します。

<script src="http://www.linkwithin.com/widget.js"></script>

これでできるはずです！

小技その3…上部テキストを画像に変える

ウチでいうところの「オススメエントリー」の部分ですね。
プラグインにこのように書きます。

<script type="text/javascript">
linkwithin_text='<img src="画像URL" alt=""/>'
</script>

これでOKです。
要するに、FAQの下から3番目を利用して、テキスト部分にimgタグをいれてやっただけなんですよね。手抜きです。

と、いうわけで、FAQの翻訳と小技を３つほどご紹介しました。
お役に立てましたでしょうか？

超便利だけど不満な点も無いではないlinkwithinですが、せっかくの素晴らしい機能をフル活用していきましょう～。