この記事では、MacのSafariブラウザで、サイト別にCSSをカスタマイズする方法を解説します。
Safariは他ブラウザと異なり、「無料で・簡単に」実現するやり方がわかりづらかったため、備忘として残しておきます。
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 というフォルダを作ります。
このフォルダを、先ほどTamperishで指定した場所に保存します。
保存先として選択したデスクトップに、google.com フォルダを作成する例
さっそく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デザインを変更しよう!
以上、Mac版SafariでカスタムCSSを設定する方法! サイト別にスタイルシートをカスタマイズしよう の説明でした。
他ブラウザ（Chrome/Firefox/Edge…etc）の場合、Stylebot・Stylusなど有名な拡張機能が用意されていますが、いずれもSafariでは使えません。
使い勝手は異なりますが、紹介した機能拡張Tamperishなら、MacのSafariでもカスタムCSSを設定できます。
なお有料でもOKなら、Cascadeaというアプリもあります。合わせてどうぞ。
コメント