自動で関連記事を表示し、精度も高いzenbackを導入してみた

Webサービス

このエントリーをはてなブックマークに追加　

普段こういったブログのレイアウトに関するエントリーはしない(デザイン知識がないので…)んですが、以前登録しておいたブログの関連記事を自動で表示してくれるzenbackというサービスが思ったよりも便利なので、このブログにも導入してみました。

今回は、はてなダイアリーの記事の下へ設置する方法とあわせて紹介してみます。

サービスの特徴

・はてなダイアリー正式対応(参照記事)
・記事内容から関連記事を自動で表示
・関連記事の精度が高い
・Twitter,はてなブックマーク,mixiにも対応
・デザインが良く、カスタマイズも可能
・iPhoneからの閲覧時には表示されない(PC版ならOK)

申し込み〜利用開始まで

現在、公式ページからサービスを申し込むと翌営業日中には利用可能とのことです。Twitter公式アカウントもあるので詳細はそちらで。

表示するサービスの選択


表示可能な項目は関連記事(自サイト内)、関連リンク、はてブ、Twitter、アクセス元、mixiチェックの6種類。関連リンクはzenbackに登録しているブログへのリンクだと思います。表示数は5,10,20,30から選択可能です。

設定方法


記事の下にzenbackを設置する場合、取得したスクリプトコードをはてなダイアリーの管理画面→デザイン→詳細タブ→ヘッダ/フッタ/スタイルシートの編集→ページのフッタ欄の一番上に貼りつけます。

尚、ヘッダやフッタへ設置する場合など、設置場所に関する詳細ははてなダイアリーガイド「ヘッダやフッタに何かを入れる」を参照して下さい。

スタイルシートで調整

ブログパーツのHTMLソースコードのid／class構造とcssについて - Zenbackブログ
デフォルトのままでも使えますが、少しだけカスタマイズ。まず、上記のサイトからデフォルトのCSSをコピーして、コードの設置方法と同じ管理画面にあるスタイルシートの欄に貼りつけます。

横幅の余白を変更


デフォルトだとサイドバーとの区切り線まで目一杯頑張ってくるので以下の記述を一行追加。

.zenback {

    font-size:13px;

    background:#ffffff;

    padding:12px 0;

    margin:0 15px 0 0;　←追記

    line-height:18px;

}

変更後はスペースができます。その他にも色々いじってみましたが、結局デフォルトのままでいいんじゃないかという結論です。

まとめ

これまでは手動で関連記事を貼りつけていたんですが、zenbackは設定も簡単で精度も高いような印象を持ちました。もちろん関連記事だけでなく、Twitterやはてブとの連携をブログに設定したいユーザーにもピッタリのサービスだと思います。

ただ関連記事がコメント・トラックバック欄の下に表示されたり、iPhoneからの閲覧時にはzenbackが表示されないので、しばらくの間は手動との併用でやってみようと思います。