はてなブログ・関連記事のカスタマイズ

はじめに

*当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

 

関連記事のカスタマイズ

記事下に表示される「関連記事」のカスタマイズです。

「関連記事」を表示するには「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」→「記事」の中にある「関連記事を記事下に表示する」のチェックボックスをオンにしてください。

以下のカスタマイズしたいコードを「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」→「デザインCSS」に貼り付けてください。

冒頭文を非表示にする

.related-entries-entry-body{
display: none;
}

日付を非表示にする

.related-entries-date-link{
display: none;
}

サムネイル画像を非表示にする

.related-entries-image-link{
display: none;
}

関連記事を別の表示にする

.hatena-module-related-entries .hatena-module-title{
font-size:0;
}
.hatena-module-related-entries .hatena-module-title::before{
content:’おすすめ記事';
font-size:1rem;
}

コードの中の「おすすめ記事」のところを変えることで、お好きな表示にできます。

はてなブログが「関連記事」を自動で選んでくれますが、記事と何も関係ないやんというような「関連記事」が表示されることもあります。

関連記事の5記事目を非表示にする

.related-entries-item:nth-of-type(5){
display: none;
}

4記事目も非表示にしたい場合は、上のコードの数字()を()に変えたコードを貼り付けてください。(数字()と()の2つのコードを貼り付ける)

3記事目も2記事目も非表示にしたい場合は、同じようにしてください。

参考サイト