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

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

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

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

初心者がWPテーマGoranでシンプルなホームページをつくる【目次】
※各記事へ移動します。
1【使用したプラグイン】
2【ページとメニューの作成】
3【フロントページのカスタマイズ】
4【ウィジェットエリアのカスタマイズ】
5【コンテンツページの編集】
6【テーマカラーの変更】*この記事です*
7【URLの変更】
8【マイナーチェンジ】
9【マイナーチェンジ2】
10【CSSの追加とサイトのSSL化と…】

cssでテーマカラーの変更

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

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

こちらのテキストエディタを使わせていただきました。mac用無料日本語「mi」すばらしい。

WordPressダッシュボードの外観→テーマの編集→右側の項目からスタイルシートを選ぶ。と、窓にスタイルシートのコードが現れます。

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

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

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

やった。

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

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

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

.site-header {
background: #b23d3c;

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

.site-header {
background: #65879c;

書き換え後(モバイル表示)

書き換え後(モバイル表示)

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


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

こんにちは。昨日無理したらありえないほど体が痛いです。よし! 実は製品ページ(Products)をちょっとちゃんとしようと思いまして、...
スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レクタングル(大)広告