読者です 読者をやめる 読者になる 読者になる

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

はてなブログ、スマホサイトにて8種類の関連記事表示を試してみた

はてなブログ はてなブログ-カスタマイズ

f:id:kminebg1110:20161029140236j:plain

先日の記事「複眼RSS、新着・過去記事のリンク作成なら簡単・速い・綺麗なおすすめプラグイン」に記載のとおり、関連記事プラグインであるMilliardから複眼RSSへ変更しました。この複眼RSSを選択するまでに、複数の関連記事の表示を試してみましたので、それぞれのメリット・デメリット(個人作成のものを除く)を添えてレポートします。

なお、メリット・デメリットは、私のはてなブログでの設定・環境によるもので、一般的には当てはまらないものもあるかと思います。

 

※記事中の画像は全てスマホサイトのものです。

 

はてなブログでの関連記事表示

WordPressでは複数の関連記事プラグインがあり、また「はてなブログ」のパソコンサイトではデフォルトの「関連記事」があるからよいものの、みなさん苦労されているのがスマホサイトでの関連記事かと思います。

Milliard関連記事などの「はてなブログ」以外にも使用できる汎用のものから、はてなブログメンバー作成のものまで、様々な種類があります。このうち、スマホサイトでの使用にて、以下を目的とし試してみました。

 

  • Adsense他の広告表示・視聴可能率に影響を与えないコンパクトなもの、かつ表示の速いもの。

 

▼そもそも関連記事の表示を変更しようと思った原因は、Adsense単価の下落・アクティブビュー視聴可能率の低下。


 

スポンサーリンク

 

 

複眼RSS

現在使用中の「複眼RSS」。関連記事表示ではなく、新着記事あるいは過去記事をランダムに表示するもの。


f:id:kminebg1110:20161026124641j:image

 

メリット
  • 初めての方でも、所要時間10分の簡単設定。
  • 設定項目が多数あり、カスタマイズしたい方にも最適。
  • 表示スピードは速く、記事内の画像使用により記事との統一感あり。
  • 無料ですが広告は控えめ、広告削除もできます。
  • パソコンサイトのタイトル下に新着記事、スマホサイトの記事下にランダムな過去記事など、用途に幅があります。
 
 デメリット
  • 関連記事表示ではなく、新着記事あるいは過去記事をランダムに表示するもの。
 

 

▼複眼RSS、公式サイト

複眼RSS - アクセスを増やす方法

 

Milliard関連記事ページプラグイン

使用期間は約11ヶ月と、私のブログ歴(16ヶ月)では最長。

f:id:kminebg1110:20161026124658j:image

 

 メリット
  • はてなブログにて、疑似的に親カテゴリー・子カテゴリーを設定している場合、子カテゴリーの関連記事を抽出できる。下記のデメリットもあり、アクセスが増えたかどうかというと疑問ですが、この子カテゴリーの関連記事表示は優れもの。
  • ある程度のカスタマイズが可能。
  • はてなブログ、FC2、WordPressなど、多くのブログサービスで利用できる。

 

デメリット

以下のため、私は使用を止めました。

  • 表示スピードが遅い
  • 遅いのみならず、表示されないケースも多々あり。

 


▼Milliard関連ページプラグイン、公式

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

 

あわせて読みたいG

「はてなブログ」では多くの方が利用している、池田仮名さんの「あわせて読みたいG」です。ありがたく使用させていただきましたが、一時的に「Google Feed APIの停止」となった時期に、Milliard関連記事プラグインへと変更しました。

 

▼デザイン変更画面でのスクショのため、表示が小さめになっていますが、実装ではもちろん問題ありません。

f:id:kminebg1110:20161029123549j:plain

 

メリット
  • ブログカードでの表示であり、他のリンクとのデザインの統一感が抜群。
  • カテゴリーの選択画面もあり、利便性に優れる。

 

デメリットらしいものは特になく、また、私が語るべきものでもないため割愛です。

 


▼あわせて読みたいG

『あわせて読みたいG』からGoogle Feed APIを除去して復旧しました - 太陽がまぶしかったから

 

ゆきひーさん作成の関連記事表示

Milliardブラグインから最初の変更先として、短期間 実装していました。

はてなブログでは著名な方が作成され、デメリットなどなく、また、私が語るべきものでもないのでが、なぜか私の設定では表示されたり、されなかったりの状況となり、外しました。関連したカスタマイズは、ゆきひーさんサイトに複数あり、是非導入したかったのですが残念。

 

f:id:kminebg1110:20161026124718j:image

 

▼ゆきひーさんの記事

