【Cocoonカスタマイズ】サイドバーの文字サイズを変更する

Cocoonカスタマイズ
スポンサーリンク

以前はそうでもなかった気がするのですが、アップデートをしてからサイドバーの文字サイズが気になり始めました。


何かでかい。
なので、サイドバーの文字サイズを変更しようと思います。

ぱぷれさん
ぱぷれさん
カスタマイズは自己責任でお願いします。

Cocconの設定で変更可能な文字サイズ

CocoonはWordPressの管理画面上で様々な設定が可能ですが、その中で文字サイズが変更出来るのはサイトフォントということになっています。

Cocoon設定 > 全体タブ の中にあります。モバイル表示の際のサイトフォントも、別途指定出来ます。
ですが、この設定はサイドバーには適用されないようになっているようです。何故されないのかは分かりませんが、全体設定で出来ないのであれば、個別に設定する必要が出てきますね。

サイドバーの文字サイズをCSSで指定

サイドバーのコードを覗いてみる

文字サイズを指定するためには、サイドバーがどのような構成になっているのか確認する必要があります。
サイドバーのコードを覗いてみると、以下のようになっています。

<div id="sidebar" class="sidebar nwa cf" role="complementary">
<aside id="new_entries-3" class="widget widget-sidebar widget-sidebar-standard widget_new_entries">
<h3 class="widget-sidebar-title widget-title">新着記事</h3>
<div class="new-entry-cards widget-entry-cards no-icon cf">
<a href="リンク" class="new-entry-card-link widget-entry-card-link a-wrap" title="~記事タイトル~">
<div class="new-entry-card widget-entry-card e-card cf">
<figure class="new-entry-card-thumb widget-entry-card-thumb card-thumb">
~サムネイル画像へのリンク~
</figure>
<div class="new-entry-card-content widget-entry-card-content card-content">
<div class="new-entry-card-title widget-entry-card-title card-title"> ~記事タイトル~ </div>
</div>
</div>
</div>
</aside>
</div>
ぱぷれさん
ぱぷれさん

簡略化はしてます。

文字サイズを変更するには

文字サイズを変更するには以下のコードで対応可能です。

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

もしくはピンポイントで、

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

としても大丈夫かと。

どちらかを追加CSSに追加すれば、文字サイズは自由に変更出来ると思われます。

コメント

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