ワードプレスでブログを書くようになってから約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点に注意することで(私のような人でも)変更が可能となります
初心者の私にはここに到達するまでだいぶ時間がかかってしまいました・・・