りんごが好きなのでぃす

MacやiPhone、iPadなどの情報を紹介してますが玄人向けじゃないらしい

Safari_6でフォントを(頑張って)指定する方法

とりあえず自分なりのフォント設定をする方法

フォント設定があった "表示" タブが無くなってしまった Safari 6。

cap_20120726_165149.jpg

デフォルトの明朝体ではなくヒラギノ角ゴシックなどのゴシック系に設定を変更していた人も少なくないはず。仕様変更という事らしいのですが、フォントを設定出来なくなってしまったのはツライ。

今後仕様の見直しが行われるかは不明ですが、とりあえず『明朝体は我慢ならぬ!』という方は以下の方法で凌がれてはどうでしょうか。

Safari にカスタムスタイルシートを設定する

Safari にはオリジナルのスタイルシートを反映させる機能が備わっていますのでこれを利用します。フォントの指定だけなので CSS の知識がなくても何とかなります♪

以下、準備と設定方法。

  1. テキストエディット.app または任意のテキストエディタで新規書類を作成
    →テキスト書類は "リッチテキスト形式" ではなく "標準テキスト形式" で作る
  2. フォントをゴシック系で表示させたい場合は以下のように記述
    cap_20120726_174753.jpg
    もちろん HiraKakuPro-W3 など具体的に指定しても構わない
    → 自作が面倒くさい方は後出のエントリーをご覧下さい
  3. "任意のファイル名.css" として書類フォルダなどに保存
  4. Safari の環境設定で詳細タブを開き、スタイルシートの項目から "その他..." を選び (3) で保存したファイルを選択する
  5. 記述に誤りが無ければ上記手順でカスタムスタイルシートが反映されます。

    ただしこの方法だとフォントデザインにこだわったサイトだろうと一切無視してカスタムスタイルが適用されますのでご注意下さい。

    なお例示した記述は思いっきり簡略化させたものです。真丁寧に指定するなら MacRumors のフォーラムにあるエントリーをもとに、Helvetica の指定を sans-serif なり HiraKakuPro-W3 なりに置き換えて運用すると良いでしょう。

    訪れるサイトごとにカスタムスタイルシートを設定する

    こちらは "User CSS" という Safari 5.x 用の機能拡張(エクステンション)を使います。Safari 6.x 対応とは書かれていませんが試したところちゃんと使えるようです。

    スタイルシートを記述するという点では前出の方法と同じですが、User CSS ではアドレス(URI)単位で個別のスタイルシートを設定出来る点が大きく異なります。

    以下、Yahoo! オークションに対しての指定を例に手順を紹介します。

    1. Gridth Code から "User CSS" をダウンロード
    2. ダウンロードされた "User CSS 1.3.2.safariextz" をダブルクリックして Safari にインストール
    3. Yahoo! オークションのトップページを開く
      URI を確認:http://auctions.yahoo.co.jp
    4. User CSS のボタン(下図赤丸)を押して機能を呼び出す
      cap_20120726_180856.jpg
    5. 以下の要領で指定を記述
      cap_20120726_181754.jpg
      こちらの記述は "!important" をつける必要なし
    6. 複数のサイトに対してカスタムスタイルを追加する場合はウインドウ左下にある[New User CSS]をクリックして同じ要領で指定を記述し保存する

    アスタリスク(半角の*)によるワイルドカードというのが解り難いかもしれませんが、例えば……

    ……とある場合、すべてに共通している部分(http://www.hogehoge.com/)を活かして個別の部分を "* (半角)" に置き換えて "http://www.hogehoge.com/*" と記述するような物を指します。オールマイティ、ジョーカー、という表現の方がイメージしやすいかな?

    なので、上図にある "http://auctions.yahoo.co.jp/*" では "http://auctions.yahoo.co.jp/" で始まるすべての URI が指定対象になる、ということになります。

    なお Yahoo! オークションの各カテゴリでは……

    • コンピュータ
      http://list3.auctions.yahoo.co.jp/jp/コンピュータ/23336-category.html
    • スポーツ・レジャー
      http://list4.auctions.yahoo.co.jp/jp/スポーツ-レジャー/24698-category.html

    という URI の記述になっていて下線部分が共通となっていますから、User CSS の URLs 欄には更に……

    ……を加えておくと各カテゴリページでも同じカスタムスタイルを適用出来ます。

    使いこなすには CSS の知識と慣れが必要ですがフォントの指定程度なら簡単ですので是非チャレンジしてみて下さい。

広告を非表示にする