(O+P)ut

ITエンジニアのアウトプット録



(O+P)ut


【はてなブログ】関連記事を2列にして表示する

はてなブログの関連記事BeforeAfter

CSSコード

以下のコードで2列で4記事が関連記事として表示されます

.related-entries{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.related-entries-item{
  width: 48%;
  border:1px solid #e0e0e0;
  border-radius:2px;
  margin: 0 0 1em 0;
  padding: 1em;
}
.related-entries-item:nth-of-type(5){
  display: none;
}
.related-entries-entry-body{
  display: none;
}

Before

PC版

f:id:mtiit:20190209220855p:plain

After

PC版

f:id:mtiit:20190209223917p:plain

スマホ


以下、背景と補足です。



背景/補足

もともとはてなブログの関連記事は、サイドバーにあるメニューの一つの関連記事を利用していました。
一方、あのメニューでの関連記事は「最初に設定してあるカテゴリ情報」を元に関連記事をピックアップします。

しかし、パンくずリストを用いて記事を管理している場合、
大カテゴリ 中カテゴリ 小カテゴリ の順でカテゴリを設定しているケースがあります。

そうなると、関連記事は小カテゴリで拾って欲しいにも関わらずそこが実現できません。

そんな中、みなさん知っていると思いますがはてなブログには公式に以下の機能があります。
記事下に「関連記事」を表示します - はてなブログ開発ブログ

そのブログに投稿された記事から、表示中の内容に関連するとみられるものを最大5件まで、一覧形式で表示します。

実際にHTML画面を確認すると

<!-- Hatena-Epic-has-related-entries-with-elasticsearch:true -->
  <div class="hatena-module-title">
    関連記事
  </div>
  <div class="hatena-module-body">
    <ul class="related-entries hatena-urllist urllist-with-thumbnails">
    <li class="urllist-item related-entries-item">
      <div class="urllist-item-inner related-entries-item-inner">
...

記事をelasticsearchを用いて解析しているみたいですね。
今回は、こちらに切り替えて関連記事を表示させることにしました。

ただし、そのまま表示すると5記事が縦に並ぶので2列で4記事にしてすっきりさせました。

実際、冒頭の画像にあるように関連記事の中の記事の属性も似ています。
ただし、万能ではないのでところどころ全く別のカテゴリが関連記事として表示されています。これはご愛嬌ですね。

せっかくなので、この機会にheatmapの解析ツールで、どの程度までが関連記事まで見ているのか調査してみたいと思います。その結果もこの記事に追記予定です。

以上です。