りんごが好きなのでぃす

Macを中心に、たま〜にiPhoneやiPadなどの話題も届けていたら今年で26年目を迎えてました

SafariのRSSリーダの見た目をカスタマイズする

 

ちょっと手を加えるだけで今までよりも "読んでみたい" 度が UP するかも?

Safari にはオリジナルの CSS (Style Sheet) を読み込ませる設定がありますので、これを使って Safari の RSS リーダを好みのデザインに変更してみましょう。

印象が大きく変わる部分として、今回はヘッダ部分の背景色の変更と各エントリータイトルへの背景色の追加を例として紹介します(これらの変更に伴うテキストカラーの変更なども含む)。

【ヘッダ部分】

RSS ページで一番上に表示されている青色背景のタイトル部分。ここには ID 名[#apple-rss-banner]が指定されています。なお、ここには "BlueBanner.tif" が背景画像として張られているので背景色を変更する場合は差し替え画像を用意するか、この画像を無効化して背景色を指定します。

今回の変更では右側に表示されている『総数:X』という部分がエントリータイトルよりも少し腰高に見えたので、この表示位置変更も行いました。

【エントリータイトル部分】

RSS ページに表示される各エントリーのタイトル部分。デフォルトでは太字で表示されているだけで視認性が高いとは言えない状態だと感じたので、見やすいように背景色を追加。ここにはクラス名[.apple-rss-article-head]が指定されています。

背景色の変更に伴いテキストカラー(この部分はリンクテキスト)の変更も行いました。

その結果がこちら。まずは変更前の状態。

f:id:kjx130:20161218161344p:plain

そして変更後がこちら。

f:id:kjx130:20161218161348p:plain

たった2カ所変更しただけですが、結構印象が違いますね。キャプチャの都合上、記事の長さを短くさせているのでややうるさい画面になっていますが、全文表示だと間隔が広がるのでタイトル部分の視認性は高くなります。

このデザインに使用した CSS は以下の通り。


@media screen {
    div#apple-rss-banner {
       background-image: none !important;
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#303030)) !important;
       color: #fff !important;
       text-shadow: 0 -1px 0 rgba(0, 0, 0, .9) !important;
    }
    div#apple-rss-counts {
       bottom: 4px !important;
    }
    div.apple-rss-article-head {
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5880ff), to(#3953a6)) !important;
       border-radius: 7px !important;
       box-shadow: 0 1px 3px rgba(0, 0, 0, .6) !important;
       padding-top: 8px !important;
       padding-left: 6px !important;
       padding-bottom: 4px !important;
       margin-bottom: 1em !important;
       }
    div.apple-rss-article-head a {
       color: #fff !important;
       text-shadow: 0 -1px 0 rgba(0, 0, 0, .7) !important;
    }
}

興味のある方はこれを参考にオリジナルデザインを作ってみて下さい♪ ID 名やクラス名の追跡には Safari の開発メニュー(環境設定>詳細 で "開発メニュー" を表示させる)から選択できる Web インスペクタが便利です。ちなみにカスタマイズ CSS は Safari の環境設定>詳細 のページで設定します。

CSS 記述などカスタマイズ方法のご質問などには一切応じかねます。恐れ入りますがネット検索や書籍などでお勉強願います。