ワードプレスのページタイトルのフォント変更

質問

Wordpressの「Onetone」テーマを使っていますが、
ページタイトル（PageTitle）のフォントサイズの変更ができなくてこまっています。
「外観」＞「カスタマイズ」＞「Onetone:Pages&Posts」＞「Page Title Bar」から編集するのか、と推測しているのですが、フォントサイズを変更する欄がありません。

かといって、style.cssを直接編集して、h1タグにフォントスタイルを追加しても、変化がありません。
「Onetone」テーマの場合、ページタイトルのフォントサイズは変更できないのでしょうか？

回答No.1

4017B · ベストアンサー

style.css の1404-1409行目の…

.page-title h1,
.page-title h2 {
font-size: 18px;
line-height: 1;
margin: 0;
}

～この部分で H1 と H2 に強制的に同じ設定が付与されてしまっているので、コレを適当な値に修正して再保存すればフォントサイズの変更が可能です。具体的には…

/*------------
* my custom styles:
--------------*/
.page-title h1 {
font-size: 48px;
}

～みたいな感じの部分的なパッチを style.css の一番最後、末尾に追記する形で修正し上書き保存を行えば、CSS内に記述された設定は上から順番に適用されて行き、後の方に記述されているものほど上書きされて優先的に適用されるので。一番最後の末尾に記述された設定値が最終的に適用される事になる仕組みです。

またこの際に…

h1 { font-size: 48px; }

～みたいに記述しても設定が無視されてしまうのは「詳細度」のためです。セレクターとも言いますが、前述の例で言えば .page-title h1 {...} と記述されてしまっている場合、これを h1{...} では上書き出来ません。

厳密には上書きされてますが、 .page-title h1 {...} の方が詳細度が強いため、それよりは緩やかに大まかにしか指定されてない h1{...} という記述は「詳細度が低い(弱い)」となるので、実際に表示されている記事タイトルの文字サイズを変更出来ないためです。

P.S.
しかしながら外部配布のオリジナルテーマに含まれる style.css を自分で修正しても、大元のテーマがアップデート等で更新されてしまうと自己修正部分も全て上書きされてしまい無かった事になってしまいますので。自己流カスタマイズを恒久化させたい場合はアップデート毎に手作業で修正し直す必要があるので注意してください。

お礼

ありがとうございます。
とても参考になりました。