この記事では、MacのSafariブラウザで、サイト別にCSSをカスタマイズする方法を解説します。
サイトごと、不要な項目を非表示にしたいシーンで便利ですよ。
関連記事 iPhone版SafariでカスタムCSSを設定する方法
MacのSafariでサイト別にカスタムCSSを設定する方法
Tamperish（テンプリシ）という機能拡張で、サイト別に、CSSコードを上書き可能です（無料）。
起動して、設定を有効にします。
赤枠のトグルをクリックする
Safari拡張機能が開くので、Tamperishにチェックを入れる
次にCSSファイルを用意します。
適当なエディタアプリで、お好みのコードをCSSファイルとして保存しましょう。
ここでは例として、背景をオレンジにするコードを作ってみます。
body, div {
background: #ff7f50
}
エディタアプリとして、例えばCotEditorがオススメです。
用意したCSSコード例
名前をつけて保存する。拡張子は.cssとする
デスクトップに保存した例
Tamperishを開き、Change よりCSSファイルを保存したフォルダを選択します。
赤枠のChangeをクリック
保存先のデスクトップを選択する例
このCSSコードを、特定のWebサイトにのみ適用したい場合、サイトURLを名前にしたフォルダを作成して、その中に保存してください。
たとえばGoogle検索ページで適用したい場合、google.com というフォルダを作り、中にCSSファイルを入れます。
このフォルダを、先ほどTamperishで指定した場所に保存します。
保存先として選択したデスクトップに、google.com フォルダを作成、中にCSSファイルを入れる例
さっそくSafariを開き、CSSが適用されているかチェックしましょう。
各サイトごと、初回のみ、Tamperishに対するアクセス権の許可が必要です。
▼Google検索ページ（google.com）でアクセス権を許可する例
赤枠をクリック
アクセスを許可する
作業は以上。
アクセス権を許可したサイトで、しっかりとカスタムCSSが反映されていれば成功です。
背景をオレンジにするCSSコードが、google.comでのみ反映される
サイトの区別不要であれば標準機能だけでOK
Webサイトを限定せず、すべてのサイトで共通のCSSコードを反映したい場合、Safariの標準機能だけで実現できます。
まず、事前にCSSファイルを用意します。
適当なエディタアプリで、お好みのコードをCSSファイルとして保存しましょう。
ここでは例として、背景をオレンジにするコードを作ってみます。
body, div {
background: #ff7f50
}
エディタアプリとして、例えばCotEditorがオススメです。
用意したCSSコード例
名前をつけて保存する。拡張子は.cssとする
デスクトップに保存した例
Safariを起動して、メニューから Safari → 設定 を開き、「詳細」タブの「スタイルシート」でプルダウンメニューを表示します。
Safari → 設定
「詳細」タブの「スタイルシート」
その他 より、用意しておいたCSSファイルを選択します。
これでスタイルシートが指定されました。
その他
CSSファイルを選択
スタイルシートを指定できた
各サイトで、カスタムCSSが反映されていれば成功です。
背景をオレンジにするCSSコードが、各サイトで反映される
オススメのカスタムCSS集
/*Google検索の「他の人はこちらも検索」を消す*/
.oIk2Cb {
display: none !important;
}
/*Google検索の「関連する質問」を消す*/
.cUnQKe {
display: none !important;
}
/*Google検索の「AIによる概要」を消す*/
.YzCcne {
display: none !important;
}
/*YouTubeの「他の人はこちらも視聴・検索」「あなたへのおすすめ」を消す*/
.style-scope ytd-shelf-renderer,.style-scope ytd-horizontal-card-list-renderer {
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コードです。
.oIk2Cb {
display: none !important;
}
▼反映前
反映前。赤枠に表示される
▼反映後
反映後。赤枠の箇所にあった表示が消える
関連記事 「他の人はこちらも検索」を消す方法
Google検索「関連する質問」を消す
Google検索結果に表示される「関連する質問」を消すCSSコードです。
.cUnQKe {
display: none !important;
}
▼反映前
反映前。赤枠に表示される
▼反映後
反映後。赤枠の箇所にあった表示が消える
関連記事 「関連する質問」を消す方法
Google検索「AIによる概要」を消す
Google検索結果に表示される「AIによる概要」を消すCSSコードです。
.YzCcne {
display: none !important;
}
▼反映前
反映前。赤枠に表示される
▼反映後
反映後。赤枠の箇所にあった表示が消える
関連記事 「AIによる概要」を消す方法
YouTube「他の人はこちらも視聴・検索」「あなたへのおすすめ」を消す
YouTubeで表示される「他の人はこちらも視聴・検索」「あなたへのおすすめ」を消すCSSコードです。
.style-scope ytd-shelf-renderer,.style-scope ytd-horizontal-card-list-renderer {
display: none !important;
}
「他の人はこちらも視聴」などの表示が消える
関連記事 YouTubeで「他の人はこちらも視聴/検索」を消す方法
ダークモード非対応サイトでダークモードを適用する
ほんらいダークモードに対応しないサイトでも、ダークモードを適用させる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;
}
}
ダークモードを適用した当サイト
〆：CSSデザインを変更しよう!
以上、Mac版SafariでカスタムCSSを設定する方法! サイト別にスタイルシートをカスタマイズしよう の説明でした。
他ブラウザ（Chrome/Firefox/Edge…etc）の場合、Stylebot・Stylusなど有名な拡張機能が用意されていますが、いずれもSafariでは使えません。
使い勝手は異なりますが、紹介した機能拡張Tamperishなら、MacのSafariでもカスタムCSSを設定できます。
なお有料でもOKなら、Cascadeaというアプリもあります。合わせてどうぞ。
コメント