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

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

CSSコード

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

.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">
...