00:06
神経質やせ男です。
前回はブラウザ拡張機能を使ってウェブサイトの背景色を変更するシンプルな方法をご紹介しました。
今回はその続編です。
テーマはアマゾンサイトでも背景色や文字色を変更する方法です。
前回の方法は比較的シンプルなホームページでは問題なく動きました。
しかし大手ECサイトのように、
複雑な構造を持つサイトではなかなか思った通りに背景色が変わらないことがあります。
そこで使うのがCSSのExclamation Importantという仕組みです。
これは簡単に言うと、他の設定よりもこの設定を優先してくださいとブラウザに伝える命令です。
今回のプログラムではボディ、リブ、ヘッダー、メインといった要素の背景色を強制的に青色に変更しています。
さらに全ての文字色をピンク色に変更しています。
ここでポイントになるのがリブという構造です。
最近のウェブサイトはこのリブを使って画面を構成しています。
そのためボディだけ色を変えても実際には多くの部分が元の色のまま残ってしまいます。
ここでリブにも同じ設定を適用し、より広範囲に背景色が反映されるよう工夫しています。
またこの設定はJavaScriptからスタイルタグを生成し、HTMLのヘッドタグへ追加することで実現しています。
普段は別ファイルで管理するCSSをプログラムから動的に追加しているわけですね。
実際に動かしてみるとAmazonや楽天でも見た目が大きく変わります。
ただし、Windowsのダークモードのように美しく整うわけではありません。
企業サイトは膨大な時間と労力をかけてデザインされていますので、それを一瞬で完璧に置き換えるのはなかなか難しいのです。
逆に言えば、普段何気なく見ているウェブサイトにはそれだけ多くの工夫が詰め込まれているということでもあります。
今回は背景色変更機能を強化して、ふたつのウェブサイトにも対応する方法をご紹介しました。
次回はブラウザ上に通知のポップアップを表示する拡張機能について解説する予定です。
最後までお聞きいただきありがとうございました。
本日の内容は以上となります。
最後までお聞きいただきありがとうございました。
最後にAmazon Kindleで発売中の電子書籍のお知らせです。
キレイごとゼロの別居介護をリアルに環状ではなく、システムとExcelで立ち向かった瞬間、
手取り23万円のエンジニアがExcel1枚で実家の破綻を防いだ話、
そして実家の保守運用を行なすための時間を圧倒的にひねり出す技術を書いた会社公認爆速仕事術PC魔改造、
この2冊が現在Amazon Kindleにて絶賛発売中です。
03:01
どちらもKindle Unlimited読み放題の対象となっていますので、
会員の方は追加料金なしですぐにお読みいただけます。
音声を聞いた後にスマホの画面の下にある概要欄のリンクからぜひチェックしてみてください。
それではまた次回の配信でお会いしましょう。