MTのRSS(atom.xml)にXSLを使ってスタイルをつけてみた

Facebooktwitter

MTはデフォルトでatom.xmlというRSS形式のファイルを書きだすので、特に意識しなくても勝手にRSS配信ができるようになっていますね。
必要ない場合はむしろ意識的にテンプレートを削除しなければなりません。
最近のブラウザにはパーサーが付いているので、atom.xmlのURLを直叩きしても自動的にきれいに成型して見せてくれて便利です。

と思っていたら、お客さんからGoogle Chromeではxmlのソースがまんま見えてるので、なんとかしてほしいというクレームがきました。

Chromeで見ると：
This XML file does not appear to have any style information associated with it. The document tree is shown below.
 というワーニングが出てきます。

そこであちこち調べてXSLを使えばきれいに見えるようなるというのはわかりましたが、なにせXSLなど今まで書いたことが無いので大変でした。たぶんこれからも1度あるか無いかだと思いますが。。。
ウェブ上での解説は断片的であったり、ちょっと間違ってたりで一つのサイトでatom用のスタイル定義みたいなピンポイントで説明しているページが無かったので今回製作したものを共有します。

【参考サイト】

（ありがとうございました。）

【準備するもの】
なし

【手順】

  1. MT上でatom.xmlを書きだすテンプレートに今回作成するxslファイルをインクルードさせるタグを挿入
  2. xslファイルの作成
  3. スタイルシートの作成（xslファイルにインラインでスタイルを定義してもいいですよ。）

実際はこういうソースになります。
またこのサイトのatom.xmlでも使ってますので、これも参考にしてください。

・最新情報のフィードテンプレート（MTのデザインメニューのテンプレートで行う）

<$mt:HTTPContentType type="application/atom+xml"$><?xml version="1.0" encoding="<$mt:PublishCharset$>"?>
<?xml-stylesheet type="text/xsl" href="atom.xsl" media="screen"?> <--これを追加

・atom.xsl

<$mt:HTTPContentType type="application/atom+xml"$><?xml version="1.0" encoding="<$mt:PublishCharset$>"?>
<?xml-stylesheet type="text/xsl" href="atom.xsl" media="screen"?> <--これを追加

・atom.xsl

</head>

<body>
<h4><xsl:value-of select="atom:feed/atom:title"/></h4>
<ul>

<xsl:apply-templates select="//atom:entry"/>

</ul>

</body>

</html>

</xsl:template>

<xsl:template match="atom:entry">

<li>

<div class="entry_title"><a href="{atom:link[@rel='alternate']/@href}" target="_blank"><xsl:value-of select="atom:title" disable-output-escaping="yes"/></a></div>
<div class="entry_date"> <xsl:value-of select="substring(atom:updated,0,5)" disable-output-escaping="yes"/>年<xsl:value-of select="substring(atom:updated,6,2)" disable-output-escaping="yes"/>月<xsl:value-of select="substring(atom:updated,9,2)" disable-output-escaping="yes"/>日</div>

<div class="entry_content"><xsl:value-of select="substring(atom:content,0,120)" disable-output-escaping="yes"/>...</div>

</li>

</xsl:template>

</xsl:stylesheet>

 

ここまでである程度リストとしては見えて、タイトルにリンクも張れるので機能的には問題ありませんが、これにスタイルをつけてみます。

・atom.css

@charset "UTF-8";
html, body{
background-color:#fff;
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
}

h4 {
margin: 20px;
border-bottom: 2px solid #bcbcbc;
padding-left:10px;
padding-bottom: 3px;
font-weight: heavy;
font-size:16px;
}

ul {
margin-left: 0px;
background-color: #fff;
list-style-type: none;
padding-left:20px;
}

li {
margin: 12px;
border-bottom:#bcbcbc 1px solid;
padding: 5px 15px;
}

.entry_title {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
}

.entry_date {
font-size: 12px;
}

.entry_content {
font-size: 12px;
}

a {
text-decoration:none;
}

a:hover,
a:focus,
a:active{
text-decoration:underline;
}

 

【備考】

  • 全てutf-8で保存してください。
  • XSLはHTMLと違ってちょっと記述ミスしただけでも画面に何も表示されなくなるので、気をつけてください。（Google Chromeだけかもしれませんが）
  • atom.cssには結構自由に書けますよ。バックに画像を付けたり、罫で囲ったり色々試してみてください。

ここへ来て、これまでFirefoxやIEはなんて親切なんだろうと思っていましたが、いざ自分でデザインできるようになると、Google Chromeの方が実は良心的なのでは無いかと思われて来ました。

以上です。