本サイトはWordPressで、テーマはCocoonを使っています。無料なのに高機能な点がいいですね。
スキンも豊富で様々なデザインを選べるのもいいです。
ただし、スキンは投稿記事部分だけ装飾されるだけで、記事タイトル部分はテーマ本体の仕様に左右されます。
気になったのが、記事タイトルの文字の大きさが本文の見出しより小さいことです。
記事タイトルはテーマ本体側でｈ1で指定されています。そのためスキン側の見出しはｈ2から始まります。使用しているスキンのｈ2が1.8remと大きさが指定されていることで、記事タイトルより本文見出しの文字の方が大きいのです。
ずっとそのままにしておいたのですが、やっぱり気になるので、cssを追加、修正することにしました。
記事タイトル文字の大きさの修正方法
まずCocoonの子テーマ側のstyle.cssにｈ1に装飾を施すコードを追加。記事タイトルは上下線で挟むデザインにしました。
h1.entry-title {
color: #444;/*文字色*/
font-size: 1.8rem;
padding: 0.5em 0;/*上下の余白*/
border-top: solid 8px #536976; /*上線*/
border-bottom: solid 8px #536976;/*下線*/
}このコードを適応すると、とりあえず本文のｈ2見出しと同じ大きさとなります。
見出しCSSはこちらのサイトを参考にさせていただきました。
それでもまだ見出しが大きく感じるので、今度はスキン側のstyle.cssを修正します。
FTPソフトでサイト内に入り、Cocoon本体側にあるskinディレクトリ内の該当スキン内のstyle.cssをダウンロード。メモ帳で開い以下を修正。font-sizeの数値を1.8から1.6へ修正。
・変更前
/* 見出し */
.article h2 {
background-color: transparent;
padding: 0;
font-size: 1.8rem;
text-indent: .5em;
}
・変更後
/* 見出し */
.article h2 {
background-color: transparent;
padding: 0;
font-size: 1.6rem;
text-indent: .5em;
}修正後、ftpで元のディレクトリ内のstyle.cssを上書きします。
2021/12/25追記
しかし、Cocoon本体がバージョンアップされると元の設定に戻ってしまうので、都度修正しないといけません。
これはとても面倒です。
試しにCocoonの子テーマ側のstyle.cssの方に記述してみたら、ちゃんと文字の大きさが変更されました。
h1.entry-title {
color: #444;/*文字色*/
font-size: 1.8rem;
padding: 0.5em 0;/*上下の余白*/
border-top: solid 8px #61045F; /*上線*/
border-bottom: solid 8px #61045F;/*下線*/
}
/* 見出し */
.article h2 {
background-color: transparent;
padding: 0;
font-size: 1.6rem;
text-indent: .5em;
}結局、このようにCocoonの子テーマ側のstyle.cssの方に記述すればいいのでした。
サイドバーの文字の大きさの変更は？
Cocoonにはサイドバーの文字の大きさを変更する指定箇所がないので、追加CSSを付加する必要があります。
外観→カスタマイズ→追加CSSの順で開いて以下CSSコードを追加します。
.widget-entry-card {
font-size: 14px;
}font-size: 14px;の数値はお好みに合わせて変更してください。
コメント