はてなブログで同じカテゴリの記事をランダム順に表示して関連記事っぽいものを作るカスタマイズ - Yukihy Life

 

LinkWithin

関連記事ではなく、新着記事を表示するものです。こちらも短期間、使用しました。

コンパクトさ・表示の速さが特徴であり、今でも「複眼RSS」と迷っています。


f:id:kminebg1110:20161026124739j:image

 

メリット
  • 設定は簡単。5分程度で完了です。
  • 表示が速い。
  • コンパクトなため、スマホサイトで縦に長くなるのがイヤな方にはよいかも。

 

デメリット
  • 関連記事の表示ではなく、新着記事の表示です。
  • カスタマイズ・設定できる項目が少ない。

 

▼LinkWithinサイト(海外サイトです)

LinkWithin - Related Posts with Thumbnails

 

設定は以下のとおりの簡単設定です。

 

▼Emailアドレスと、ブログURLを入力。Emailアドレスを入力しても連絡があることはありません。Platformは「はてなブログ」の場合は、”Other"を選択。

f:id:kminebg1110:20161027212704j:plain

 

▼表示したい記事数を選択します。

f:id:kminebg1110:20161027212715p:plain

 

zenback

 表示自体は綺麗なのですが、自分の記事と関係のない「お知らせ」が表示されること、関連する記事について「表示されるまで数分~最大で数日ほどかかる」とあり、実装せずに終わり。

 

▼ブログのデザインの変更で試すのみで終わったzenback

f:id:kminebg1110:20161027220258j:plain

 

はてなブログ・パソコンサイト公式を応用

スマホサイトをレスポンシブデザインにしている方は設定可能です。

私は「はてなブログ」のデフォルトのテーマを使用しているために、設定不可。

以下のとおり、非公開のテストブログにて試してみました。「はてなブログ」のレスポンシブデザインを利用している方は、最初に試してみるべきかと思います。

 

f:id:kminebg1110:20161029102244j:plain

 

▼導入方法は、私が利用している「はてなブログのテーマ」の作成者さんの記事を参照ください。パソコンサイトでの説明ですが、レスポンシブデザインを利用しているスマホサイトにも利用できます。

【コピペで簡単】はてなブログ公式の関連記事モジュールを記事下に表示させる方法。 - DREAMARK

 

▼▲「はてなブログ Perfect GuideBook」の著者の方の記事です。

 

メリット
  • 「はてなブログ」公式を利用しているため、安心感・デザインの統一感あり。
  • 表示スピードは速いような気がします(余計なものを導入していないテストサイトでの確認のため、速く感じているかもしれません)。

 

デメリット
  • 「はてなブログ」公式を利用しているため、カスタマイズするには敷居が高いことでしょうか。

 

Also read

現在使用の「複眼RSS」、迷っている「LinkWithin」が関連記事ではなく過去記事のランダム表示のため、関連記事リンクがないものとなっています。

このため関連記事リンク表示用に、シンプルなテキストリンクを実装できるものを探し求め、実装を検討・CSSカスタマイズ中なのが、「すなばいじり」さんの「Also read」です。

 

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

 

▼テスト用ブログでの検証のため、飾り気はなくしています。また、デフォルトでは画像表示ですが、あえてテキストリンクにしています。フォントを整えたのち、実装予定。

f:id:kminebg1110:20161029130128p:plain

その他の方法

まだ試していないのですが、「はてなブログ 関連記事」にて検索し「これは!」と感じた関連記事表示の記事へのリンクです。

 

▼関連記事のURLを手動で組み込む必要がありそうですが、オススメ記事を自分で選出する場合には良いかも。

【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2 - NO TITLE

 

▼CSSを弄ることによりデザインが変更できそうなので、いづれ試してみたい

やっと完成!はてなブログの記事下にサムネイル付きの関連記事をランダムに出す方法(2015 11/5,11/19,12/8追記) - 平日WEB系SE 週末時々自転車屋

 

まとめ

今回試してみた関連記事の種類については、「はてなブログで記事下に関連記事を表示する9つの方法 | やぎろぐ」を参照させていただきました。

関連記事表示の目的・好みは人それぞれ。私の場合、関連記事より上にあるAdsense広告のアクティブビュー視聴可能率が低いことから推察するに、スマホサイトでは「関連記事リンク」までたどり着いている方は少ないようです。

ならばと思い、あまりスペースをとらないコンパクト・シンプルなものを探し求め、スマホサイトでは「複眼RSS」または「LinkWitin」、プラス「Also read」などのテキストリンクできるものに、たどり着きつつあります。ご参考まで。