コクーンのサイドバーの文字サイズが大きすぎる…文字サイズを少し小さくしたい…
このように考えている人も多いのではないかな…？と思って少し記事にまとめます。
この記事を読むメリットは、
誰でも簡単に設定可能です。
コクーンのサイドバーの文字サイズ変更
コクーンのサイドバーの文字サイズの変更の方法はCSSを利用します。
まずはプロフィール部分です。
外観⇒ カスタマイズ に移動をします。
次に 追加CSSを展開します。
この中に下記のソースをコピーして貼り付けてみて下さい。
サンプルソース
.nwa .author-box .author-name {
font-size: 0.7em;
}
.widget-sidebar ul li a {
font-size: 0.8em;
}
.nwa .author-box .author-description {
font-size: 0.8em;
}
.sidebar .widget-title,
#sidebar .widget-title,
.widget-area .widget-title,
.widgettitle {
font-size: 13px; /* 希望のサイズに調整してください */
}
/* フッターのウィジェットタイトルも含める場合 */
.footer-widgets .widget-title,
#footer .widget-title {
font-size: 13px; /* 希望のサイズに調整してください */
}
最後にこの部分ですがフッターエリアにウィジェットを入れた時に ウィジェットタイトルを小さくできます。
好みの文字サイズに変更する
全て共通して文字サイズはpxか em になっています。
新着記事やカテゴリウィジェットの文字サイズ変更CSS
新着記事とカテゴリの文字サイズを調整できるCSSはこちらです。
/* カテゴリーとサイドバーのウィジェットタイトルのフォントサイズを小さくする */
.widget-sidebar-title.widget-title {
font-size: 17px;
font-weight: bold;
}
/* カテゴリーの内容の文字サイズを小さくする */
.list-item-caption {
font-size: 15px;
}
/* 新着記事の内容の文字サイズを小さくする */
.new-entry-card-title.widget-entry-card-title.card-title {
font-size: 14px;
}
/* すべてのウィジェット内のテキストを小さくする（汎用的なスタイル） */
.sidebar .widget {
font-size: 15px;
}サイズはご自身で 好きなようにしてください＾＾
プロフィールとカテゴリと新着記事ぐらいかな…と思って3つ並べました。
基本的に、クラスのみ変更すれば そのままコピペで追加できるかと＾＾；
em とは？
emという値は元の数字を1とした基準で考えます。
0.9em ならば 元のコクーンのデフォルトのサイズより、0.1小さいと考えましょう。
px とは？
px とは ピクセルの略でいわゆるサイズです。
どちらかと言えば正確なサイズに指定しやすいです。
変更方法は同じ
どちらも変更方法は同じで数字を操作するだけです。
13PXの部分を14にすれば文字は大きくなりますし、emの場合も同様に1を基準に多ければ文字は大きくなり、1以下なら小さくなります。
CSSが書けなくてもCSSを書き出す方法
今はAIで簡単にCSSを書いてくれます。
たとえば、
「ワードプレスのウィジェットのタイトルの文字書体を変更したい。」
という場合や
「ワードプレスのウィジェットのタイトルの文字サイズを変更したい。」
このような場合はAIを使えば下書きは簡単にできます。
とは言え、この後にクラス名などの指定は変更は必要ですが＾＾
具体的な作成方法
CHATGPTでもClaudAIでも、構いません。
「ワードプレスでサイドバーのwidgetのタイトル文字サイズを小さくするCSSを書いて」
このように入力するだけです。
色々な命令がありますが この程度のCSSなら 何を言っても伝われば書いてくれます(笑)
CSS作成に使えるAI一覧
僕はこの2点のみ利用しています。
他にもバードなどのAIがあるのですが Claud AI と chatgptの どちらか1個で十分ですよ＾＾
ブログのカスタマイズやＣＳＳでブログのデザインを編集したい時には、ＡＩを使えば一瞬なので活用してみてください＾＾
