こんにちは、サブです。
WordPressでCocoonを使っているけど、サイドバーの文字サイズを変更する方法が分からない、と思っていませんか？
Cocoonをカスタマイズしようとすると、設定項目がたくさんあるのですが、サイドバーの文字サイズを変更する項目は見当たりません。
そこで今回は、WordPressでCocoonを使っている場合に、サイドバーの文字サイズを変更する方法を紹介します。
サイドバーの確認
Cocoonの設定で選ぶ「スキン」にもよるかもしれませんが、下記のように「サイドバーの文字サイズ」と「本文の文字サイズ」が同じになっていたりします。
サイドバーの文字を少し小さくして改行を減らせると、サイドバー全体が伸びすぎずに済むのでは？と考えました。
ただ、Cocoonの設定からは、サイドバーの文字サイズは変更できないようですので、CSSを設定する必要があります。
サイドバーの文字サイズを変更するためのCSS設定
結論
結論から言うと、下記のCSSを追加することでサイドバーの文字サイズを小さくできます。
.widget-sidebar ul li a {
font-size: 0.8em;
}それでは、詳細に手順を追って見ていきましょう。
CSSを作成
1.Google Chromeで記事ページを開いて、「F12」キーを押して「デベロッパーツール」を開きます
2.「デベロッパーツール」が表示されるので、「左上の矢印マーク」をクリックします
3.記事内にマウスを乗せると、HTMLの要素ごとにフォーカスされる状態になります
4.今回、文字サイズを小さくしたいのは、サイドバー上のテキストですので、対象をクリックすると、「デベロッパーツール」上で対象のHTMLがフォーカスされます
必要なところだけ抜粋すると、HTMLは下記のような構造になっているようです。
<aside id="recent-posts-2" class="widget widget-sidebar widget-sidebar-standard widget_recent_entries">
<ul>
<li>
<a href="...">WordPressのサブタイトルを変更する方法【キャッチフレーズの設定】（画像付き）</a>
</li>
</ul>
</aside>
5.上記のHTMLから、クラス名とHTMLタグを確認して、CSSを作ります
.widget-sidebar ul li a {
font-size: 0.8em;
}
CSSを設定
1.「WordPress管理画面」＞「外観」＞「テーマエディター」と進みます
2.「テーマの編集」画面とともに、「ここでCSSを変更する必要はありません」という案内文が表示されます。「付随のCSSエディター」というリンクに進みます。
3.「カスタマイズ中 追加CSS」という画面とともに、CSSを追加するためのエディターも表示されます。
4.エディターに、先ほど作成したCSSを追加すると、右側のサイト表示にリアルタイムで反映されます。（画像だと差が分かりにくいですが、サイドバーの文字サイズが小さくなっています）
5.「公開」をクリックします
以上でCSS設定は完了です。
あらためてブログを確認すると、サイドバーの文字サイズが小さくなっていることが確認できます。
参考までに、下記は文字サイズ変更前の表示です。
まとめ：Cocoonでサイドバー文字のサイズ変更をするにはCSS設定が必要
今回は、WordPressでCocoonを使っている場合に、サイドバーの文字サイズを変更する方法を紹介しました。
Cocoonの設定画面では変更できないため、CSSの設定が必要になりますが、シンプルなCSSで設定できるので、文字サイズが大きく感じているような場合にはおすすめの方法です。
コメント