よなかのはなし

http://www.hiroseyonaka.com/

はてなブログの記事下に使う関連記事プラグイン、結局どれが1番良いの?

f:id:hiroseyonaka:20170429164444j:plain

はてなブログでは記事下に関連記事を表示させる公式プラグインがないため、表示させたいときはカスタマイズが必要になります。今回は導入してみて感じた主要な関連記事表示プラグインのメリットとデメリットをご紹介。

1、Milliard関連記事プラグイン

f:id:hiroseyonaka:20160902202056p:plain

Milliard関連ページプラグインについて | シスウ株式会社

 

 PCとスマホでパネル・リスト表示を切り替えられるなどデザイン性が高いMilliard関連記事プラグイン。カスタマイズすればリスト表示を二列にして使うこともでき、導入も提供元サイトでコードを作るだけなのでとても簡単です。

ただ、使ってみるとやや不便な点もちらほら。

 

メリット

  • デザイン性に優れており、見た目がおしゃれ
  • PC表示の際、パネル表示にしておくと他記事への導線強化が期待できる

 デメリット

  • 記事のアイキャッチを変更してもMilliardのサムネイルに反映されない(※サムネイルの反映には提供元サーバのキャッシュ消去が必要らしく、変更のたび連絡しなければならないのも面倒)
  • サムネイルと同じく、記事自体を削除してもキャッシュの関係でずっと表示されてしまう
  • スマホでリスト表示にするとどの記事においても記事に全く関係ないカテゴリーの記事が表示される(バグ?)
  • 2~3秒ほどブログ全体の読み込み速度が遅くなる

 

①のサムネイル反映の件については以下の記事内に詳しく書いていますので、よろしければご覧ください。

 

 

2、同じカテゴリの記事を新着順に表示させる関連記事っぽいもの

f:id:hiroseyonaka:20170122213141j:plain

はてなブログで同じカテゴリの記事を新着順に表示して関連記事っぽいものを作るカスタマイズ

 

デザインがすっきりしていてとても好みだったので一時期導入していたのがこれ。ただGoogle Feed APIの終了に伴い、動作が不安定になってきたのをきっかけに取り外しました。

動作不良については、当ブログが使用しているテンプレートが原因かと思いコードをカスタマイズしてみましたが結局改善せず。記事によってカテゴリーを取得できたりできなかったり、記事が表示されたりされなかったりと常時不安定に。

 

メリット

  • リスト表示にしCSSで2列にカスタマイズすればとっても省スペース

 デメリット

  • Google API終了の影響で動作が不安定になり、高確率で記事の関連カテゴリーを取得できない

 

3、あわせて読みたいG

f:id:hiroseyonaka:20170122213248j:plain

あわせて読みたいG

 

ブログカードのようなデザインで関連記事を表示させてくれます。ただブログカードだとスマホで見たときにスクロールする手間が増えるのでユーザー的には不便かと思い、1週間ほど試験的に導入してみた結果外しました。

 

また、レスポンシブ未対応なのでヘッダーをカスタマイズしないとタブレット・スマホで見閲覧した時に右側のボタン一式がカラム落ちしてデザインが崩れます。この辺のカスタマイズが面倒だったのも導入を見送った原因の1つ。

 

メリット

  • カテゴリーと連動させた関連記事を表示できる

 デメリット

  • レスポンシブ非対応

 

 4、あわせて読みたい機能を追加するカスタマイズ

f:id:hiroseyonaka:20170122213445j:plain

はてなブログに「あわせて読みたい」機能を追加するAlso readをリリースしました

 

iframe埋め込み式のブログカード、リストの2種類からデザインを選べます。CSSでデザインカスタマイズも可能なのでかなりデザインをいじれるのが魅力。ブログカード風なら「あわせて読みたいG」と似た見た目ですね。遅延防止のコードが組み込まれているそうで、読み込み速度にも影響しないのは嬉しい限り。

 

ただ当ブログに実装したとき、リストの種類を「カテゴリー」にしても最新記事・人気記事の2つしか表示されなかったため導入見送り。他ブログでは正常に表示されていたので当ブログのテンプレなどが関係していたのかも……。

 

メリット

  • ブログカード風・リストと2種類のデザインが選択できる
  • ブログの読み込み速度に影響を与えない
  • レスポンシブ対応

 デメリット

  • ブログのテンプレートによっては正常に動作しないことがある

 

5、はてなブログの関連記事モジュールを記事下に移動させる

f:id:hiroseyonaka:20170122213548j:plain

はてなブログで記事下に関連記事を出すカンタンな方法

 

はてなブログのサイドバーには最新記事・関連記事を表示させる公式のモジュールが用意されています。これを記事下に移動させ、関連記事を表示させてしまうカスタマイズもあるようで、さっそく試してみました。

 

メリット

  • jQueryを使っていないため読み込み速度に影響しない
  • はてな公式のモジュールだけあって精度が良い
  • カスタマイズ次第ではサムネイル・2列表示も可能でスペースを有効に使える

 デメリット

  • 投稿日時が新しい順に表示され、ランダム表示はできない

 

最終的に当ブログが採用したのはこの方法

はてなブログに使える主要な関連記事プラグインを試してみましたが、私が最終的に一番良いと感じたのは「はてな公式関連記事モジュール+Milliardプラグイン」の組み合わせです。

 

レイアウトとしては、記事直下にはてなの公式関連記事モジュールを置き、Googleアドセンス広告を挟んでソーシャルボタンの上にMilliard関連記事プラグインが来る感じ。

 

f:id:hiroseyonaka:20160902210405p:plain

 

Milliard関連記事プラグインは読み込み速度への影響とサムネイル画像のキャッシュがネックですが、PC閲覧ならパネル、スマホ閲覧ならリスト設定にして今のところはこれが一番使い勝手が良いと感じました。

 本当ははてな公式がプラグインを用意してくれると嬉しいんですが、それまではこの組み合わせでいきたいと思います。