広告ブロック「uBlock Origin」の使用により、サイトのデザインが崩れた事例と課題解決の方法 | Win And I net

広告 当サイトではアフィリエイト広告を利用しています。

広告ブロック「uBlock Origin」の使用により、サイトのデザインが崩れた事例と課題解決の方法

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」の詳細は未確認ですが、該当のサイトのみ無効化されたものではなく、全般が無効化されることに留意ください。