CSS変数で開発カテゴリだけカラーを変えてるんだけど、
それじゃ満足できない！だって汎用性がないから！！
やるっきゃない！JavaScriptでカテゴリごとにカラー変えよう！！
Contents
CSS変数の値を条件分岐で
まちるだ
ワトソン
まちるだ
ワトソン
まちるだ
一応開発段階だからあまり大々的には使わない方がいいみたいなんだけど、CSS変数(CSS Variables(カスタムプロパティ))、もうちょっとだけ意味のあるものにしたくて。
ワトソン
まちるだ
ワトソン
まちるだ
JavaScriptで書き換えるには
まずですね、JavaScriptは現在勉強中なので詳しい説明はしづらいのですが、簡単に言いますと、
JavaScriptで開発カテゴリかどうか判断し、開発カテゴリだったら変数「–main-wa-color」に「#d7ebfe」をセットする、
タガタメ(モンハン)カテゴリだったら「–main-wa-color」に「MistyRose」をセットする、って感じです。
「–main-wa-color」については下記記事をご覧ください。
CSSで変数を使いたいと思わんかね MistyRoseがどうして#〇〇〇じゃないかっていうと、なんとなくです！
下記をメモ帳に張り付けて、とりあえずわかりやすいように、myscript.jsという名前にして、UTF-8N(UTF-8)で保存します。
// 外部JavaScriptファイル
/*
自分カスタマイズ用
*/
var ele = document.getElementById('#top');
if(ele.classList.contains('categoryid-33') === true ){
ele.style.setProperty('--main-wa-color','MistyRose');
}else if(ele.classList.contains('categoryid-16') === true ){
ele.style.setProperty('--main-wa-color','MistyRose');
}else if(ele.classList.contains('categoryid-43') === true ){
ele.style.setProperty('--main-wa-color','#d7ebfe');
};これを作り上げるのに、2日かかりました。
①var ele = document.getElementById(‘#top’);
プログラミングでの「=」は、「同じ」という意味では無いので注意しよう！左辺に右辺を代入(セット)するって意味だよ。
なのでこれは、eleという変数に、「document.getElementById(‘#top’)」をセットしています。
最初の「var」は変数に値をセットするときに、「セットしまっせ！」って宣言するため必要なもの。最後の「;」は「。」ってことですね。
idに「#top」がついてるものの確認って感じかなー。Xeoryでいうとbodyタグのことだね。
変数についてはとりあえずはしょります。
②if(ele.classList.contains(‘categoryid-33’) === true )～
「ele.classList.contains」の「ele」は、先ほどの変数です。なので、
document.getElementById(‘#top’).classList.contains
と全く同じ意味になります。
意味は、(idに「#top」がついた)bodyタグに「categoryid-33」のclassがついてるページだったら、って感じです。
③ele.style.setProperty(‘–main-wa-color’,’MistyRose’);
上の続きで、(idに「#top」がついた)bodyタグに「categoryid-33」のclassがついてるページだったら、CSS変数「–main-wa-color」の値に「MistyRose」を上書き！
4行目以降は、「categoryid-33」の部分が違うだけで、意味は同じです。
自分は「document.getElementById(‘#top’)」でbodyタグの雰囲気を醸し出しているのに気づけなくて一度寝かせました。
作ったjsファイルをフッターで読み込む
FTPから子テーマ直下にmyscript.jsを保存して、footer.phpの「</body>」の真上に
<script type="text/javascript" src="https://sekkakudakara.com/wp-content/themes/xeory_base-child/myscript.js"></script>
を追記しました。パスはお主のテーマに合わせてくれよな！
FTPについてはこちら
フリーのFTPソフトといえばFFFTPでしょ！！ CSS変数の設定
さらにCSS変数を初めて使った回のCSSを少し書き換えます！
:root {
--main-wa-color: #fffacd;
}
body.categoryid-43, body.categoryid-33, body.categoryid-16 {
background-color: var(--main-wa-color);
}rootで薄黄色を先に入れておいて、そのあと、カテゴリそれぞれにCSS変数を入れてます。
その結果！！
はい、ライトローズさん出現！！
まとめ
まちるだ
ワトソン
まちるだ
ワトソン
まちるだ
ワトソン
まちるだ
ワトソン
