この記事では、Androidブラウザの拡張機能で、サイト別にCSSをカスタマイズする方法を解説します。
Androidで拡張機能を動かせるブラウザはいろいろありますが、本記事では以下2ブラウザを例に説明します。
Microsoft Edge- Firefox
Chromeブラウザは拡張機能に非対応のため、使えません。関連記事 iPhone版SafariでカスタムCSSを設定する方法
関連記事 Mac版SafariでカスタムCSSを設定する方法
Microsoft Edge – Stylebotでサイト別にカスタムCSSを設定する方法
Microsoft Edgeを開き、EdgeアドオンストアからStylebotをインストールします。
ページを開くと以下メッセージが表示されて、自動的に追加画面に移ります。
この拡張機能をインストールします...
購入 → 追加 をします。
これで拡張機能を使えるようになります。
(左)赤枠メッセージが出るので待つ (右)購入
(左)追加 (右)拡張機能が追加される
以上で準備は整いました。
あとはCSSコードを適用したいページを表示した状態で、メニュー 拡張機能 → Stylebot → Stylebotを開く と進み、「コード」タブでCSSコードを登録すればOKです。
(左)拡張機能 (右)Stylebot
(左)Stylebotを開く (右)「コード」タブ
たとえば、Google検索ページから「AIによる概要」を非表示にしたい場合、Google検索ページを表示した状態で、以下コードを登録します。
.YzCcne {
display: none !important;
}
入力後、右上✕ボタンで閉じます。
「コード」タブにコピペする
ページを更新して、CSSコードが反映されていれば成功です。
赤枠の箇所にあった表示が(左)、適用後は消える(右)
なお、一時的に無効化したい場合、拡張機能メニューから 有効にする をオフにすればOKです。
(左)メニューを開く (右)有効にする をオフ
Firefox – Stylusでサイト別にカスタムCSSを設定する方法
Firefoxを開き、Android向けアドオンページからStylusをインストールします。
(左)Firefoxへ追加 (右)追加
Stylusが追加された
以上で準備は整いました。
あとはCSSコードを登録するだけです。
メニュー 拡張機能 → Stylus → 設定 と進み、＋アイコンをタップ。
(左)拡張機能 (右)Stylus
(左)設定 (右)+アイコン
対象ページが「すべて」となっているのを、プルダウンメニューから「ドメイン上のURL」に変更します。
(左)赤枠をタップ (右)ドメイン上のURL
たとえば、Google検索ページから「AIによる概要」を非表示にしたい場合、「ドメイン上のURL」として、以下2パターン登録します。
www.google.com
www.google.co.jp
CSSコードとして、以下を登録します。
.YzCcne {
display: none !important;
}
最後に 保存 してください。
(左)URLを2行登録 (右)CSSコードを登録
ページを更新して、CSSコードが反映されていれば成功です。
赤枠の箇所にあった表示が(左)、適用後は消える(右)
なお、一時的に無効化したい場合、拡張機能メニューから Stylus を開き、有効 をオフにすればOKです。
(左)Stylus (右)有効 をオフ
オススメのカスタムCSS集
/*Google検索の「他の人はこちらも検索」・「関連する質問」を消す*/
.ouy7Mc {
display: none !important;
}
/*Google検索の「AIによる概要」を消す*/
.YzCcne {
display: none !important;
}
/*Google検索の「動画」・「ショート動画」を消す*/
div.MjjYud:has(a[href*="youtube.com"]),
div.MjjYud:has(a[href*="watch?v="]) {
display: none !important;
}
Google検索「他の人はこちらも検索」・「関連する質問」を消す
関連記事 Androidで「他の人はこちらも検索/関連する質問」を消す方法
Google検索結果に表示される「他の人はこちらも検索」・「関連する質問」を消すCSSコードです。
.ouy7Mc {
display: none !important;
}
▼「他の人はこちらも検索」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
▼「関連する質問」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
Google検索「AIによる概要」を消す
Google検索結果に表示される「AIによる概要」を消すCSSコードです。
.YzCcne {
display: none !important;
}
赤枠の箇所にあった表示が(左)、適用後は消える(右)
Google検索「動画」・「ショート動画」を消す
関連記事 AndroidでGoogle検索の「動画」・「ショート動画」を消す方法
Google検索結果に表示される「動画」・「ショート動画」を消すCSSコードです。
div.MjjYud:has(a[href*="youtube.com"]),
div.MjjYud:has(a[href*="watch?v="]) {
display: none !important;
}
▼「動画」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
▼「ショート動画」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
〆：CSSデザインを変更しよう!
以上、AndroidブラウザでカスタムCSSを設定する方法! Edge/Firefoxでサイト別にスタイルシートをカスタマイズしよう の説明でした。
以前までは、AndroidでもChrome拡張機能を導入できるブラウザ、Kiwi Browserを活用した方法が有名でしたが、2025年1月ごろ提供終了となりました。
その代わり、近年になってモバイル版Microsoft Edge・Firefoxアプリの拡張機能が充実しており、紹介したようなカスタムCSSを利用できます。
お試しあれ。
コメント