AIUEO Lab2

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

はてなブログにレコメンド(おすすめ記事の自動表示)を追加する4つの方法

f:id:akiueos:20210910113453p:plain

この記事では、はてなブログに独自のリコメンド(記事の末尾におすすめ記事の紹介を自動表示)を追加したい方向けに、設置の仕方を紹介します。

「関連記事」「あわせて読みたい」などのおすすめ記事の紹介について

大手のブログやサイトを見ていると、記事の最後に必ず出てくる「この記事を読んでいる人は、こんな記事も読んでいます」という、リコメンド(おすすめ)が表示されます。

サイト内の他の記事も表示することで直帰率や離脱率を下げるためにあります。

Amazonでも同じように「これを買った人はこんな商品も見ています」と関連商品が表示されますよね。あれもリコメンドで、同時購入や購買意欲を上げるために出ています。

はてなブログにリコメンドを表示させる4つの方法

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

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

1:LinkWithin

LinkWithin - Related Posts with Thumbnails

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

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%;
}