SANGOになれた喜びをかみしめています

JavaScriptでCSS変数の値を書き換える!

CSS変数で開発カテゴリだけカラーを変えてるんだけど、

それじゃ満足できない!だって汎用性がないから!!

やるっきゃない!JavaScriptでカテゴリごとにカラー変えよう!!

CSS変数の値を条件分岐で

まちるだ

新生吹き出し、良好だね。
そうみたいですね、なかなか苦労されたとか。

ワトソン

まちるだ

そうなのよ、ショートコードの書き方は割と見かけるんだけどさ、まさか改行がおまけに付いてくるなんて聞いてなかったからさ。
ところで今日は何を?

ワトソン

まちるだ

もうちょい食いつけや。

一応開発段階だからあまり大々的には使わない方がいいみたいなんだけど、CSS変数(CSS Variables(カスタムプロパティ))、もうちょっとだけ意味のあるものにしたくて。

今でも意味はあるんじゃ?

ワトソン

まちるだ

開発カテゴリとワトソンの吹き出しの色を一気に変えたいときは意味があるけど、そんな日はきっと来ない。
確かに。

ワトソン

まちるだ

だから、JavaScriptの条件分岐を使って、カテゴリごとに変数のカラーを書き換えようと思う!!

JavaScriptで書き換えるには

まずですね、JavaScriptは現在勉強中なので詳しい説明はしづらいのですが、簡単に言いますと、

JavaScriptで開発カテゴリかどうか判断し、開発カテゴリだったら変数「–main-wa-color」に「#d7ebfe」をセットする、

タガタメ(モンハン)カテゴリだったら「–main-wa-color」に「MistyRose」をセットする、って感じです。

「–main-wa-color」については下記記事をご覧ください。

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についてはこちら

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変数を入れてます。

その結果!!

はい、ライトローズさん出現!!

まとめ

まちるだ

しんどい。
けっこう時間かかりましたね。

ワトソン

まちるだ

色々初歩的なミスとかも相まってぜんっぜん解決しなかった。
そこまで苦労したのにちょっと言いづらいですけど・・・後からjsで変数セットしなおしてるから、一度黄色い背景出ちゃいますね。

ワトソン

まちるだ

そぉぉぉおおおなのよ。でもね、大事なのはjsでCSS変数の書き換えができたって事実ね。未来につながるから。
確かに。これ背景だけCSS変数使わないやつにしたら直りそうですけど・・・直すんですか?

ワトソン

まちるだ

・・・。それじゃーお疲れさまでしたーーー!!!!!
直すんだ・・・

ワトソン

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください