WordPressテーマTwenty Elevenで見出し文字の大きさを変える方法

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.3.2」のテーマ「Twenty Eleven1.3」での話であり、バージョンが大きく異なると動作しない場合があります。
2012/06/20追記 「WordPress3.4」テーマ「Twenty Eleven1.4」での動作を確認しました。
2012/06/29追記 この記事より新しい記事がこちらにあります。

「WordPress3.3.2」のテーマ「Twenty Eleven」において、投稿記事内の見出し文字の大きさが標準の場合、h1~h6タグまで規則正しく大小になっていないのが気になっていました。h1、h2が全く大きくなく、h3がh4~h6よりも小さく、しかも本文よりも小さい。


この見出し文字の大きさを見直すことにしました。その方法を説明します。

見出し文字の大きさを変える方法

/wp-content/themes/twentyeleven内にある
「style.css」の「=Content」の「.entry-content」の見出しを設定している箇所
を下記の様に変えれば文字の大きさを変えることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

例)「style.css」
h2の文字の大きさを「1.4em」に、h3の文字の大きさを「1.2em」にする場合


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.entry-content,
.entry-summary {
	padding: 1.625em 0 0;
}
.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
	color: #000;
	font-weight: bold;
	margin: 0 0 .8125em;
}
.entry-content h3,
.comment-content h3 {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.entry-content,
.entry-summary {
	padding: 1.625em 0 0;
}
.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
	font-size: 1.4em;	/*	追加	*/
	color: #000;
	font-weight: bold;
	margin: 0 0 .8125em;
}
.entry-content h3,
.comment-content h3 {
	font-size: 1.2em;	/*	変更	*/
	letter-spacing: 0.1em;
	line-height: 2.6em;
/*	text-transform: uppercase;	削除	*/
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで見出し文字の大きさが変わったはずです。


本当はh1とh2の文字の大きさを異なる様に変えたかったのですが、いろいろいじっても上手く変わりませんでした。上記とすることによりh1とh2の文字の大きさが同じになるので、取り敢えずは我慢することにしました。いずれは調べ直したいと思います。

h3では、なぜか、文字を大文字に変換していましたので、「text-transform: uppercase;」はコメントにして削除しました。しかし、大文字への変換が止まりません。これも調べ直したいと思います。

h4~h6は本文と同じ文字の大きさですし、あまり使わないだろうと思い、そのままにすることにしました。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



スポンサーリンク