いつもお世話になっております。
少々長くなりますがよろしくお願いします。
#追記
1回目:大きな勘違いをしており、こちらの指定方法はcookieではなくブラウザへの一時的な保存であるlocalStorageであることが判明しました。
当方が指定しているlocalStorageからCookieへの指定方法を探しております。
2回目:どうやらJavascriptで指定する以上は遅延が発生するのは仕方がないということが分かりました。対策としてPHPへの切り替えを検討しております。
当方、これからPHPを学ぶのでこちらのコードをPHPに切り替えた場合の具体的な指定方法がありましたら教えていただけると嬉しいです。
前回の質問から得た回答について。
前回、Cookieを使いてサイトを黒色に切り替えた際、元の白色が一瞬だけ表示されることで画面がチカチカするのを防ぎたいという趣旨の質問をさせていただき、Cookieの設定値を参照してbodyタグにClass値を挿入するという方法を提示して頂きました。
【前回の質問】jQueryでCSSを切り替えると、画面を更新する毎に画面が点滅してしまう件について。 - teratail
以下は回答の引用です。
最初から黒にしておく等の対策はありますが、そうすれば今度は白背景の場合に黒から白に点灯する訳で辛いですね。
ブラウザ自体のデフォルト背景色が白である限りどうあがいても最初の一瞬が白背景になるのは仕方のないことです。
例えbodyタグの直下にCookieを読み込んでbodyタグをネイティブJSを使って速攻でクラスを付与したとしても、
CSS読み込み時間等で極一瞬だけ白背景が差し込まれるのは回避出来ません。
特にjQueryライブラリを読み込んでいるならなおさらで、min.jsでも100KBをDLし終わるまでは白背景が続くので回避策は絶望的です。
とはいえ、許容範囲内になる可能性があるので試してみる価値はあると思います。
おまけ: 一般的な対策
PHP等の動的にHTMLを返すWebサーバを構築するのが一般的です。
WebサーバというのはCookieを読み書き出来ますから、Cookieの設定値を参照して、bodyタグのClass値を出し分ければ今回の質問のような問題は一発で解決出来るでしょう。
もし上記の回避策でもチカチカして辛い(許容範囲外だった)とか、
scriptタグの位置がぐしゃぐしゃになるから無理だとか…などの理由で無理なら動的なWebサーバ構築を目指してください。
というか、今更ながらタグのWordPressを見つけました。
テンプレートファイル弄るのが根本的な解決になるでしょう。
bodyタグを見つけてこのように修正すれば解決することでしょう。
問題の糸口が見えたので解決済みとさせて頂きましたが、何度試してもCookieの値を上手く取得することができず症状を解決することができないため、改めて質問をさせて頂きました。
※追記
1回目:こちらCookieではなくlocalStorageを利用していることが判明しました。
2回目:javascriptを用いた指定方法ではCookieを用いても、遅延が発生するのは仕方のないことであると分かりました。
Cookieを用いたWebサイトの例。
ネットでCookieを用いた例を調べてみますと、やはり僕と同じようにCookieを利用した設定に切り替わるまで一瞬のタイムラグが発生しているWebサイトが多く見受けられました。
しかし、中には読書サイトである「カクヨム - https://kakuyomu.jp」さんのように、ユーザーがサイトを黒色に切り替えた後にWebサイトを更新しても、ベースとなる白色が表示されることなく黒色として表示されるような例もあり、同じような動作を期待して試行錯誤を繰り返していました。
当方が利用しているコード。
以下のコードは様々な方のコードを参考にしながら、bodyにクラス名を付けることでサイトの色を切り替えるよう設定したものです。
前回の質問に回答して頂いたHTMLの指定方法以外、問題なく作動するものとなっています。Cookieも問題なく利用できているようです。
※追記:CookieではなくlocalStorageでした。
しかし、サイトを更新すると一瞬だけ(通信速度が遅いときだと0.5秒〜1秒間くらい)白色が表示されてから、黒色へと変更が適用されるので、これをどうにかできないものかと試行錯誤しております。
//jQuery jQuery(document).ready(function($) { var color = "color"; var colordata = localStorage.getItem(color); if(colordata == "black"){ $('body').addClass("black"); $("#color .black").addClass("active"); }else{ $('body').removeClass("black"); $("#color .black").removeClass("active"); } $("#color li").click(function(){ $("#color li").removeClass("active"); var fontColor = $(this).attr("class"); $(this).addClass("active"); if(fontColor == "black"){ $('body').addClass("black"); colordata = "black"; localStorage.setItem(color,colordata); }else{ $('body').removeClass("black"); colordata = "white"; localStorage.setItem(color,colordata); } }); });
body{ color:#444; background::#fff; } body.black{ color:#fff; background:#444; }
<!-- 当方の場合、この指定方法では取得ができませんでした。 --> <body class="<?= htmlspecialchars($_COOKIE['color']) ?>">
Cookieに関して学び始めたのはつい最近のことで、まだまだ知識が浅いかもしれません。具体的なコードや指定方法を参照しながらご指摘していただけると理解が深まります。
また、まったく違う方法でも同じように動作するものがあれば記載していただいて構いませんので、どなかたお答えいただけると嬉しいです。
※追記
1回目:こちらのコードをCookieを利用して保存し、bodyタグにClass値を出し分ける方法を探しております。localStorageがまったく別物であることが判明したので、改めてCookieでの指定方法を学んでいるところですが、どなたか具体的なコードがありましたら教えていただけると嬉しいです。
2回目:Javascriptを用いた指定方法ではCookieを用いても遅延が発生するのは仕方のないことであることが分かりました。
そのため、現在はPHPでの指定方法に切り替えることを検討しておりますが、具体的な指定方法がありましたらご提示いただけると嬉しく思います。
回答2件
あなたの回答
tips
プレビュー