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

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.4」のテーマ「Twenty Eleven1.4」での話であり、バージョンが大きく異なると動作しない場合があります。

以前、WordPressテーマTwenty Elevenで見出し文字の大きさが標準の場合、h1~h6タグまで規則正しく文字の大きさが大小になっていなかったので、その見出し文字の大きさを変える方法を説明しました。しかし、h1とh2の文字の大きさが同じだったり、h3で強制的に文字が大文字に変換されていたりと完全ではありませんでした。(この件についてはこちらを参照して下さい。)あらためていろいろと弄ってみて、h1~h6タグまで規則正しく大小させることが出来たので説明します。

標準の文字の大きさはこんな感じです。これを変更します。

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

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

例)「style.css」
h1~h6の文字の大きさをそれぞれ「1.6em」「1.4em」「1.2em」「1.0em」「0.8em」「0.6em」に、
文字の色を「#000」(黒)に、文字の太さを「bold」、下のマージンを「0.4em」にする場合


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.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,
.comment-content h1 {
	font-size: 1.6em;
	color: #000;
	font-weight: bold;
	margin: 0 0 .4em;
}
.entry-content h2,
.comment-content h2 {
	font-size: 1.4em;
	color: #000;
	font-weight: bold;
	margin: 0 0 .4em;
}
.entry-content h3,
.comment-content h3 {
	font-size: 1.2em;
	color: #000;
	font-weight: bold;
	margin: 0 0 .4em;
	text-transform: none;
}
.entry-content h4,
.comment-content h4 {
	font-size: 1.0em;
	color: #000;
	font-weight: bold;
	margin: 0 0 .4em;
}
.entry-content h5,
.comment-content h5 {
	font-size: .8em;
	color: #000;
	font-weight: bold;
	margin: 0 0 .4em;
}
.entry-content h6,
.comment-content h6 {
	font-size: .6em;
	color: #000;
	font-weight: bold;
	margin: 0 0 .4em;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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


この場合、h5とh6は本文より文字の大きさが小さく、使うことは無いでしょうから、h5とh6を設定している箇所は削除しても構わないでしょう。

それから、h3の「text-transform: none;」で文字を大文字に変換しないように設定しています。これを追加しておかないと、h3で強制的に文字が大文字に変換されてしまいます。

好みにより文字の大きさ、色、太さ、上下左右のマージンを変えて下さい。

例えば、「font-size:」の右の数値を変える事により、文字の大きさを変える事が出来ます。

「font-weight:」の右側を100~900の100刻みの9ステップの数値で設定することにより、文字の太さを細くしたり太くしたりも出来ます。「bold」の場合は700です。

「margin:」の右の数値は、順番に上、左右、下のマージン量なので、それぞれの数値を変える事により余白量を変える事が出来ます。今回の場合、ちょっとh1~h6で余白が増えたり減ったりしている感じがしますが、とりあえず気にしないことにします。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク