XEORY BASEのヘッダーの色を変える

2017-10-01

ワードプレスでブログを書くようになってから約2週間程経ちました
流石にいつまでもトップページが真っ白って訳にもいかないので、カスタマイズしようと思い、参考になるサイトを色々と見て回ったのですが、大まかなカスタマイズの仕方は分かってもそれがなかなか自分のブログに反映させる事ができずに困っていました
ただ、どうにかしてヘッダーの色を変える事が出来るようになったのでその方法について書いてみたいと思います

XEORY BASEでstyle.cssを編集する際の注意点

最初は単純に子テーマにstyle.cssというのを用意して

body.color #header うんちゃら

という風にしてやればいいんだろうくらいに思っていました
もちろんこの方法でも何の問題もないのですが、初心者には子テーマって何?って所から始まってしまうんですよね

外観―CSS編集から編集しよう

Cssの編集をしたい場合、Xeory Baseには便利な機能がついています
外観―CSS編集と進めることで出てくるこの画面

この左側の部分に編集したいコードを書き込めばいいだけというなんとも初心者に優しいテーマとなっています

初期設定のカラースキームに注意

XEORY BASEを使用するにあたって最初に初期設定をしたと思います
その際カラースキームを選択したと思いますが、どの色を選択したかによってコードの記入の仕方が変わります

私の場合左から2番目の”緑”を選んでいます
(ちなみに私はこの選択がヘッダーの色を指定する箇所だと思ってました マウスポインタの色の指定だったんですね)

この際ヘッダーの色を変えるためのコードは

body.color #header

ではなく

body.color01 #header

としないと色が反映しません
緑が01、赤が02、オレンジが03、ピンクが04です

ですので私が選んだ緑に対応するコードは

body.color01 #header {
background: #ff4500;
}

としてみました

#ff4500は色のコードです
私はとりあえずオレンジレッドを選びました
ブログのタイトルがタイトルですしね

これで

無事にヘッダーの色を変更することが出来ました

ブログタイトルの文字の色を変更

やっとヘッダーの色を変更することが出来ました
ついでにブログタイトルの文字の色も白へ変更しようと思います
赤十字がそうであるように赤と白は色のバランスがいいですからね

body.color01 #header #logo a {
color: #ffffff;
}

これを外観―CSS編集の部分に追加します

これでブログタイトルの文字が白に変わりました

まとめ

XEORY BASEでデザインを変更しようとするならbody.color01のように初期設定で選択したカラースキームの色の名前を指定する
コードは外観―CSS編集から入力する事
以上2点に注意することで(私のような人でも)変更が可能となります

初心者の私にはここに到達するまでだいぶ時間がかかってしまいました・・・

Word Press

Posted by ペペ