TwentyFourteenのテーマで、ヘッダー部にあるサイトタイトルのスタイル設定を行っている際、CSSでサイトタイトルの文字色を変更しても反映されないなどいくつか修整に苦労した点がありましたので備忘としてまとめました。

TwentyFourteenのヘッダー部のサイトタイトル部分

　
（header.php）

<header id="masthead" class="site-header" role="banner">
  <div class="header-main">
    <h1 class="site-title">
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
         <?php bloginfo( 'name' ); ?>

（style.css）

#site-header {
        position: relative;
        z-index: 3;
}

.site-header {
        background-color: #000;
        max-width: 1260px;
        position: relative;
        width: 100%;
        z-index: 4;
}

.header-main {
        min-height: 48px;
        padding: 0 10px;
}

.site-title {
        float: left;
        font-size: 18px;
        font-weight: 700;
        line-height: 48px;
        margin: 0;
}

.site-title a,
.site-title a:hover {
        color: #fff;
}

　

１）サイトタイトルの色を変更できない

　
“.site-title a”の部分でcolorの設定を”#fff”から変更しても実際に表示すると反映されないのです。
　
いろいろ調べたところHTMLのソースを見るとインラインで下記コードが挿入されていました。

<style type="text/css" id="twentyfourteen-header-css">
			.site-title a {
			color: #ffffff;
		}
</style>

この設定が優先されていたためstyle.cssでの設定が反映されませんでした。
　
では、この設定はどこで生成されているか？という事になりますが、管理画面でテーマのカスタマイズメニューにその項目があって、そこに”ffffff”が設定されていました。
　
管理画面→テーマ→カスタマイズ→色→サイト名の色
　
この”サイト名の色”の部分で色を設定する指定した色が上記場所にインラインで挿入され反映されました。
　
CSSを触らなくてもサイト名の色を変更できるようにという機能なんだろうと思いますが、最初からstyle.cssで変更するつもりの人にはかえって災いしてしまいますね。
　

２）サイトタイトルが２行になると文字が背景色部分からはみ出る

　
.site-titleクラスに記述したサイトタイトルの文字が２行になると.site-headerクラスで設定した背景色部分の下にはみ出てしまいました。
　
これは、.site-titleクラスにfloatを指定しているからのようでこれを削除したら、背景色が下に拡大されるようになりました。

関連記事の目次