はてなブログ

【はてなブログ】サイドバーの関連記事を記事下に、しかも2列のカード型で表示する方法

f:id:langnerdmom:20210323234535j:plain:w300

はてなブログのカスタマイズで悩んでいたのが

「デザイン」→「カスタマイズ」→「記事」→
関連記事を記事下に表示する

を入れていたんですが、サムネイルのサイズを上手く変えられないこと。

↓この部分に チェック

f:id:langnerdmom:20210323213832j:plain:w200

解決できたので今回はそのことについてまとめてみました!

サイドバーのモジュールにも関連記事がある

関連記事ってサイドバーからも表示できたんですね

  • サイドバーの「最新記事/注目記事/関連記事」は「記事下」に表示できる
  • 「最新記事/注目記事/関連記事」もカード型で表示できる!

そんなことを知りまして、

サイドバーの関連記事を記事下にカード型2列で表示することに決めました。

\完成図/

f:id:langnerdmom:20210323215252j:plain:w200

カスタマイズをする時は必ずバックアップを取ってから、自己責任でお願いします。

サイドバーの関連記事を記事下に表示するための下準備

関連記事を記事下に表示すのチェックをはずす

f:id:langnerdmom:20210323213832j:plain:w200

「デザイン」→「カスタマイズ」→「記事」→
関連記事を記事下に表示する

チェックがある場合は外してしまいましょう。

サイドバーに関連記事を追加

f:id:langnerdmom:20210323221218j:plain:w200

「カスタマイズ」→「サイドバー」→「+モジュールを追加」

f:id:langnerdmom:20210323222345j:plain:w200

「関連記事」を選ぶ

f:id:langnerdmom:20210323221507j:plain:w200

  1. タイトルを好きなものに変える(記事下に移動させた時、そのまま関連記事のタイトルになります)
  2. 表示件数を偶数に
  3. サムネイル画像を表示するにを入れる
  4. 横160px & 縦100pxに変更(ご自身の好みで数字を変えてOKです)

f:id:langnerdmom:20210323222025j:plain:w250

左下の「適用」をクリック

f:id:langnerdmom:20210323222110j:plain:w200

ここで一旦、上にある「変更を保存する」をクリックしておきましょう。

サイドバーの関連記事を非表示に

.hatena-module-related-entries {
display: none;
}

これをデザインCSSに貼り付けることで、サイドバーにある関連記事を非表示に。

サイドバーと記事下に同じものがダブって表示されるのが防げます。

記事下にサイドバーモジュールの関連記事を移す

参考記事はてなブログで記事下に関連記事を出すカンタンな方法 – ボクココ

「デザイン」→「カスタマイズ」→「記事」→「記事下」に下記のコードを貼り付け。

<div id="relateArticle"></div>
<script>
var timer = setInterval(function() {
if (typeof jQuery != 'undefined') {
$("#relateArticle").html($(".hatena-module-related-entries").html());
clearInterval(timer);
}
}, 1000)
</script>

これで記事下のコードを貼り付けた位置に、関連記事が表示されます

.hatena-module-related-entriesの部分を

.entries-access-ranking
.recent-entries
に変えることで注目記事/最新記事を記事下に持ってくることもできますよ

サイドバーモジュールを2列のカード型にする

参考記事【はてなブログ】最新記事、関連記事、注目記事を2列にするカスタマイズ – フジブロっ!

デザインCSSに

.urllist-with-thumbnails {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.urllist-with-thumbnails li {
width: calc( 50% - 5px);
}
.urllist-with-thumbnails li:nth-child(2n) {
margin-left: 10px;
}
.urllist-with-thumbnails li .urllist-image {
margin: 0 0 4px;
}

上記のコードを追加する。

それだけで、記事下に移動させた関連記事が2列横並びのカード型になりました!

このコードはサイドバーに表示している「関連記事/注目記事/最新記事」すべてに適用されます。

.urllist-with-thumbnails

.recent-entries :最新記事
.related-entries :関連記事
.entries-access-ranking :注目記事

にすることで、全部ではなく好きなものの表示を変更できるそうです!

今度、パソコン使えるときにやってみよう

スマホから表示するときだけ2列表示にするには?

@media (max-width: 767px){
.urllist-with-thumbnails {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.urllist-with-thumbnails li {
width: calc( 50% - 5px);
}
.urllist-with-thumbnails li:nth-child(2n) {
margin-left: 10px;
}
.urllist-with-thumbnails li .urllist-image {
margin: 0 0 4px;
}
}

@media (max-width: 767px){ }で囲ってあげるとスマホの時だけ表示することができます。

忙しいワーママに

忙しいワーママでも「はてなブログPro」でなら、簡単なのに本格的なブログが始められる


一緒に始めてみませんか?

カスタマイズって楽しい

コードを触ったりはまったくできないド素人なので、何のコッチャさっぱり。

ですが、調べてコピペして

トライ&エラーを繰り返しながら自分のブログをカスタマイズする時間が何より楽しいです

そんな時間あったら勉強せい。って感じですが。

カスタマイズの忘備録が終わったら死にものぐるいで勉強します。

できるかな〜💦

英検、日本語教育能力検定試験の試験が終わったら本格的にプログラミングを学びたい!