[Ha-Basic] Only the color elements in the theme can be customized with CSS

【ha-Basic】テーマ内のカラー要素のみをCSSでカスタマイズできるようにしました

公開日：2019年5月14日更新情報

ある程度完成したので私の管理しているいくつかのサイト（１ドメインでサブディレクトリにインストールしているものがあるので結構な数があります）で実際に【ha-Basic】テーマを使用するようになりました。

そしてそこで起こりうる問題などを少しずつ改善してブラッシュアップをさせています。
※残念ながら今のところ使用いただいている方がいませんので都度テーマファイルを最新にしていっています。

そこで、色を変更しようと試みたのですが・・・どうにもめんどくさい！！（作者としてあるまじき発言でした・・）

単純に色を変えるだけなのにデベロッパーツールで要素を見て追加CSSへ転記して・・・これどんなテーマでも当たり前のことなのですが、カラー変更のカスタマイザーを持たないことにしている【ha-Basic】でこれを行うのは本当に大変です。とっても使う方に不親切だと実感しました。

何とかもう少し楽にならないかなぁ・・・・と思慮した結果、そうだ！！カラー部分だけをカスタマイズできるようにすればいいんだ！！という結論に至りました。

テーマCSSから色のみを変更できるようにしました

テーマにはデザイン要素を指定するため「style.css」というファイルがあるのはご存知ですね。そして、そこには文字の大きさやら太さやらいろいろな要素がセレクタ（場所）ごとにごちゃごちゃと書かれています。

これを色の部分だけ見つけて編集していくのはとっても大変・・・ということで、「style.css」から色の部分だけを抜き出した別のCSSを用意しました。

テーマファイルの中にある「a-color-style.css」というのがそうです（テーマ編集からも表示・編集ができます）。

ここには【ha-Basic】で色を指定している部分だけが書かれていますので、それを編集すれば簡単に色の変更ができるというちょっと便利な仕組みです。

【ha-Basic】テーマのCSS読み込み順は以下の通りです

優先順は逆になりますので、最終的に同じセレクタであれば「a-color-style.css」のものが最優先で適用されます。

これで色だけを簡単に編集できるようになったわけですが、ルンルン気分でカラーコードを変更してしまうと「やっぱり元に戻そう」という際に元の状態が分からなくなってしまいます（当たり前ですけど）。

それじゃあもう一回「a-color-style.css」を上書きしてやり直すしかないのか・・あーめんどくさ！！

いえいえそんなことはありません。変更する前にちょっと工夫する癖をつけるだけで簡単に元に戻せるんです。一部を例に説明しますね。
※この方法はすべてのCSSで使えます（ソースコードはやり方が異なるものもあるので今回はCSSに限定します）

「a-color-style.css」の冒頭にあるhタグの文字色

/********** 見出しタグ **********/
h1, h2, h3, h4, h5, h6 {
color:#333;
}

「color:#333;」というのが文字の色を少し薄めの黒にしてねという指示なのですが、直接変更する前に一行下へコピーしてコメント（適用されないよう）にします。

実際にはこんな感じです

/********** 見出しタグ **********/
h1, h2, h3, h4, h5, h6 {
color:#333;
/* color:#333; */
}

同じものを２行にして、１つの前後にそれぞれ「/* 」「 */」を付けます。これをコメントアウトといいます。その後コメントになっていない方のカラーコードを変更すれば、元の状態を保存したまま変更ができるようになり、いざ元に戻す場合にも元に戻すだけ！！これならわざわざ元の色を調べる必要もありませんね。

上の優先順も合ってるし、カラーコードも合ってるのに表示が変わらない、そんな時はブラウザのキャッシュをクリアをしてみてください

￥2,398

(2021年9月20日 09:02 GMT +09:00 時点 - )

￥1,465

(2021年9月20日 09:02 GMT +09:00 時点 - )

この記事を書いた人: ひまあーと（管理人）
☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。