はてなブログの関連記事をカスタマイズしてシンプルに表示

ここ数日、個別記事ページのページャをカスタマイズしていたのですが、細かいところで、どうしても納得できない部分が出てきてしまって、結局、あきらめてしまいました...。

そして、個別記事のページャはあまり使われていないと（勝手に）判断して、CSSで非表示にしました。

記事ページのカスタマイズで非表示

（デザイン→カスタマイズ→記事→記事上下のカスタマイズの記事下にコードを入力）

CSS
<style>
.pager {
    display: none;
}
</style>

記事ページの記事上下のカスタマイズで、個別記事のページャだけを非表示にできます。
※ 記事下のカスタマイズは、記事ページにのみ表示、適用されることを利用しました。

デザインCSSで非表示

（設定→カスタマイズ→「デザインCSS」にコードを入力）

CSS
.page-entry .pager {
    display: none;
}

関連記事をカスタマイズして表示

ただ、ページャがないと記事下が少しさびしい感じがしたので、関連記事を表示させることにしました（記事の投稿数が100を超えたのである程度は表示されることでしょう）。

FOXISM - 関連記事と記事下の順番を変えたり、いろいろカスタマイズを参考に必要な部分を取り入れました

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
/* 関連記事を2列（1行2記事）に変更 */
.related-entries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.related-entries-item {
    width: 49%;
    margin: 0 !important;
}

/* 関連記事の5番目の記事を消す */
.related-entries-item:nth-of-type(5) {
    display: none;
}

/* サムネイル画像の大きさを変更 */
.related-entries-image {
    width: 80px;
    height: 80px;
    border-radius: 6px;
}

/* 投稿日時を消す */
.related-entries-date-link {
    display: none;
}

/* 記事タイトルのフォントの大きさと位置（縦中央揃え）を変更 */
.related-entries-title-link {
    font-size: 15px;
    padding: 20px 0;
}

/* 本文の概要を消す */
.related-entries-entry-body {
    display: none;
}

関連記事をカード風のデザインにして目立たせようと思ったのですが、このブログのテーマ（Minimalism）に合わないと思って、シンプルな感じにしました。