Google Chrome PCサイトにて、広告ブロック効果の高い「uBlock Origin」を使用していると、広告のないWeb サイトのデザインが崩れてしまう現象が生じていました。該当サイトの広告ブロックを解除してもデザインは戻らず、しばらく放置していたのですが、設定の変更でデザインの崩れは解消。
事例としては多くないと思われと思いますが、「uBlock Origin」の使用により サイトのデザインが崩れた事例、デザイン崩れの課題を解消した手順を記載します。
デザインが崩れたサイトの事例
デザインが崩れたサイトは、私のサイトの管理画面。WordPressで構築したサイトですが、WordPressサイトではなく、広告のない他の管理サイトです。
▼上が本来のデザイン、下が「uBlock Origin」の利用により、デザインが崩れたものです。左側にメニュー項目のみが表示され、メニューを押下しても、また、広告ブロックを解除しても元のデザインに戻りません。
デザイン崩れの課題解消の設定
以下の画像は、該当のサイトを開いた際に表示される通知です。広告表示のないサイトですが（広告を管理するサイトです）、「Peter Lowe’s Ad and tracking server list」に当該サイトが掲載されており、サイトの読み込みを防止したようです。
「Peter Lowe’s Ad and tracking server list」での読み込み防止への対応手段は以下です。なお、上の画像「Peter Lowe’s Ad and tracking server list」を押下すると海外サイトに遷移するのですが、海外サイトで対応できるか否かは未確認です。
▼uBlock Origin アイコンの右クリックで表示される画面にて、「オプション」を押下します。
▼以下の画面に遷移しますので、上の見出し「フィルターリスト」を表示します。中ほどに「Peter Lowe’s Ad and tracking server list」がありますので、チェックを外し無効化したうえで、左上の「変更を適用」を押下します。デザインが崩れたサイトを更新すると、デザインの崩れは解消となります。
なお、「Peter Lowe’s Ad and tracking server list」の詳細は未確認ですが、該当のサイトのみ無効化されたものではなく、全般が無効化されることに留意ください。
