表示速度が速いと評判のWPテーマ「Iconic One」のテーマ色を青から他の色に変える場合などのためのカスタマイズメモです。
とりあえず今回は、青い部分をブラウン系の色に変えるところまで。
子テーマ作り
まずは子テーマを作り、その子テーマを使ってCSSを編集するのがいいんだとか。
子テーマを自分で作るなんてしたことないけど、何とかできそうなのでチャレンジすることにした。
・・・って、何のことはない。
「One-Click Child Theme」っていうプラグインで簡単に子テーマを作ることが出来た。
One-Click Child Theme で子テーマ作り
以下、One-Click Child Theme で子テーマを作った方法のメモ。
１）「One-Click Child Theme」というプラグインをインストール。
２）「外観」⇒「Child theme」と進み・・・
「外観」⇒「テーマの編集」を開けると・・・
こんなのができてました！
One-Click Child Theme プラグインはもう必要ないので、「プラグイン」⇒「インストール済みプラグイン」から削除。
※これによって、インストールした子テーマがなくなっちゃうようなことはありませんでしたよ。
CSSで配色変更
あとは、子テーマのCSSに配色の記述をするだけ・・・
とはいうものの、具体的に何をどうすればいいのか？
親テーマのCSSを参考に
まずは、「外観」⇒「テーマの編集」から親テーマに入り、親テーマのCSSをテキストエディタ（今回はワード）にコピペ。
コピペした親テーマCSS中、「background」と「border」で検索。
使われている青系のコードが「#007cbd」と「#16A1E7」、「#0088d0」「#009cee」「#00A1E0」「#0099ff」ということが分かった。
本文リンク文字色
青色系を一括して他の色に変える場合、本文のリンク文字色も変えてしまいかねない。
本文のリンク文字色は青が一番クリックされやすいと言われているので、ここは青系の色から変えたくないところ。
この点、本文のリンク文字色もデフォルトで青色系だったけど、コードは「#0B91EA」で、上記6つのコードとは別だった。
なので、心配なし（何もしなくてOK）。
本文リンク文字に下線をつける
また、本文リンク文字には下線をつけた方がクリックされやすい。
デフォルトでは下線がついていないので、ここは下線をつけるようにする。子テーマCSSに追記。
また、どちらでもいいと思ったけど、リンク文字をマウスオーバーした時に若干色が変わった方がいいと思ったので追記。
いよいよ色を変える
あとは、順番に青色を他の色に変えて行く。
「#007cbd」と「#0088d0」が濃い（黒に近い）青。
「#16A1E7」「#009cee」「#00A1E0」「#0099ff」はほぼ同じ普通の青。
いっそのこと、ワード上で一括してカラーコードを変更し、親テーマに貼り付けた方が早いなとは思ったけど・・・
/*--#009cee（普通の青１）、#0088d0（濃い青２）もあり--*/
.comments-area article header h4 {
position: absolute;
top: 0;
right: 0;
padding: 6px 12px;
font-size: 12px;
font-weight: normal;
color: #fff;
background-color: #0088d0;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #009cee, #0088d0);
background-image: -ms-linear-gradient(top, #009cee, #0088d0);
background-image: -webkit-linear-gradient(top, #009cee, #0088d0);
background-image: -o-linear-gradient(top, #009cee, #0088d0);
background-image: linear-gradient(top, #009cee, #0088d0);
border-radius: 3px;
border: 1px solid #007cbd;
}
/*--------#007cbd（濃い青１）ここまで-----------*/
/*--------#16A1E7（普通の青２）ここから-----------*/
/*--メニューバー下線--*/
.themonic-nav div.nav-menu > ul {
border-bottom: 5px solid #16A1E7;
}
/*--メニューバー現在ページ背景色--*/
.themonic-nav .current_page_ancestor > a {
background: none repeat scroll 0 0 #16A1E7;
}
/*--よう分からん--*/
article.format-aside .aside {
border-top: 16px solid #16A1E7;
}
/*--------#16A1E7（普通の青２）ここまで-----------*/
/*--------#00A1E0（普通の青３）-----------*/
/*--「検索」背景色--*/
#searchsubmit {
background: #00A1E0;
}
/*--グローバルメニューマウスオーバー時背景色--*/
.themonic-nav li:hover {
display: inline-block;
text-decoration: none;
background:#00A1E0;
}
/*--よく分からん--*/
.bluem{ background-color:#00A1E0; padding:5px; }
/*--------#00A1E0（普通の青３）ここまで-----------*/
/*--------#0099ff（普通の青４）-----------*/
/*--よく分からん--*/
li.bypostauthor cite span {
border: 1px solid #0099ff;
}
/*--よく分からん--*/
li.bypostauthor cite span {
color: #0099ff;
}
/*--よく分からん--*/
.woocommerce span.onsale {
background-color: #0099ff;
}
/*--------#0099ff（普通の青４）ここまで-----------*/
※上記枠内をワードなどにコピペし、濃い青「#007cbd」「#0088d0」、普通の青「#16A1E7」「#009cee」「#00A1E0」「#0099ff」の各カラーコード部分を一括して好みのカラーコードに変えてから子テーマCSSに貼り付けます。
メニューバー背景色の変更
メニューバーのデフォルトでグレーの部分の配色変更は以下の方法でできました。
ブラウザ幅が768px以下の時は表示されない仕様になっています。
.themonic-nav ul.nav-menu, .themonic-nav div.nav-menu > ul, .themonic-nav li {
background: ※好みのカラーコード※;
color:※文字色・好みのカラーコード※;
}
サイドバーウィジェット見出し
「カテゴリ」の文字があるサイドバーウィジェットの見出し。デフォルトではグレーになっていますが、ここは以下の方法で色を変えることが出来ました。
.widget-area .widget-title {
background: ※好みのカラーコード※;
color: ※文字色・好みのカラーコード※;
}
フッター背景色の変更
フッターもデフォルトではグレー。ここも変色したいですよね・・・
footer[role="contentinfo"] {
background: ※好みのカラーコード※;
color: ※文字色・好みのカラーコード※;
}
以上、子テーマのCSSに貼り付ければ、メインの色調が変わるはずです。