初心者がWPテーマGoranでシンプルなホームページをつくる6【テーマカラーの変更】

つづきです。こんにちは。今回はkalafta.comのテーマカラーを変更します。

さて、Goranなんですが、無料のテーマはどれもだぶんそうですが、少し機能が少ないんですね。足りなかったりする。そりゃそうです。当然ですとも。
はじめEdin、次にGoranが、いいな、と思ったんですけど、テーマカラーが赤なんですよ。赤って。かっこいいけども。やっぱ赤は抵抗ありますって。赤字。ねぇ。
期待を込めてインストールしてみたけども、「テーマカラーの変更」みたいなボタンは無し。

cssの編集をしなくちゃなのか。なんかやりたくない、めんどくさそう、と、思いましたけどね。しょうがないから色々調べてやってみました。
 

cssでテーマカラーの変更

cssについては、知らないこともない、程度の知識はありました。それを踏まえて。

テキストエディタというのがあるらしい。「置き換え」というのができるらしい。指定したコードをまとめてこれまた指定したコードに置き換えてくれる。すごいじゃないかきみ。
つまりテキストエディタで色指定のタグを好きな色に置き換えればいいだけってことだ。テーマカラーだからさ。同じ色がガラッと一気に変えられるってわけさ簡単じゃないか。

こちらのテキストエディタを使わせていただきました。mac用無料日本語「mi」すばらしい。
https://www.mimikaki.net/
WordPressダッシュボードの外観→テーマの編集→右側の項目からスタイルシートを選ぶ。と、窓にスタイルシートのコードが現れます。

このコードをまるごと「mi」の画面にコピペ。すぐさま保存。さらに別名で保存。こちらを編集します。もとのコードは何かの時のために要保存たぶん常識！

で、「mi」のメニュー「検索」から「検索・置き換え」を選択。そこで

#e74f4e※これがもとの赤 と#65879c※変更希望のブルーグレー を置き換える！

やった。

そうしましたら色が入れ替わったこのコードをまたまたまるごとコピーして、先ほどのWordPress「テーマの編集」のスタイルシート窓内にペースト（上書き）する。オッケ。パーペキです。

もう１ヶ所 色の変更しまっす

パーペキだと思ったところが１ヶ所赤が残ってた。モバイル表示にした時に出てくるヘッダの色。これが、テーマカラーの赤と少し違うのだねたぶん。
これを先ほどの要領で下のコードを検索。直接テーマの編集で探し出せればそれでもいい。

.site-header {
background: #b23d3c;

これを下のように書き換えます。

.site-header {
background: #65879c;

やった〜
サ・ヨ・ナ・ラ〜

 
【追記】後日変更しきれてなかった赤色がでてきました(泣)↓

初心者がWPテーマGoranでシンプルなホームページをつくる9【マイナーチェンジ2】