わたし、シーズン2

読書が趣味の30代主婦。きままな読書感想文を中心に日常を綴っています。家族は、夫と娘と元保護犬の愛犬ミィ。

MENU
ベネッセのDM止める方法
おすすめスープジャー
歯医者さん
ブログカスタマイズカテゴリー

【はてなブログカスタマイズ】記事下の「関連記事」をカスタマイズ!記事の説明消します

f:id:egaode_kurasu:20210130110942p:plain

ずっと気になっていた「関連記事」をカスタマイズしました。

記事下に表示される「関連記事」ですが、ワンタッチで表示・非表示が選べます。

「デザイン」→「カスタマイズ(スパナのマーク)」→「記事」の「関連記事を記事下に表示する」のチェックボタンで選べます。

 私は、表示はしたいけど表示の仕方がイマイチだなぁ...と思っていたので、今回カスタマイズしてみました。 

 

気に入らなかった点

●カスタマイズ前の表示(PC)がこちら。

f:id:egaode_kurasu:20210326185203p:plain

横に間延びしているような感じで、スカスカしたような印象。あと、タイトルの下に表示される説明文が不要。(ほんの少ししか表示されないからなくていい。)

 

●カスタマイズ前の表示(スマホ)がこちら。

f:id:egaode_kurasu:20210326190012p:plain

タイトル下の説明文が、画像の下に入り込んでいてゴチャゴチャ感が凄い。

以上が気に入らなかった点です。

 

レッツ!カスタマイズ!

カスタマイズをする前に、バックアップをとっておくのを強くお勧めします。(ついついバックアップを取らずに作業を進めて後悔したこと数知れず...な私が言うので間違いない!)

 今回変更した点は...

  1. PC表示の際に2列に表示されるようにしました。(スマホでは見にくくなるので1列表示)
  2. 記事のタイトルの文字サイズを少し小さくして、太字にしました。
  3. タイトル下の説明文を消しました。

 

●カスタマイズ後の表示(PC)がこちら。

f:id:egaode_kurasu:20210326191926p:plain

2列になってスカスカ感がなくなり、ちょろっと表示されていた説明文がなくなりました。

 

●カスタマイズ後の表示(スマホ)がこちら。

f:id:egaode_kurasu:20210326192517p:plain

説明文がなくなって、画像の下に文字が回り込まなくなってスッキリ!

 

●カスタマイズ前後の比較(PC)

f:id:egaode_kurasu:20210326193620p:plain

 

●カスタマイズ前後の比較(スマホ)

f:id:egaode_kurasu:20210326194057p:plain
いやー、めっちゃ気に入ったんだけども!!まさに私が望んでいた形になりました。

 

今回のカスタマイズのcssコード

/* おすすめ関連記事2列 */
.related-entries li {
float: left;
text-align: left;
width: 50%;
height: 150px; /* 高さ調整 */
padding: 4px 0;
box-sizing: border-box;
font-size: 100%; /* 文字の大きさ調整 */
border-bottom: 1px solid #ddd;
}
.related-entries-item-inner {
padding: 8px;
}
.related-entries-image-link {
float: left;
margin: 0 8px 8px;
}
.related-entries-title {
margin: 8px 0;
}
/* float解除 */
.related-entries::after {
content: "";
display: block;
clear: both;
}
/* スマートフォン1列 */
@media only screen and (max-width:767px){
.related-entries li {
float: none;
width: 100%;
height: auto;
}
}

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
text-decoration: none;
color: #525252;
font-weight: 700; /* 太字 */
}

/*関連記事の説明を消す*/
.urllist-entry-body.related-entries-entry-body {
display: none;
}

 

今回のカスタマイズで、参考にさせていただいたサイト様 です。お2人のおかげでカスタムできました。感謝!

カスタマイズが上手くいったときの爽快感ハンパない!これだからカスタマイズはやめられません。

saruwakakun.com blog.minimal-green.com