関連ページの表示は「絶対」。
これまで本ブログでは、本文終わりの関連記事表示に「Yet Another Related Posts Plugin(YARPP)」プラグインを使っていた。
PCだとタイトルが切れて表示される状態だったし、デザインをミスって6つしか記事を出せてないからずっと改善したかった。けどなにもしないまま現在に至る。
そんなところに現れたのが『Milliard関連ページプラグイン』。
試しに使ってみたら、使い勝手が良い素晴らしすぎるプラグインだったので、正式に導入することに決定。
PCもスマホもリスト表示にした
導入に関しては、WordPress管理画面のプラグイン追加から「by Milliard」で検索して表示されたプラグインをインストールすれば終わり。
初期の時点では表示場所[フッターの下]にチェックが入っているので外す。これにチェックをしてると勝手にプラグインが本文事終わりに関連記事を表示してしまう。
挿入したい箇所に該当するブログのソースコードに以下のタグを入力することで、自分が表示させたい場所に関連記事を表示され、フッターの表示が消える。
<ins id="ssRelatedPageBase"></ins>
僕の場合、PCだと左右に余白がなく表示されてしまったので、divタグを付けてCSSで表示位置を調節した。
↓div
<div class="ssRelated"><ins id="ssRelatedPageBase"></ins></div>
↓CSS
.ssRelated { padding:0 20px; }
そうすることでいい感じにリスト表示されるようになった。
表示に関して、なんでリストを選択したかというと、僕が訪問者だったらリストの方が目にするから。パネルは確かにカッコよくてスクロールできるのは新鮮だけど、スクロールして見るかというと多分見ない。その辺は効果測定してみようかなー。
以下はiPhoneでの表示。ちょーいい感じ。こっちは何も直しなし。コード変えずにここまでキレイでいい感じに表示してくれるなんて素敵すぎるでしょ。
スマホ側は「こんな記事も書いてます」の文字色と大きさを他の見出しと同じにするために以下のCSSを反映させている。
.ssLimitedContainerHeader > div > div { font-size: 1.25em; color: #464445; }
指定した記事数分表示してくれるのが助かる
特に素晴らしいのが、YARPPと違って、関連記事順に並べる設定でも表示数分の記事を表示してくれる点。
どんなアルゴリズムなのか見てないけど、きちんと関連度が強い順番に記事が表示されている。
YARPPは関連度が低かったら10記事表示する設定にしてても1記事も出ないことがある。記事ページのUIを考えやすくて嬉しい。
読み込みの負荷軽減を考えられてるから表示時間が改善されそう
他にもこれいいなーと思うのが表示方法。YARPPだと記事の表示と同時に読み込みが走るので、記事の表示速度に影響がある。でもMilliardは記事の読み込みの後に読み込む非同期処理になっているので、記事の表示速度が上がる。
本文の表示が遅くならない?
ある程度スクロールしないとロードされない仕組みになっているため、記事が重くなる事はありません。スクロールが重くならない?
画像を3件づつ読み込み、細かく描画しているため影響はほとんどありません。
ページ読み込み速度が上がることによって、ブログに来た人の離脱率が減るなどいいことづくめなので、これは嬉しい。
クレジットの設定ができたらいいのに
機能面は最高なんだけど、惜しいのが1点。クレジット表記に関してなんだけど、文字の大きさを変えられるようにして欲しい。
さすがにクレジット表記を消せなくてもいいけど(有料で消せる感じにするのかな)、フォントが14px指定になってるので、iPhoneだと他の文章よりも大きく表示されてしまって統一感がない。
カスタマイズすればできないこともないけど、公式で対応できたら嬉しい、
とはいえ、とてもいいプラグインなので使わない手はない。直帰率が減ったら嬉しい。