RSSにもCSSを

ブログをはじめとして、RSSを配信するサイトが最近増えてきました。RSSリーダーに登録しておくだけで、更新情報を自動で取得してくれる便利なものですね。

さて、RSSを登録するにはRSSファイルのアドレスを知る必要があります。多くの場合はRSSファイルへリンクを張っていることが多いのですが、これがちょっと問題。リンクをクリックすると、通常の場合ソースが丸見えで表示されてちょっと不気味なのです。よく知らない人はビックリして閉じてしまうかもしれません。

今回のテクニックはRSSファイルにCSSを適用して、見た目を整えビックリしちゃう人を減らそうというものです。

テクニック使用前

スタイルシートを適用する前のRSSファイル

テクニック使用後

スタイルシート適用後のRSSファイル

スタイルシート1つでずいぶんと印象が変わるのがわかってもらえたと思います。

RSSファイルの2行目に次のソースを書き加えます。よくわからない人は適用後のRSSのソースを見てください。

<?xml-stylesheet href="スタイルシートのアドレス" type="text/css"?>

ブログの場合はおそらく自動生成になっているでしょうから、RSSを書き出す部分を探して、上のソースを加えます。

スタイルシートはこんな感じになります。

@charset "Shift_JIS";
channel,title,item,description,link{
    display: block;
}
channel, item {
    border-width: 1px;
    border-style: solid;
    border-left-width: 4px;
    border-left-style: double;
    border-color:#444455;
    width: 90%;
    margin: 0.5em auto;
    background-color: #ffffff;
    padding:20px;
}
channel title{
    font-size:150%;
    font-weight: bold;
    color:#555577;
    margin-bottom: 0.5em;
    background-color:#EEEEEE;
    padding:5px 20px;
    margin:-20px;
    margin-bottom:10px;
}
item title {
    font-size:110%;
    font-weight: bold;
    color:#555577;
    margin-bottom: 0.5em;
    background-color:#EEEEEE;
    padding:5px 20px;
    margin:-20px;
    margin-bottom:10px;
}
description{
    line-height:140%;
}
link {
    text-decoration: underline;
    margin-bottom: 3px;
}

@charset "Shift_JIS";の部分はRSSファイルの文字コードによって書き換える必要があります。 よくわかんない人は、削除してしまってもいいかもしれません。 うまくいかない場合はいろいろいじってみましょう。

やろうと思えばいろいろできますが、そうそう使うものではないので、この程度でいいと思います。

私が使っているものをDLできるようにしておきます。＞＞＞RSS用スタイルシート
@charset "Shift_JIS";の部分は必要に応じて書き換えてください。

---

使いこなすための＋α

無いよりはあった方がイイという程度のものなので、余力のある人だけ追加してみてください。

今回の元ネタはADP: RSS用のスタイルシートからいただいています。 ＭＴに導入したい人や、うちのやり方で上手くいかなかった人は一読されることをお勧めします。

---