【Cocoon】サイドバーウィジェットの文字サイズを小さくカスタマイズ

WordPressの無料テーマ【Cocoon】を採用し、早ひと月近くが経ちました。現時点ではSEO的にも問題ないようで、アクセス数も依然とほぼ同等、もしくはややアップしています。

テーマの使い勝手も非常によく、正直言って無料のWordPressテーマでここまで出来れば、個人的には言う事無しです。

そんな素晴らしい出来栄えの【Cocoon】ですが、デザインや文字サイズなどはボチボチカスタマイズしている状態。そんな中やや苦労したのがサイドバーの文字サイズの変更でした。

デフォルトでは本文と同じ文字サイズが指定されるのですが、サイドバーウィジェットの「新着記事」や「ランキング」内の文字サイズを14px程度に小さく変更しようと思ったものの色々調べても上手くいかず。結局Google Chromeの【デベロッパーツール（F12）】で調べて解決しました。

もしも自分のようにサイドバーウィジェット内の文字サイズが上手く変更できず悩んでいるなら、一度試してみてくださいね。

【Cocoon】サイドバーウィジェットのフォントサイズを小さくするCSSカスタマイズ

という事で、【Cocoon】のサイドバーウィジェット内のフォントサイズを小さくするCSSカスタマイズ例をサクッとご紹介しておきます。

まず一般的なサイドバー内の文字サイズ変更なら以下のコードで可能なはず。

#sidebar {
    font-size: 14px;
}

しかし、これではサイドバーウィジェットの【新着記事】や【ランキング】内の文字サイズは変更できませんでした。そこで自分が使っているのが以下のコード。

.widget-entry-card {
    font-size: 14px;
}

これで無事フォントサイズが14pxに変更できました。

【Cocoon】で自分と同様にサイドバーウィジェット内の文字サイズが変更できずに悩んでいる方は試してみてくださいね。なお、【Cocoon】では予め子テーマも用意されています。CSSカスタマイズを施す場合は、必ず子テーマを利用するようにしましょう。

以上、参考になれば幸いです。