Safari Readerの元になったReadabilityがアップデートして、後で読む機能などが付いたけれど...

Safari Readerは良い（以前書いた記事）のですが、1,000文字以上のみとか、もちろんSafariのみとか、ページまとめ機能が利かないときがあって、いつも完璧に使える訳ではないので、Readabilityもよく使います。

Readability（サイトの様子が以前と大きく変わっている、後述）はSafari ReaderやInstapaperの元になった技術をクラウドサービスとして提供しているサービスです。

先日久しぶりに使ってみると、新しいバージョンにアップデートされていました。

• 以前はBookmarkletの作成時に設定した見た目に固定した結果でしたが、新バージョンでは結果表示後に見た目を変更できるようになりました。これはとても便利です。
• 以前はBookmarkletとして提供されていましたが、現在はブラウザアドオンの形に変わっているようです。今も以前のBookmarkletがそのまま動いているので、問題ではありません。
• 月$5.00の有料会員になると、Read Later機能、スマフォでの閲覧、筆者への支払いができるようになる、はずだったのですが、AppStoreのストア外課金絡みでごたごたしているようです。

たまたま、このタイミングでMobile Safariにブックマークを同期して使用してみた（Share on Tumblrも使えるじゃないですか）のですが、Mobile Safariでも新しいUIでちゃんと使えてしまいます（Android IDEOSはブックマーク(特にブックマークレット)の同期はどうすれば良い？）。

Readabilityは絶対になくなってほしくない、私にとって不可欠のサービスです。

Safari Readerの表示をより読みやすくカスタマイズ

Safari 5のReader機能（アドレスバーに[リーダー]ボタンが出るやつ）の表示は明朝系ですが、ざっと読むにはゴシック系の方が適していると思います。

/Applications/Safari.app/Contents/Resources にある Reader.html というのがテンプレートになっているようで、これを書き換えれば良いようです。

ちょっと苦労しましたが、下記の内容でOKです。

書き換える前に Reader.html を別名にコピーしておいてください。

• Reader.htmlの先頭から7行目、最初の <style 行の下（つまりstyleブロックの中）に以下を挿入します。
  * {
  font-family: sans-serif !important;
  }

指定の意味は「すべて (*) のタグに対するフォントファミリーをサンセリフ(セリフ無し、つまりひげ無し)にする。ただしこの指定の優先度は高い(!important) ので、以降この指定を上書きする指定があってもここの指定が優先する」です。

Reader.htmlの他の場所でfontやfont-familyを指定している場所もあるのですが、本文に関してはSafari 5がフォントをハードコードして出力するので、優先度指定が必要でした。

なお、アドレスバーの [リーダー] ボタンが表示されると、元々表示されていた [RSS] ボタンが使えないと一瞬思いましたが、[リーダー] ボタンを長押しするとOKです。

それと、2,000文字以上の本文を持つページに対してのみ、[リーダー] ボタンが表示されるそうです（出典失念）。

また、Safari 5をインストールした後でMac OS X 10.6.4をインストールするとReader.htmlも上書きされてしまいました（些細なことですが）。

参考サイト：Macin' Blogさん2010-06-14 Safariリーダーの見た目を変えたい、それと、
2chのSafari Part54の87番に「ccsでフォント定義しているのにhtml本文ではdiv styleで再定義してる」という大ヒント（過去ログに退避されてもうたどり着けません）