Movable Type 備忘録

スタイルシートでRSSを見やすくする

Jan102006
Author: bzbell
Categories: Customize
Tags: Customize, MovableType, RSS, StyleSheet

Next Page: MovableTypeの各ファイルをバックアップする
Prev Page: サイドバーを折りたたむ

わたしのブログでは、MovableType(ムーバブルタイプ) 3.2を使っていて、最近RSS1.0も追加したのですが… これがまた見にくいったらないので、スタイルシートで見やすくしてみました。

ということで、今回はRSS1.0、RSS2.0のテンプレートをスタイルシートで見やすくするカスタマイズです。

MovableTypeでRSSのテンプレートにスタイルシートを適用する

RSSのテンプレートにスタイルシートを適用するのはカンタンでした。

RSSのテンプレート用スタイルシートを作成します。
以下のスタイルシートを保存します。

ここでは保存ファイル名にRSS1.0用は rdf10.css、RSS2.0用は rdf20.css としています。
以下はRSS1.0用のスタイルシートです。

@charset "UTF-8";
rss, channel, item, title, description, link, subject, creator, date {
display: block;
}
description, link, subject, creator, date {
font-size: 80%;
line-height: 150%;
}
image, language, managingEditor, webMaster, docs,
copyright, astBuildDate, pubDate, rating, day, hour,
skipDays, skipHours, textinput, name, items {
display: none;
}
item {
z-index: 1;
border-width: 1px 2px 2px 1px;
border-style: solid;
border-color: black;
padding: 1em;
width: 95%;
margin: 0.5em;
background-color: #ffffff;
}
RDF {
max-width: 50em;
min-width: 12em;
display: block;
margin-right: 0;
margin-left: 0;
padding-right: 2%;
padding-left: 2%;
background-color: #eeeeee;
}
title {
font-family: Geneva, Arial, sans-serif;
font-weight: bold;
color: #666688;
margin-bottom: 0.8em;
}
channel {
text-align: center;
}
channel title {
font-size: 1.4em;
}
channel description {
font-style: italic;
font-family: Times, "Times New Roman", serif;
font-size: 1.2em;
}
link {
text-decoration: underline;
margin-bottom: 3px;
}
item subject {
margin-top: 1em;
}
item date {
margin-left: 3em;
}
item subject:before {
content: "Category(ies): ";
}
item creator:before {
content: "Posted by ";
}
item date:before {
content: "at ";
}

以下は、RSS2.0用のスタイルシートです。

@charset "UTF-8";
rss, channel, item, title, description, link {
display: block;
text-align:center;
}
description, link {
font-size: 80%;
line-height: 150%;
}
image, language, managingEditor, webMaster, docs,
copyright, lastBuildDate, rating, day, hour, guid,
skipDays, skipHours, textinput, name, items {
display: none;
}
channel, item {
z-index: 1;
border-width: 1px 2px 2px 1px;
border-style: solid;
border-color: black;
padding: 1em;
width: 95%;
margin: 0.5em;
background-color: #ffffff;
}
title {
font-family: Geneva, Arial, sans-serif;
font-weight: bold;
color: #666688;
margin-bottom: 0.8em;
}
item {
text-align: left;
}
channel title {
text-align: center;
font-size: 1.4em;
}
channel description {
font-family: Times, "Times New Roman", serif;
font-size: 1.2em;
text-align: left;
}
item title {
font-size: 80%;
text-align: left;
}
item link {
text-decoration: underline;
margin-bottom: 3px;
text-align: left;
}
item description, category, pubDate {
}

RSS1.0、RSS2.0用のスタイルシートを新規作成します。
MovableType(ムーバブルタイプ)の管理画面左にあるテンプレートをクリックして、画面右上の テンプレートを新規作成 をクリックしてください。
入力内容は以下の通りです。
※以下は、RSS1.0用CSSのテンプレートの入力例です。

テンプレート名： RSS 1.0
出力ファイル名： style/rdf10.css
このテンプレートにリンクするファイル： 未記入でいいです。
テンプレートの内容： 上記RSS1.0用CSSをコピペします。

入力したら、保存して再構築します。
同様に、RSS2.0用のテンプレートも作成します。

各RSSテンプレートを修正します。
以下のコードをRSS1.0( index.rdf )、RSS2.0( index.xml )のテンプレートの2行目あたりに追加します。

RSS1.0の場合
<?xml-stylesheet href="<$MTBlogURL$>style/rdf10.css" type="text/css"?>
RSS2.0の場合
<?xml-stylesheet href="<$MTBlogURL$>style/rdf20.css" type="text/css"?>

各RSSのスタイルシートのファイル名は、RSS1.0では rdf10.css、RSS2.0では rdf20.css としています。
追加したら、保存して再構築をします。

以上で、スタイルシートでRSSが見やすくなりました。

スタイルシートに記述しているタグはRSSのテンプレートを見れば、どのタグに対してのスタイルを設定しているのかが分かりますので、各自でアレンジしてみてください。