【はてなブログ】関連記事を2列にして表示するカスタマイズ

はじめに

はてなブログでは”デザイン”機能にて関連記事の表示有無の設定ができます。

公式の説明は以下で

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

リンクは以下です。

ここから本記事ではさらに可視性を上げるためのカスタイマイズを行ったのでそのCSSコードを紹介します。

CSSコード

以下のコードで2列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;
}

これによってデフォルトである1列が2列＆5記事が4記事に、そして冒頭文の表示を非表示にしています。

設定後の見え方

端末による表示のされ方を以下に添付します。

PC版

タブレット版

スマホ版

以下、補足です。

補足

関連記事を出す機能を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で記事内容を解析していることが分かります。

今回はカスタマイズのために同箇所の修正を行いました。

尚、スマホの場合は1列で出した方が視認性が良くなるため

@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;
}
}

と追記すれば画面が大きい端末では2列表示、画面が小さい端末では1列表示という微調整も可能です。

終わりに

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

(O+P)ut

アウトプット