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

この記事は約2分で読めます。

本サイトは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はこちらのサイトを参考にさせていただきました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

それでもまだ見出しが大きく感じるので、今度はスキン側の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を上書きします。

yasuu_kusayanをフォローする
タイトルとURLをコピーしました