子テーマstyle.cssで、親テーマstyle.cssの要素を再定義する例

子テーマの「style.css」ファイルに@import記述することにより、親テーマの「style.css」で定義された要素を子テーマでも利用できるようになります。

子テーマ「style.css」で親テーマ「style.css」の要素を再定義

親テーマで設定された「ID」また「Class」などを、子テーマで一部違う表現にしたいときは、変更したい「ID」また「Class」を子テーマのCSSファイルで新たに設定します。

●記事タイトルの文字の大きさを変更する場合の例
【変更例:twentyeleven1.3】

「twentyeleven」テーマの「style.css」ファイルに下のコメント記述があります。

そのコメント記述の下に記事タイトルの文字の大きさを変更する「.entry-title」クラスがあります。(※いくつか「.entry-title」があるので注意が必要です。)
以下の「.entry-title」箇所を子テーマ「style.css」ファイルで再定義します。

【親テーマstyle.css】
/* =Content
———————————————– */
.entry-title {
clear: both;
color: #222;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
padding-bottom: .3em;
padding-top: 15px;
}

子テーマ「style.css」ファイルで、記事タイトルの文字の大きさを変更する場合、以下のように文字の大きさを変更するプロパティだけ書き、そして値を変更します。

【子テーマstyle.css】
.entry-title {
font-size: 32px;
}

コメントを残す

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