Safariのすべてのページのフォント設定を上書きする方法

ウェブページのデザイナーは時に面白い選択をします。例えば、ページをより読みやすくするために、小さくて凝った文字を影付きの背景に使うのはいかがでしょうか？AppleのSafariでは、全プラットフォームにリーダー表示が組み込まれており、読みにくい文字も簡単に読み取ることができます。ただし、ページの書式設定の大部分、一部の画像、その他の要素は失われます。

macOS版Safariには、カスタムCSSというもう一つの秘密の機能が隠されています。HTMLがウェブページの構造とコンテンツを定義するのに対し、CSS（カスケーディング・スタイル・シート）は、文字サイズから段組み、フローティングボックスに至るまで、外観とフォーマットの基礎となるコーディングです。Safari > 環境設定 > 詳細で、「スタイルシート」ポップアップメニューからカスタムスタイルシートを選択できます。

CSSの知識がなくても、効果は得られます。例えば、Arialが他のどの書体よりも好きだとします。次の1行を含むCSSファイルで、すべてのページの書体がArialに変更されます。

html body { font-family: Arial !important }

解読すると、「HTMLページの本文セクション（ページに表示されるすべての要素を格納する部分）では、フォントファミリーをArialに設定し、他のすべてをオーバーライドする」という意味になります。CSS名のカスケーディング部分は、選択肢が重複している場合にどのスタイル特性を使用するかという階層構造を定義します。ブラウザが最優先の選択権を持ち、!importantフラグは「他のスタイルシートの記述は気にしない。自分のパラメータを使うんだ！」と宣言します。

別の書体を使いたい場合は、その書体を表示するアプリ（テキストエディットなど）のフォントパネルで確認し（Command+Tキーを押すと表示されます）、上記のスタイルシートに表示されているとおりに名前を入力してください。スペースが含まれている場合は、名前を引用符で囲んでください。font-family: "Cooper Hewitt" !important

「詳細設定」メニューの「スタイルシート」から、スタイルシートのオン/オフを切り替えることができます。使用しない場合は「選択なし」を選択してください。また、スタイルシート内のテキストを変更してhtml保存しnohtml、適用されないようにすることもできます。

CSSファイルは、.css拡張子が.cssのプレーンテキストファイルです。macOSに搭載されているTextEditで作成できます。皮肉なことに、TextEditはデフォルトではフォーマットされたリッチテキストファイルのみを作成します。TextEdit > 環境設定を選択し、「フォーマット」で「プレーンテキスト」オプションを選択し、 「ファイル」 > 「新規」を選択してプレーンテキストファイルを作成します。任意の名前と.css拡張子を付けて保存します。「スタイルシート」メニューで「その他」を選択し、作成したファイルを選択します。

定義をグローバルにする必要はありません。HTMLとCSSを詳しく調べることで、ページ上の特定の要素やその他の側面をターゲットにすることができます。思ったほど難しくはありません。簡単な方では、W3schoolsが分かりやすいチュートリアルとレシピを提供しています。より技術的な方では、Craig AnthonyがSafariのオーバーライドについて解説したこちらの記事が、新たな視点を与えてくれるかもしれません。

非常に特殊な修正のために、カスタムCSSをいくつか使用しました。例えば、Substackのニュースレター帝国は、テキストトラッキング（文字間の全体的な間隔）が私の読みやすさを考えると大きすぎる設定になっています。（ちなみに、カーニングとは隣接する 文字間の間隔であり、範囲全体ではありません。）このCSS定義は、私の老眼に合わせて文字サイズを大きくしながら、この問題を自動的に解決してくれます。

.post p { letter-spacing: -0.1pt !important; font-size: 17px !important; }

この.post p部分は、「[p] でタグ付けされた段落に「post」という名前が付けられている場合、このスタイルを適用する」という意味です。これは、他のウェブページでも「post」をタグ付け名（または「クラス名」）として使用している場合には逆効果になる可能性があります。なぜなら、これらの名前は複数のウェブサイトで再利用できるからです。

Mac 911に問い合わせる

よくある質問とその回答、コラムへのリンクをまとめました。FAQ集をご覧になり、ご質問が網羅されているかご確認ください。もし掲載されていない場合でも、私たちは常に新しい問題解決の糸口を探しています！ご質問は[email protected]までメールでお送りください。スクリーンショット（必要な場合）と、氏名の使用可否を明記してください。すべての質問に回答できるとは限りません。メールへの返信は行っておりません。また、トラブルシューティングに関する直接的なアドバイスも提供できません。