AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

はてなブログにレコメンド(あわせて読みたい)をつけてみた

photo by JoyHey

「関連記事」「あわせて読みたい」というアレ

大手のブログやサイトを見ていると、記事の最後によく出てきますね。サイト内の他の記事も表示することで直帰率や離脱率を下げるためにあります。Amazonで買い物をする時に出る、「これを買った人はこんな商品も見ています」って表示と同じです。

はてなブログにも導入できる

はてなブログで導入する方法はいくつかあります。

  1. LinkWithin
  2. Zenback
  3. はてなダイアリー関連記事ジェネレーター
  4. 今回導入したウィジェット

1:LinkWithin

LinkWithin - Related Posts with Thumbnails

こちらはWordPressBloggerで使用している人がよくいますね。サムネイルの画像とタイトルが横に並ぶ表示方法です。ただ、これはそのまま使うとスマホで表示が崩れてしまうそうです。

LinkWithinには1つ問題がありまして。 ご存知の方も多いと思いますが、スマホで表示すると画面が横スクロールしてしまうんですよね...。
ブログに「あわせて読みたい」を実装した - exfreeterのブログ

2:Zenback

はてなブログのユーザ様に朗報!Zenbackが管理画面でONにするだけで設置できるようになりました。 - Zenback ブログ

Zenbackは手軽で、他のブログともつながりができるのでアクセスも増えます。 その代わり、表示が重くなります。前にBloggerでやっているブログに導入していましたが重くなってはずしました。そんな経緯があるので私は使用していません。

3:はてなダイアリー関連記事ジェネレーター

はてなブログ関連記事ジェネレータで最新記事を取得する機能を追加しました。 - 大人になったら肺呼吸

このジェネレーターはシンプルで良さそうですね。4番目に書いた「あわせて読む」を導入した後に見つけたんですが、時間がある時にこっちに変更しようかと思っています。

4:今回導入したウィジェット

ブログに「あわせて読みたい」を実装した - exfreeterのブログ

今回このブログにいれた「あわせて読みたい」はこちらの記事を参考にさせていただきました。 いじったのはタイトルまわりのCSSをこのブログに合わせて変えただけです。スマホにも対応していて、見やすい表示になっています。

f:id:akiueos:20140307170110j:plain

実際にやってみたのがこんな感じです。この記事の下にも表示されています。 一応このサイト用に変更した後のcssだけ載せておきます。

/* あわせて読みたい */
#new-entries-title {
    color: #333;
    font-size: 160%;
    font-weight: bold;
    margin: 20px 0 15px 0;
    padding:10px 0 0 15px;
    height: 30px;
    border-left: solid 8px #333;
    border-bottom: dotted 1px #333;
}
.intro-article-wrapper a {
text-decoration: none;
color: #0085cd;
font-weight: bold;
font-size: 120%;
}