広告主 >>>  ID   PASS  

オリジナルスタイルをデザインする

「複合RSS」では、オリジナルのスタイルシート(CSS)とHTMLファイルをご用意していただくことで、RSSフィードを自由にデザインすることが可能です。ここでは、そうしたオリジナルCSSとHTMLタグの解説をしていきます。
※CSSは通常のスタイルシートの形式(拡張子.css)、HTMLファイルはテキスト形式(拡張子.txt)で作成する必要があります。
※作成したファイルは外部から参照可能なインターネット上にアップロードする必要があります。
※JavaScript版ではオリジナルのCSSをアップロードする必要はなく、設置ページに適用しているCSS内に記述することで自由にスタイルを設定することが可能です。

HTMLタグのカスタマイズ

STEP.1
「メモ帳」などのテキストエディタを開いて、以下の内容を記述します。
$tag_header = <<EOS;
ここにヘッダーを記述します。
EOS

$tag_repeat = <<EOS
ここに記事内容を記述します。
EOS

$tag_footer = <<EOS;
ここにフッターを記述します。
EOS
$xxxx = <<EOS;からEOSまでが一つのブロックとなり、その間にHTMLタグを記述します。

各ブロックの意味は次の通り。

・$tag_header
配信元のサイト名やサイトURLなどRSSのヘッダー部分になります。複数のRSSを設定した場合は省略されて表示されません。

・$tag_repeat
RSSフィードの記事部分になります。表示記事数の分だけ、このブロックが繰り返されます。

・$tag_footer
RSSのフッター部分で、最後に挿入したい内容を記述します。通常は必要ないでしょう(著作権表記は別なのでフッターを削除しても消すことはできません)。

STEP.2
各ブロック内に置き換えタグを記述します。置き換えタグは「複合RSS」専用の特殊タグで、プログラム内で取得したRSS情報に置き換えられます。

ヘッダー($tag_header)の置き換えタグ一覧

置き換えタグ 置き換えられる内容
%Version% バージョン (配信無しが多い。非推奨)
%SiteName% サイト名 複合RSS
%SiteURL% サイトアドレス http://rssinclude.com/
%SiteDescription% サイトの説明文 複数のRSSフィードを一つにまとめて表示
%SiteCreator% 制作者 (配信無しが多い。非推奨)
%SiteDate% 日付(タイムスタンプ) (配信無しが多い。非推奨)

記事($tag_repeat)の置き換えタグ一覧

置き換えタグ 置き換えられる内容
%MarkIcon% コード作成時に設定したアイコン
mark_01
mark_02
mark_03
mark_04
%Image% リンク付の画像タグ <a href="リンクURL" target="_blank"><img src="画像URL" alt="" width="指定サイズ" /></a>
%NolinkImage% リンク無しの画像タグ <img src="画像URL" alt="" width="指定サイズ" />
%ItemTime% 日付(タイムスタンプ) コード作成時に指定した形式
%NewIcon% コード作成時に指定したNEWマーク new
%ItemTitle% 記事タイトル 最大文字数の設定済
%ItemLink% 記事ページアドレス http://rssinclude.com/index.html
%ItemSubject% 記事カテゴリー (配信無しが多い。非推奨)
%ItemCreator% 制作者 (配信無しが多い。非推奨)
%ItemDescription% 記事本文 最大文字数の設定済
%ItemSite% サイト名 複合RSS
%ItemSiteLink% サイトアドレス http://rssinclude.com/

※フッターの置き換えタグはありません。

STEP.3
置き換えタグ以外は通常のHTMLと同様に記述します。

オリジナルHTMLの記述例

#表示ヘッダ部分(リスト表示用RSS単体のみ有効)
$tag_header = <<EOS;
<div class="rss_header">
<a href="%SiteURL%" target="_blank">%SiteName%</a><div class="rss_des">%SiteDescription%</div>
</div>
EOS

#繰り返しブロック
$tag_repeat = <<EOS;
<div class="rsscommon_main">
<div class="rsscommon_img">%Image%</div>
<div class="rsscommon_txt">
%MarkIcon%<span class="rsscommon_title"><a href="%ItemLink%" target="_blank">%ItemTitle%</a></span>
<span class="rsscommon_des">%ItemDescription%</span>
<span class="rsscommon_site">%ItemSite%</span>
<span class="rsscommon_time">%ItemTime%</span>
%NewIcon%
</div>
</div>
EOS

