Cocoon 記事タイトル文字の大きさを修正した件

この記事は約3分で読めます。
スポンサーリンク

本サイトはWordPressで、テーマはCocoonを使っています。無料なのに高機能な点がいいですね。

スキンも豊富で様々なデザインを選べるのもいいです。

ただし、スキンは投稿記事部分だけ装飾されるだけで、記事タイトル部分はテーマ本体の仕様に左右されます。

気になったのが、記事タイトルの文字の大きさが本文の見出しより小さいことです。

記事タイトルはテーマ本体側でh1で指定されています。そのためスキン側の見出しはh2から始まります。使用しているスキンのh2が1.8remと大きさが指定されていることで、記事タイトルより本文見出しの文字の方が大きいのです。

ずっとそのままにしておいたのですが、やっぱり気になるので、cssを追加、修正することにしました。

まずCocoonの子テーマ側のstyle.cssにh1に装飾を施すコードを追加。記事タイトルは上下線で挟むデザインにしました。

h1.entry-title {
color: #444;/*文字色*/
font-size: 1.8rem;
padding: 0.5em 0;/*上下の余白*/
border-top: solid 8px #536976; /*上線*/
border-bottom: solid 8px #536976;/*下線*/
}

このコードを適応すると、とりあえず本文のh2見出しと同じ大きさとなります。

見出しCSSはこちらのサイトを参考にさせていただきました。

https://saruwakakun.com/html-css/reference/h-design

それでもまだ見出しが大きく感じるので、今度はスキン側の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の方に記述すればいいのでした。

コメント

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