ブログの更新情報(RSS)を他のドメイン、サーバーにある普通のHTMLページに表示する方法を説明いたします。(2005/11/24 機能強化)
ブログとは別にWEBサイトをレンタルしていたり、独自サーバーで運営され既に情報発信をされている方も多いと思います。
そういったサイトのトップページなどにブログの最新エントリーを埋め込む機能を搭載しています。
iFrameなどを使用せず、Javascriptを埋め込むことによってあらゆるページに埋め込むことが可能です。また、スタイルシートによってデザインをカスタマイズすることも可能です。
↓↓ サンプル ↓↓
このブログの最新情報を表示してみました。
|
埋め込み方法
ホームページ作成ソフトなどで、設置したい位置に以下のコードを貼り付けます。
<SCRIPT LANGUAGE="javascript" src="http://[ドメイン]/[ブログID]/rss.js?oe=Shift_JIS"></SCRIPT>
<NOSCRIPT><A HREF="http://[ドメイン]/[ブログID]" >ブログへ</A></NOSCRIPT>
※[ドメイン]、[ブログID] はご自分のドメインおよびブログIDに置き換えます
※"oe=" の部分には貼り付けるHTMLファイルの文字コードを入れます。
(ページソースの上方の"text/html; charset=XXXX"という部分)
少し高度な設定方法
<SCRIPT LANGUAGE="javascript" src="http://[ドメイン]/[ブログID]/rss.js?oe=Shift_JIS&category=[カテゴリーID]&max=3"></SCRIPT>
<NOSCRIPT><A HREF="http://[ドメイン]/[ブログID]" >ブログへ</A></NOSCRIPT>
※[カテゴリーID] は表示したいカテゴリーIDに置き換えます。
※"max=" の部分には表示する件数の上限値を設定できます。(例では3件)
[その他の設定("&"でつなげて記述します)]
title:ブログ(カテゴリ)タイトルの表示/非表示("title=no"で非表示、初期値はyes)
date:日付の表示/非表示("date=yes"で表示、初期値はno)
excerpt:要約の表示/非表示("excerpt=yes"で表示、初期値はno)
tags:要約のHTMLタグを含めた完全表示("tags=yes"で表示、初期値はno)
body:本文を最大半角255文字まで表示("body=yes"で表示、初期値はno)
スタイルの変更
スタイルシートはご自身で外部ファイルとして用意いただくか、埋め込むページ内で定義してください。
・クラス rss-js: テーブル全体の定義
・クラス rss-js-header: ブログ名を表示する部分
・クラス rss-js-entry: エントリーのリストが表示される部分
※リンクで表示されますので、a:link, a:visited, a:activeすべてを定義します
上記サンプルのスタイルシート:
.rss-js {
border: 1px solid #909090;
}
.rss-js-header, .rss-js-header a:link, .rss-js-header a:visited, .rss-js-header a:active {
font-size: 12px;
background-color: #66DD44;
font-weight: bold;
color: #333333;
text-decoration: none;
}
.rss-js-entry {
font-size: 10px;
background-color: #FFFFDD;
color: #666666;
}
.rss-js-entry a:link, .rss-js-entry a:visited, .rss-js-entry a:active {
font-size: 12px;
color: #3366CC;
text-decoration: none;
}
その他特徴
更新情報はトップページに表示されるので頻繁にアクセスされます。
その度に常にブログから更新情報を取り出していては負荷がかかるので、ブラウザキャッシュを使って、更新がない場合はコンテンツを送りません。
一般的なJavascript型のRSS表示ツールは別のサーバーを介してRSSを読み込み、それを処理してからJavascriptとなって表示されますので、そのサーバーにアクセスが集中すれば表示されるのに時間がかかります。当サイトの表示機能はブログサーバー自身でJavascriptを生成しますので非常にスムーズに表示されます。
便利な使いかた
最大件数(max)を1に設定して、要約をタグ付きで表示する設定にすれば、HTMLページの一部をブログで更新することが出来ます。タグ付きにすれば画像も掲載されますので、「今日の・・・写真」などという動的なコンテンツが埋めこみでき、アーカイブとしてブログページを表示するという使いかたが出来ます。
(max=1&excerpt=yes&tags=yes)
|