twentyeleven 子テーマで<h>タグのフォントの大きさが変わらない

随分前に「TWENTYELEVEN 子テーマの作り方」を載せました。
このWebサイトも趣味のWebサイトでも twentyeleven を利用しています。
趣味のWebサイトでふと気づいたのですが、いつの間にか？最初から？なのか、<h>タグのフォントの大きさが指定した大きさに変わっていませんでした。

もっと早く気づけよ～と自分でも突っ込みを入れたいくらいです^^；

なぜ変わらないのか？

このWebサイトではちゃんと変わるのに、なぜ趣味のWebサイトでは変わらなかったのか？
実は修正の仕方が本Webサイトと趣味のWebサイトで異なる方法でやっていました。

具体的には、本文のCSSは「entry-content」クラスに書かれているので、スタイルシート内で「. entry-content」を指定する必要がありました。
クラスを付けていなかったので、無視というか相手にされていませんでした。

また、CSSの呼ばれる順も考慮してなかったので、子テーマスタイルシートが先に呼ばれ、後から親テーマスタイルシートが呼び出されていたので、CSSも上書きされていました。

趣味のWebサイトの子テーマの記述

Style.css を以下のように単純に指定していました。

h1 {・・・}
h2 {・・・}
h3 {・・・}

Functions.phpも以下のように css の読み込み順位を考慮せず読み込んでいました。

//親スタイルシート読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

どのように修正したか

1つ目は、<h>タグの指定に「entry-content」クラスを追加するようにしました。
2つ名は、親テーマスタイルシートが呼んだ後に子テーマスタイルシートが呼び出されるようにしました。

正しく反映されるようにした記述

Style.css を以下のようにクラス名も合わせて指定するようにしました。

.entry-content h1 {・・・}
.entry-content h2 {・・・}
.entry-content h3 {・・・}

Functions.phpも以下のように css の読み込み順を考慮して読み込ませます。

//親スタイルシート読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}

まとめ

ちなみに twentyeleven で発生した不具合ですが、twentyseven では同じ記述方法でも正常に表示されていました。
なので、テンプレートによって挙動が異なると思います。

もしも皆さんのWebサイトでも同様のことが起こった場合は、以下の手順で確認すると良いと思われます。
ただし、奥の方まで追っていかないと分からないテンプレートも中には有ると思いますが・・・

１．不具合が確認できている記事を表示する
２．ページのソースを表示する
３．親テーマのスタイルシートを呼び出した後に子テーマのスタイルシートが呼ばれていることを確認する
４．クラス名やIDを確認する

以上、「twentyeleven 子テーマで<h>タグのフォントの大きさが変わらない」の対応方法のご紹介でした。