この記事では、iPhone/iPadのSafariブラウザで、サイト別にCSSをカスタマイズする方法を解説します。
サイトごと、不要な項目を非表示にしたいシーンで便利ですよ。
関連記事 Mac版SafariでカスタムCSSを設定する方法
Makeover – Safariでサイト別にカスタムCSSを設定する方法
Makeoverという機能拡張で、サイト別に、CSSコードを上書き可能です（無料）。
Safariを開き、検索フィールド左側 アイコンの 機能拡張を管理 →Makeoverをオンにします。
前のページに戻り、Makeover へ進みます。
(左)赤枠をタップ (右)機能拡張を管理
(左)Makeoverをオン (右)Makeoverを開く
初回のみ、アクセス権に関するメッセージが出るので、すべてのWebサイトで常に許可 しましょう。
(左)常に許可 (右)すべてのWebサイトで常に許可
以上で準備は整いました。
あとはCSSコードを適用したいページを表示した状態で、Makeover を開き任意のCSSコードを登録すればOKです。
たとえば、Google検索ページから「AIによる概要」を非表示にしたい場合、Google検索ページを表示した状態で、以下コードを登録します。
.YzCcne {
display: none !important;
}
CSS Codeの欄に(左)、コードをコピペする(右)
ページを更新して、CSSコードが反映されていれば成功です。
「AIによる概要」の例。赤枠の箇所にあった表示が(左)、適用後は消える(右)
なお、一時的に無効化したい場合、機能拡張を管理 でMakeoverをオフにすればOK。
(左)機能拡張を管理 (右)オフにする
オススメのカスタム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;
}
/*ダークモード非対応サイトでダークモードを適用する*/
@media (prefers-color-scheme: dark) {
html {
filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) !important;
background-color: #111 !important;
}
img,
video,
picture,
canvas {
filter: invert(1) hue-rotate(180deg) !important;
}
}
Google検索「他の人はこちらも検索」・「関連する質問」を消す
Google検索結果に表示される「他の人はこちらも検索」・「関連する質問」を消すCSSコードです。
.ouy7Mc {
display: none !important;
}
▼「他の人はこちらも検索」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
▼「関連する質問」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
関連記事 iPhoneで「他の人はこちらも検索/関連する質問」を消す方法
Google検索「AIによる概要」を消す
Google検索結果に表示される「AIによる概要」を消すCSSコードです。
.YzCcne {
display: none !important;
}
赤枠の箇所にあった表示が(左)、適用後は消える(右)
Google検索「動画」・「ショート動画」を消す
Google検索結果に表示される「動画」・「ショート動画」を消すCSSコードです。
div.MjjYud:has(a[href*="youtube.com"]),
div.MjjYud:has(a[href*="watch?v="]) {
display: none !important;
}
▼「動画」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
▼「ショート動画」が消える例
赤枠の箇所にあった表示が(左)、適用後は消える(右)
関連記事 iPhoneでGoogle検索の「動画」・「ショート動画」を消す方法
ダークモード非対応サイトでダークモードを適用する
ほんらいダークモードに対応しないサイトでも、ダークモードを適用させるCSSコードです。
@media (prefers-color-scheme: dark) {
html {
filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) !important;
background-color: #111 !important;
}
img,
video,
picture,
canvas {
filter: invert(1) hue-rotate(180deg) !important;
}
}
(左)通常の当サイト (右)ダークモードを適用した当サイト
関連記事 iPhone版Safariでダークモードを使う方法
〆：CSSデザインを変更しよう!
以上、iPhone版SafariでカスタムCSSを設定する方法! Makeoverでサイト別にスタイルシートをカスタマイズしよう の説明でした。
他ブラウザ（Chrome/Firefox/Edge…etc）の場合、Stylebot・Stylusなど有名な拡張機能が用意されていますが、いずれもSafariでは使えません。
使い勝手は異なりますが、紹介した機能拡張Makeoverなら、iPhone/iPadのSafariでもカスタムCSSを設定できます。
お試しあれ。
コメント