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

はてなブログの関連記事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版

タブレット版

スマホ版

After

PC版

タブレット版

スマホ版

以下、背景と補足です。

背景/補足

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

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

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

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

そのブログに投稿された記事から、表示中の内容に関連するとみられるものを最大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を用いて解析しているみたいですね。
この箇所に関する設定値を修正しています。

ここでさらに

• スマホの場合は一列
• スマホの場合は３記事
• 関連記事は記事タイトルのみ

という変更をプラスする応用編は以下です。

(応用) PCとスマホで表示を変える

スマホの場合は１列

スマホで見ると、デザインテンプレートによっては２列表示が窮屈です。
その場合は二列表示に変更する箇所に@media(min-width: 768px)を入れます。

@media(min-width: 768px){
.related-entries-item{
  width: 48%;
  border:1px solid #e0e0e0;
  border-radius:2px;
  margin: 0 0 1em 0;
  padding: 1em;
 }
}
@media(max-width: 767px){
.related-entries-item{
  width: 98%;
  border:1px solid #e0e0e0;
  border-radius:2px;
  margin: 0 0 1em 0;
  padding: 1em;
}
}

こうすれば画面が大きい端末では２列表示、画面が小さい端末では１列表示にできます。

スマホの場合は4つ目の記事も非表示

一画面に収めるためにスマホの４記事目を非表示にして３記事のみを表示させます。

@media(max-width: 768px){
.related-entries-item:nth-of-type(4){
  display: none;
 }
}

記事の冒頭分を非表示

すっきりさせるために行いました。

.related-entries-entry-body{
  display: none;
}

以上、同様のカスタマイズに興味がある方の参考になれば幸いです。