#表示フッタ部分
$tag_footer = <<EOS;
EOS
先頭に「#」をつけると、その行はコメント行として扱われます。

例えば記事の本文にリンクを付けたい場合は、「<span class="rsscommon_des">%ItemDescription%</span>」を「<span class="rsscommon_des"><a href="%ItemLink%" target="_blank">%ItemDescription%</a></span>」のように変更します。

スタイルシートはデフォルトのクラス以外を使用する場合は、オリジナルCSSで指定する必要があります。
デフォルトのCSSクラス名

rss_header = ヘッダー全体

rss_des = ヘッダー本文のブロック要素

rsscommon_main = 記事全体

rsscommon_img = 記事画像のブロック要素

rsscommon_txt = 記事テキストのブロック要素

rsscommon_title = 記事タイトルのインライン要素

rsscommon_des = 記事本文のインライン要素

rsscommon_site = 記事サイト名のインライン要素

rsscommon_time = 記事日付のインライン要素

mark_01~06 = 記事アイコン

mark_new = 記事新着アイコン

※CSSの効果はコード作成時の「レイアウトの設定」などで変わります。

CSSのカスタマイズ

テキストエディタやホームページ作成ソフトなどでスタイルシートを記述します。
上記のデフォルトのCSSクラス名を改変して使用する場合は、HTMLタグのカスタマイズは必要ありません。オリジナルのクラス名を使用する場合は、HTMLタグを併せて変更して下さい。

なお、以下にオリジナルのHTMLとCSSを組み合わせたサンプルをいくつか紹介します。
SAMPLE.1
画像を並べたギャラリー風

オリジナルHTMLの記述

#表示ヘッダ部分
$tag_header = <<EOS;
EOS

#繰り返しブロック
$tag_repeat = <<EOS;
<span class="rsscommon_img">%Image%</span>
EOS

#表示フッタ部分
$tag_footer = <<EOS;
EOS

オリジナルCSSの記述

@charset "utf-8";
/*カスタムテンプレート*/
.rsscommon_img {
display: inline-block;
overflow: hidden;
}
.rsscommon_img img {
border-radius: 10px;
-webkit-border-radius: 10px; /*Safari,Google Chrome用*/
-moz-border-radius: 10px; /*Firefox用*/
}

iframeタグの記述(表示ページのCSSに記述)

.iframe_custom1 {
width: 620px;
height: 380px;
border: none;
overflow: auto;
}
SAMPLE.2
更新履歴風

オリジナルHTMLの記述

#表示ヘッダ部分(リスト表示用RSS単体のみ有効)
$tag_header = <<EOS;
EOS

#繰り返しブロック
$tag_repeat = <<EOS;
<div class="rsscommon_main">
<div class="rsscommon_left">
%ItemTime%
</div>
<div class="rsscommon_right">
%NewIcon%<span class="rsscommon_title"><a href="%ItemLink%" target="_blank">%ItemTitle%</a></span><span class="rsscommon_site">%ItemSite%</span>
</div>
</div>
EOS

#表示フッタ部分
$tag_footer = <<EOS;
EOS

オリジナルCSSの記述

@charset "utf-8";
/*カスタムテンプレート*/
.rsscommon_main {
line-height: 1.3;
clear: both;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000;
margin-bottom: 5px;
padding-bottom: 5px;
overflow: auto;
_height: 40px; /*IE6以前のレイアウト崩れ対策*/
>height: 40px; /*IE7以降のレイアウト崩れ対策*/
}
.rsscommon_left {
float: left;
margin-right: 5px;
width: 130px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
}
.rsscommon_right {
float: right;
width: 430px;
}
.rsscommon_title {
}
.rsscommon_site {
color: #666;
font-size: 80%;
}

iframeタグの記述(表示ページのCSSに記述)

.iframe_custom2 {
width: 600px;
height: 370px;
border: none;
overflow: auto;
}