この記事では、はてなブログに独自のリコメンド(記事の末尾におすすめ記事の紹介を自動表示)を追加したい方向けに、設置の仕方を紹介します。
- 「関連記事」「あわせて読みたい」などのおすすめ記事の紹介について
- はてなブログにリコメンドを表示させる4つの方法
- 1:LinkWithin
- 2:Zenback
- 3:はてなダイアリー関連記事ジェネレーター
- 4:今回導入したウィジェット
「関連記事」「あわせて読みたい」などのおすすめ記事の紹介について
大手のブログやサイトを見ていると、記事の最後に必ず出てくる「この記事を読んでいる人は、こんな記事も読んでいます」という、リコメンド(おすすめ)が表示されます。
サイト内の他の記事も表示することで直帰率や離脱率を下げるためにあります。
Amazonでも同じように「これを買った人はこんな商品も見ています」と関連商品が表示されますよね。あれもリコメンドで、同時購入や購買意欲を上げるために出ています。
はてなブログにリコメンドを表示させる4つの方法
はてなブログで導入する方法はいくつかあります。
- LinkWithin
- Zenback
- はてなダイアリー関連記事ジェネレーター
- 今回導入したウィジェット
1:LinkWithin
こちらはWordPressやBloggerで使用している人がよくいますね。サムネイルの画像とタイトルが横に並ぶ表示方法です。ただ、これはそのまま使うとスマホで表示が崩れてしまうそうです。
ブログに「あわせて読みたい」を実装した - exfreeterのブログ
2:Zenback
はてなブログのユーザ様に朗報!Zenbackが管理画面でONにするだけで設置できるようになりました。 - Zenback ブログ
Zenbackは手軽で、他のブログともつながりができるのでアクセスも増えます。 その代わり、表示が重くなります。前にBloggerでやっているブログに導入していましたが重くなってはずしました。そんな経緯があるので私は使用していません。
3:はてなダイアリー関連記事ジェネレーター
このジェネレーターはシンプルで良さそうですね。4番目に書いた「あわせて読む」を導入した後に見つけたんですが、時間がある時にこっちに変更しようかと思っています。
4:今回導入したウィジェット
今回このブログにいれた「あわせて読みたい」はこちらの記事を参考にさせていただきました。 いじったのはタイトルまわりのCSSをこのブログに合わせて変えただけです。スマホにも対応していて、見やすい表示になっています。
実際にやってみたのがこんな感じです。この記事の下にも表示されています。 一応このサイト用に変更した後の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%;
}