TwentyFourteenの配色を子テーマで変えたい

WordPress4.x系で現状デフォルトのテーマとなっているTwentyFourteenは、
レスポンシブデザインに対応していたり、cssが丁寧に構造化されていてとても改造しやすいテーマです。

AMBも2014/09/22現在、このTwentyFourteenをベースに作られています。
で、最近人に頼まれてWebサイトをWordpressで作成する機会があったのですが、
基本色や、ボタンのマウスオーバー時の色等を変えたいと思い、色々といじりました。

思いの外面倒臭かったので、子テーマのcssでまとめていじった部分を記事に貼り付けておきたいと思います。

その前に

色々調べていたら、「Anjirai」というTwentyFourteenの配色をがっつりいじれるプラグインが公開されていました。

https://wordpress.org/themes/anjirai

僕は結構手遅れだったのでアレですが、これから始める型はこちらの方が良かったりすることもあるかもしれません。

子テーマ用css

概ね以下の様に上書きすれば、大体の場所の配色を上書きできるはずです。
仮ですが、以下の様に配色を決めています。

色の役割 デフォルト カスタマイズ
ベース色 #000 #941e2b
サブ色1 #24890d #fbb305
サブ色2 #41a62a #eabaaf
サブ色3 #55d737 #eae577

 


/* -----------------------------------------------------
ベースカラー設定 #000 -> #941e2b
臙脂色
----------------------------------------------------- */
.site-header {
background-color: #941e2b;
}
.menu-toggle {
background-color: #941e2b;
}
#secondary {
background-color: #941e2b;
}
.content-sidebar .widget_twentyfourteen_ephemera .widget-title:before {
background-color: #941e2b;
}
.site-footer {
background-color: #941e2b;
}
.site:before {
background-color: #941e2b;
}

/* -----------------------------------------------------
サブカラー
黄色系
----------------------------------------------------- */

/* #24890d -> #FBB305 */
a {
color: #FBB305;
}
::selection {
background: #FBB305;
}
::-moz-selection {
background: #FBB305;
}
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
background-color: #FBB305;
}
.search-toggle {
background-color: #FBB305;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
background: #FBB305;
}
.hentry .mejs-overlay:hover .mejs-overlay-button {
background-color: #FBB305;
}
.paging-navigation .page-numbers.current {
border-top: 5px solid #FBB305;
}
.widget button,
.widget .button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
background-color: #FBB305;
}
.widget_calendar tbody a {
background-color: #FBB305;
}
.content-sidebar .widget a {
color: #FBB305;
}
.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
background-color: #FBB305;
}
.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
background-color: #FBB305;
}
.slider-direction-nav a:hover {
background-color: #FBB305;
}

/* #41a62a -> #eabaaf */
a:active,
a:hover {
color: #eabaaf;
}
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #eabaaf;
}
.search-toggle:hover,
.search-toggle.active {
background-color: #eabaaf;
}
.search-box {
background-color: #eabaaf;
padding: 12px;
}
.site-navigation a:hover {
color: #eabaaf;
}
.entry-title a:hover {
color: #eabaaf;
}
.entry-meta a:hover {
color: #eabaaf;
}
.cat-links a:hover {
color: #eabaaf;
}
.entry-meta .tag-links a:hover {
background-color: #eabaaf;
}
.entry-meta .tag-links a:hover:before {
border-right-color: #eabaaf;
}
.entry-content .edit-link a:hover {
color: #eabaaf;
}
.hentry .mejs-controls .mejs-button button:hover {
color: #eabaaf;
}
.page-links a:hover {
background: #eabaaf;
}
.post-navigation a:hover,
.image-navigation a:hover {
color: #eabaaf;
}
.paging-navigation a:hover {
border-top: 5px solid #eabaaf;
}
.comment-author a:hover,
.comment-list .pingback a:hover,
.comment-list .trackback a:hover,
.comment-metadata a:hover {
color: #eabaaf;
}
.comment-reply-title small a:hover {
color: #eabaaf;
}
.widget a:hover {
color: #eabaaf;
}
.content-sidebar .widget a:hover {
color: #eabaaf;
}
.content-sidebar .widget input[type="button"]:hover,
.content-sidebar .widget input[type="button"]:focus,
.content-sidebar .widget input[type="reset"]:hover,
.content-sidebar .widget input[type="reset"]:focus,
.content-sidebar .widget input[type="submit"]:hover,
.content-sidebar .widget input[type="submit"]:focus {
background-color: #eabaaf;
}
.content-sidebar .widget .widget-title a:hover {
color: #eabaaf;
}
.content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover {
color: #eabaaf;
}
.site-info a:hover {
color: #eabaaf;
}
.featured-content a:hover {
color: #eabaaf;
}
.slider-control-paging a:hover:before {
background-color: #eabaaf;
}
/* #55d737 -> #EAE577 */
button:active,
.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
background-color: #EAE577;
}
.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: #EAE577;
}
.widget input[type="button"]:active,
.widget input[type="reset"]:active,
.widget input[type="submit"]:active {
background-color: #EAE577;
}
.content-sidebar .widget input[type="button"]:active,
.content-sidebar .widget input[type="reset"]:active,
.content-sidebar .widget input[type="submit"]:active {
background-color: #EAE577;
}

さらに、タグの属性指定だけでなく、画面解像度ごとに処理を分ける
メディアクエリにも色の指定があります。どこかというと、ナビゲーションバーのボタンです。
スマートフォン等の小さな画面ではここは表示されていませんが、PC等の大画面の場合は
表示されるようになります。メディアクエリに関しては下記の様に指定しました。


@media screen and (min-width: 673px) {
/* サブカラーを変更 #41a62a -> #eabaaf */

.primary-navigation ul ul a:hover,
.primary-navigation ul ul li.focus > a {
background-color: #eabaaf;
}
.primary-navigation li:hover > a,
.primary-navigation li.focus > a{
background-color: #eabaaf;
}
/* サブカラーを変更 #41a62a -> #eabaaf */
.secondary-navigation ul ul a:hover,
.secondary-navigation ul ul li.focus > a {
background-color: #eabaaf;
}
.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #eabaaf;
}

}

とりあえずこれで、思った配色にする事ができました。
子テーマも色を一括して変えられたりすると便利なんだけどなぁ。


コメントを残す

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