Twenty Fourteen - Child02

子テーマの色に関するカスタマイズ

Twenty Fourteen - Child02

Pocket

Twenty Fourteen の色に関するカスタマイズ

色に関するカスタマイズはスタイルシートである style.css という書類に記載して変更していきます。親テーマのスタイルシートをインポートした場合は追記していきましょう。または、親テーマをコピーした場合は該当箇所を上書きしましょう。

トップバーの背景色を変更する

トップバーの背景色に関する記載は親テーマスタイルシートの817行目の 4.0 Header という項目の中にあります。以下の該当箇所(833行目)のカラーコードを変更すればトップバーの背景色を変更することが可能です。

親テーマの style.css

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 */

/* Ensure that there is no gap between the header and
   the admin bar for WordPress versions before 3.8. */
#wpadminbar {
	min-height: 32px;
}

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

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

子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/*
Theme Name: My Child Theme
Theme URI: http://wordpresscollege.org/customize/
Author: KOMATSUBARA, Masato
Author URI: http://wordpresscollege.org/customize/
Description: Child theme for the Twenty Fourteen for WordPress
Template: twentyfourteen
Version: 0.1.0
*/

/* 親テーマのスタイルシートを読み込む */
@import url("../twentyfourteen/style.css");

/* トップバーの背景色を変更する */
.site-header {
	background-color: #FA8072;
}

このようにトップバーの背景色が変わります。

トップバーの背景色を変更する

検索用トグルスイッチの背景色を変更する

通常時

検索用トグルスイッチの背景色に関する記載は親テーマスタイルシートの858行目の Search in the header という項目の中にあります。以下の該当箇所(861行目)のカラーコードを変更すれば検索用トグルスイッチの背景色を変更することが可能です。

親テーマの style.css

/* Search in the header */

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

子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/* トップバーの背景色を変更する */
.site-header {
	background-color: #FA8072;
}

/* 検索トグルの背景色を変更する */
.search-toggle {
	background-color: #B6B6B6;
}

このように検索トグルの背景色が変わります。

検索トグルの背景色を変更する

hover および active時

親テーマ Twenty Fourteen のスタイルシートでは hoveractive では同じ背景色に変化するように設定されていますが、今回は hover のみ背景色が変化し active では通常時に戻るように設定します。
hoveractive に関する記載は親テーマスタイルシートの858行目の Search in the header という項目の中にあります。以下の該当箇所(872行目)のカラーコードを変更すればhover および active時の検索用トグルスイッチの背景色を変更することが可能です。

親テーマの style.css

/* Search in the header */

.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;
}

子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/* 検索トグルの背景色を変更する */
.search-toggle,
.search-toggle.active {
	background-color: #B6B6B6;
}

.search-toggle:hover {
	background-color: #838383;
}

検索窓の背景色を変更する

検索窓の背景色に関する記載は親テーマスタイルシートの858行目の Search in the header という項目の中にあります。以下の該当箇所(898行目)のカラーコードを変更すれば検索窓の背景色を変更することが可能です。

親テーマの style.css

.search-box {
	background-color: #41a62a;
	padding: 12px;
}

子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/* 検索窓の背景色を変更する */
.search-box {
	background-color: #B6B6B6;
}

このように検索窓の背景色が変わります。
検索窓の背景色を変更する

サイドバーの背景色を変更する

左側のメインサイドバーの背景色に関する記載は親テーマスタイルシートの2018行目の 7.0 Sidebars という項目の中にあります。以下の該当箇所(2025行目)のカラーコードを変更すればメインサイドバーの背景色を変更することが可能です。

親テーマの style.css

/**
 * 7.0 Sidebars
 * -----------------------------------------------------------------------------
 */

/* Secondary */

#secondary {
	background-color: #000;
	border-top: 1px solid #000;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	clear: both;
	color: rgba(255, 255, 255, 0.7);
	margin-top: -1px;
	padding: 0 10px;
	position: relative;
	z-index: 2;
}

子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/* 検索窓の背景色を変更する */
.search-box {
	background-color: #B6B6B6;
}

/* Secondary Sidebarの背景色を変更する */

#secondary {
	background-color: #B6B6B6;
	border-top: 1px solid #B6B6B6;
}

Secondary Sidebarの背景色を変更する

このようにメインサイドバーの背景色が変わります。しかし、このままではメインサイドバーの下の部分はデフォルトのまま黒色になってしまします。
メインサイドバーの下の部分も同色にするために以下のコードをさらに追記します。

/* Secondary Sidebar*/

#secondary {
	background-color: #B6B6B6;
	border-top: 1px solid #B6B6B6;
}

#page:before{
	background:#B6B6B6;
}

メインサイドバーの背景色がすべて変わりました。
メインサイドバーの背景色がすべて変わりました

ナビゲーションバーのカスタマイズ

現在のページを表すカラーを変更する

最上部にあるナビゲーションバーの現在のページを表すカラーに関する記載は親テーマスタイルシートの913行目の 5.0 Navigation という項目の中にあります。以下の該当箇所(944行目)のカラーコードを変更すればメインサイドバーの背景色を変更することが可能です。

親テーマの style.css

.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a {
	color: #55d737;
	font-weight: 900;
}

子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/* Current Menuの文字色を変更する */

.site-navigation .current-menu-item > a {
	color: #838383;
}

このように現在のページを表す文字色が変わります。
このように現在のページを表す文字色が変わります

ナビゲーションバーの背景色を変更する

ナビゲーションバーの背景色を変更する
最上部にあるナビゲーションバーの背景色に関する記載は親テーマスタイルシートの該当箇所(3380行目、3409行目、3415行目)の三箇所のカラーコードを変更すればメインサイドバーの背景色を変更することが可能です。

親テーマの style.css

	.primary-navigation ul ul {
		background-color: #24890d;
		float: left;
		margin: 0;
		position: absolute;
		top: 48px;
		left: -999em;
		z-index: 99999;
	}

	.primary-navigation li li {
		border: 0;
		display: block;
		height: auto;
		line-height: 1.0909090909;
	}

	.primary-navigation ul ul ul {
		left: -999em;
		top: 0;
	}

	.primary-navigation ul ul a {
		padding: 18px 12px;
		white-space: normal;
		width: 176px;
	}

	.primary-navigation li:hover > a,
	.primary-navigation li.focus > a {
		background-color: #24890d;
		color: #fff;
	}

	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul li.focus > a {
		background-color: #41a62a;
	}

子テーマの style.css に下記コードを追記するとインポートされた親テーマのスタイルシートの設定より優先されます。

子テーマの style.css の入力例

/* Current Menuの文字色を変更する */

.site-navigation .current-menu-item > a {
	color: #838383;
}

/* Navigationbarの背景色を変更する */

@media screen and (min-width: 783px) {
	.primary-navigation ul ul {
		background-color: #FA8072;
	}

	.primary-navigation li:hover > a,
	.primary-navigation li.focus > a {
		background-color: #B6B6B6;
	}

	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul li.focus > a {
		background-color: #B6B6B6;
	}
}