旅と空と: ワードプレスのテーマ Twenty Fourteenの背景色変更方法

最近よく使われるCMSのワードプレス。オフィシャルのテーマにTwenty Fourteenがある。

この背景色が変更できない！

いや、実はできるんだけど、そこじゃない。本当に変更したいところはサイドバーやヘッダーだ。一部掲示板で公開されていた設定方法があったけど、それだとFirefoxで変わらない部分がある。

今回、Chrome、Firefoxともに色が変わる方法を調べあげたので、色を変えたい人は以下の設定を触ればよいよ。

Twenty Fourteenを選択する

ダッシュボード > 外観 > テーマ編集

に行って、「Twenty Fourteen: スタイルシート (style.css)」を編集する。cssを変えるだけ、phpは触らなくてよい。赤枠で囲った部分の色を変えていく。

ヘッダー

まずは上から。

847行目あたりに以下のような箇所がある。

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

この赤字の部分を変える。

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

するとこうなる。

サイドバー

3729行目あたりに以下のような箇所がある。

#secondary {
background-color: transparent;
border: 0;
clear: none;
float: left;
margin: 0 0 0 -100%;
min-height: 100vh;
width: 122px;
}

この赤字の部分を変える。

#secondary {
background-color: #0f0;
border: 0;
clear: none;
float: left;
margin: 0 0 0 -100%;
min-height: 100vh;
width: 122px;
}

するとこうなる。

だけど注意！

よく見ると下の方は変わってない！

スクロールするとこうなってる！

これを変えるには3716行目あたりに以下のような箇所がある。

.site:before {
background-color: #000;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
width: 182px;
z-index: 2;
}

この赤字の部分を変える。

.site:before {
background-color: #00f;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
width: 182px;
z-index: 2;
}

するとこうなる。

メイン

この部分の色は簡単。820行目あたりのこの箇所を変える。

.site {
background-color: #fff;
max-width: 1260px;
position: relative;
}

この赤字の部分を変える。

.site {
background-color: #0ff;
max-width: 1260px;
position: relative;
}

するとこうなる。

検索窓

最後は検索の虫めがねマークと、それを押すと出てくる検索窓の設定を変える。

虫めがねマーク

883行目あたりのこの箇所を変える。

.search-toggle {
background-color: #24890d;
cursor: pointer;
float: right;
height: 48px;
margin-right: 38px;
text-align: center;
width: 48px;
}

.search-toggle:hover,
.search-toggle.active {
background-color: #41a62a;
}

この赤字の部分を変える。

.search-toggle {
background-color: #ff0;
cursor: pointer;
float: right;
height: 48px;
margin-right: 38px;
text-align: center;
width: 48px;
}

.search-toggle:hover,
.search-toggle.active {
background-color: #f0f;
}

するとこうなる。