はてなブログ公式の記事下関連記事をカスタマイズ

はてなブログでは6月から記事下に「関連記事」が表示されるようになりました。
記事下に「関連記事」を表示します - はてなブログ開発ブログ

今まではJSなどで表示するカスタマイズで対応していましたが、公式のパーツが出来たということで、こちらの方が軽くて良いですね。
既にカスタマイズ方法のパターンを網羅した記事があるのですが、一応自分でも作ってみました。

saruwakakun.com
↑のサルワカさんの記事があれば、正直要らないような気もするのですがｗ、最近作ったテーマ「yumekawa」に合うように作ってみました。
このCSSは記事下の関連記事を対象としたもので、サイドバーの関連記事のデザインには影響しません。

ピンクバージョン
水色バージョン

ピンクバージョン

f:id:minimalgreen:20170818221029p:plain
以下のコードをデザインCSSに追記して下さい。

/* 記事下関連記事 */
/* 関連記事日付 */
#entry-footer-secondary-modules .related-entries-date-link a,
#entry-footer-secondary-modules .related-entries-date-link a:hover {
    display: inline-block;
    background-color: #D496A5;
    color: #fff;
    border-radius: 8px;
    padding: 3px 6px;
    margin-bottom: 5px;
}
/* 関連記事サムネ */
#entry-footer-secondary-modules .related-entries-image {
    border-radius: 50%;
}
/* 関連記事リスト下部ボーダー */
#entry-footer-secondary-modules .hatena-urllist li.related-entries-item {
    border-bottom: 3px dashed #D496A5;
    padding: 10px;
}
/* 関連記事モジュール背景色 */
#entry-footer-secondary-modules .hatena-module-related-entries {
    background-color: #fff;
}

水色バージョン

f:id:minimalgreen:20170818221039p:plain

/* 記事下関連記事 */
/* 関連記事日付 */
#entry-footer-secondary-modules .related-entries-date-link a,
#entry-footer-secondary-modules .related-entries-date-link a:hover {
    display: inline-block;
    background-color: #ceeafb;
    color: #fff;
    border-radius: 8px;
    padding: 3px 6px;
    margin-bottom: 5px;
}
/* 関連記事サムネ */
#entry-footer-secondary-modules .related-entries-image {
    border-radius: 50%;
}
/* 関連記事リスト下部ボーダー */
#entry-footer-secondary-modules .hatena-urllist li.related-entries-item {
    border-bottom: 3px dashed #ceeafb;
    padding: 10px;
}
/* 関連記事モジュール背景色 */
#entry-footer-secondary-modules .hatena-module-related-entries {
    background-color: #F7F9F9;
}