(O+P)ut

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



(O+P)ut

OutPut Log by SE

【はてなブログ】関連記事を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;
}

修正内容は以下です。

  • 1列 → 2列
  • 5記事 → 4記事
  • 冒頭文の表示 → 冒頭文の非表示

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を用いて解析しているみたいですね。
この箇所に関する設定値を修正しています。

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

スマホの場合は1列

スマホで見ると、デザインテンプレートによっては2列表示が窮屈です。
その場合は二列表示に変更する箇所に@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;
}
}

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

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

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

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

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