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

hatenaロゴ

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

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

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

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

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

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

デザインCSSで非表示

(設定→カスタマイズ→デザインCSSにコードを入力)

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

参考になるブログ・Webサイト
koblog - 【はてなブログ】トップページの記事を非表示にする方法

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

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

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

(デザイン→カスタマイズ→デザインCSSにコードを入力)

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

.related-entries-item {
    width: 49%;
}

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

/* サムネイル画像の大きさを変更、外枠を表示 */
.related-entries-image {
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* 投稿日時のフォントの大きさを変更、下余白を調整 */
.related-entries-date-link time {
    font-size: 14px;
    line-height: 2;
}

/* 投稿日時のリンクを無効 */
.related-entries-date-link a {
    pointer-events: none;
    text-decoration: none;
}

/* 投稿日時の横にはてな純正アイコンを表示 */
.related-entries-date-link time:before {
    font-family: blogicon;
    font-size: 16px !important;
    font-weight: normal;
    content: "\f043";
    vertical-align: -2px;
}

/* 記事タイトルのフォントの大きさを変更 */
.related-entries-title-link {
    font-size: 14px;
}

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

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