関連記事に表示されるタイトルのフォントサイズを変更【Cocoon】

関連記事のタイトルをサイトの全体感に馴染ませたいと感じたので、フォントサイズや太さなどを変更してみました。

ビフォー&アフター

通常はこの様な感じ。特別な問題はありませんが、何となくフォントの主張を抑えようかなと思いまして。

画像の右側にある記事タイトルをもうちょい小さくしたいなと思いまして

カスタマイズ後はこの様な感じ。だいぶスッキリしました

そもそもの関連記事の表示・非表示はCocoon設定で行います。

Cocoon側の設定

最近ようやくクラス名の調査スキルがついてきました。少しずつ成長。

.related-entry-card-title {
  font-weight: normal;
  font-size: 12px !important;
}

フォントサイズを小さくして、太さも bold から normal に変更しました。「!important」を入れないと適用されないのでご注意ください。

.related-entry-card-thumb {
  border: 3px pink solid;
  border-radius: 22px;
}

画像をはめ込んでいる枠線などのカスタマイズ。まぁ何かの参考にしていただければと思います。

.related-entry-heading {
  color: #5f5f5f;
  font-size: 12pt;
  text-align:center;
  font-family: 'Baloo Thambi 2', cursive;
}

当サイトだと Recommend と表示されている部分です。例えば最新記事やランキング記事のメインタイトルとフォントスタイルを合わせると、サイト全体としての統一感も出てきますね。