記事下の関連記事リストをカード型に縦横に並べて表示する方法【はてなブログ】

はてなブログの機能のひとつに、関連記事表示があります。

記事の内容に関連するブログ内の別の記事へのリンクを、自動で一覧表示してくれる便利な機能です。記事の下に自動で表示され、設定も簡単です。関連記事を表示することで、別の記事も読んでもらえるメリットがあります。

今回は関連記事の表示を、

　「カード型に縦横に並べて表示」

するようにカスタマイズしてみたので紹介したいと思います。

関連記事のリスト表示について
表示する設定はとっても簡単！
カード型で縦横にデザインをカスタマイズ
変更方法
- CSSコード
完成！
デザイン変更後の配置での注意点
まとめ

f:id:pisukechin:20220227101735p:plain

表示する設定はとっても簡単！

表示するための設定方法は簡単です。

はてなブログのダッシュボード（編集画面）を開き、デザイン、工具マーク、記事と選択し、その中にある「関連記事を記事下に表示する」をチェックし、変更を保存するだけです。

f:id:pisukechin:20220226105341p:plain — デザインメニューより設定可能

カード型で縦横にデザインをカスタマイズ

何もしないそのままのデザインでも問題ありませんが、自分好みにカスタマイズしてみよう！ということで、カード型で縦横の表示に変更してみました。変更後のイメージは下の画像になります。

f:id:pisukechin:20220227100648p:plain — カード型で縦横に変更された関連記事リスト（パソコンなど）

変更内容は、

表示する関連記事は4件（最大5件まで表示させると見栄えが悪いため）
表示はイメージと日付、タイトル
スマホ表示の際は縦に並べる（表示件数は最大5件のまま）

です。

シンプルな表示方法を目指しています。

f:id:pisukechin:20220227100652p:plain — スマホ表示画面（縦方向に5件で表示）

変更方法

変更はCSSで実施します。

ダッシュボードのデザイン内に「｛｝デザインCSS」に入力します。すでに色々と設定している場合は、そのコードの最後に追記でOKです。

【注意】CSSを変更する際は、バックアップ（メモ帳にコピーなど）を忘れずに！

f:id:pisukechin:20220226105344p:plain — CSSコードを追加する

CSSコード

CSSコードを紹介します。

色々試しながら作成しており、別のもっと綺麗でコンパクトなコードでも大丈夫かもしれません。このままでもいいですし、アレンジしちゃってもOKです。

【注意】使用しているブログのデザインや他のCSSコードとの兼ね合いで動かない（表示されない）可能性もあります。

.hatena-module.hatena-module-related-entries {
margin-top: 40px;
margin-bottom: 30px;
}
.urllist-entry-body.related-entries-entry-body {
display: none;
}
.urllist-item.related-entries-item{
border-bottom: none;
line-height: 1.2;
padding: 2px 0 0 0;
}
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
text-decoration: none;
color: #000000;
font-weight: bold;
font-size: 100%;
overflow: hidden;
}
@media (min-width: 480px){
.related-entries {
display: flex;
flex-wrap: wrap;
}
.related-entries li {
width: calc( 50% - 8px);
}
.related-entries li:nth-child(n+5) {
display: none;
}
.related-entries li:nth-child(2n) {
margin-left: 10px;
}
}

■.hatena-module.hatena-module-related-entries

関連記事全体のエリアの上下の余白（マージン）を設定しています。前後の記事や広告などの表示部分とすぐ隣合わないようにしています。

■.urllist-entry-body.related-entries-entry-body

記事の内容の説明文を非表示（display: none;）にしています。

■.urllist-item.related-entries-item

デフォルトの関連記事毎の下の線（ライン）を非表示にしています。また、文字の行間（line-height: 1.2;）を設定し、1.2文字幅（文字幅1+行間0.2文字という意味）にして文字の間がスカスカにならないように、見栄えを調整しています。

■a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title

タイトル文字（リンク）の設定です。黒色の太字、サイズは他での設定を無効にするため、あえてここで100%としています。サイズ設定外したらやたらと文字がでかくなり。。

■@media (min-width: 480px) { }

ここからは、パソコンのように横の解像度が大きい場合に、適用される設定になります。min-width: 480px、分かりにくいですが、480px以上ならと同じ意味です。（だと理解しています。。）

｛　｝で囲まれた部分が適用されます。

■.related-entries

■.related-entries li

ここで関連記事を横一列に並べています。

width: calc( 50% - 8px);は各関連記事の横サイズを、50%（2列ですね）から、8pxぐらい引いたサイズにするという意味です。8pxは確認しながら設定します。調整不足だと横2列にならなかったり、小さすぎたりしちゃいます。

■.related-entries li:nth-child(n+5)

5件目以降は非表示（display:none;）しています。nth-child(n+5)は疑似クラスと呼ばれ、5番目以降に適用という意味です。n+3なら3件目以降です。2nとすると偶数になります。スマホでは適用されないところに記述しているため、スマホの場合の表示は最大5件（変更なし）のままになります。

■.related-entries li:nth-child(2n)

奇数番の記事は適用せず左寄せで、偶数番の関連記事のみ左に余白を10px設定します。横2列に並べた記事の間隔です。