関連記事タイトルのフォントなどをカスタマイズ【Cocoon】

スポンサーリンク

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

デフォルト

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

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

Cocoon設定

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

Cocoon側の設定
  1. Cocoon設定
  2. 投稿
  3. 関連記事設定

サンプルコード

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

タイトルのフォント

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

完成

だいぶスッキリしました。

Comment

タイトルとURLをコピーしました