●ブログの更新情報をHTMLページに表示する

メニューなど

  • AAA
  • BBB
  • CCC
  • DDD

 

これはサンプルページです
いわゆるブログではない
HTMLページです

 

最新情報!

↑サンプル表示↑


このように通常のHTMLページに作成したエントリーの最新記事が表示されます。
Javascript埋めこみ型なのでホームページが他のレンタルサーバーであっても表示することが可能です。

ニュースやWhat's Newなどの更新ツールとして活用できます。もちろんリンクをクリックすれば指定のエントリーにジャンプすることができます。

また、この例のようにTanalogで提供されるファイルエリアにHTMLファイルを作成して保存することで独自のレイアウトで表示することもでき、ウェルカムページとしても活用できます。この場合、バックアップなどデータも一元管理できて便利です。

 

埋め込み方法

タグの設置

ホームページ作成ソフトなどで、設置したい位置に以下のコードを貼り付けます。

<SCRIPT LANGUAGE="javascript" src="http://tanalog.com/[ブログID]/rss.js?ie=Shift_JIS"></SCRIPT>
<NOSCRIPT><A HREF="http://tanalog.com/[ブログID]" >ブログへ</A></NOSCRIPT>

※[ブログID] はご自分のブログIDに置き換えます
※"ie=" の部分には貼り付けるHTMLファイルの文字コードを入れます。
  (ページソースの上方の"text/html; charset=XXXX"という部分)

詳細な設定:
表示されるエントリー数は初期値で5件ですが、この件数の変更と、表示するカテゴリーを限定することができます。

<SCRIPT LANGUAGE="javascript" src="http://tanalog.com/[ブログID]/rss.js?ie=Shift_JIS&category=[カテゴリーID]&max=3"></SCRIPT>
<NOSCRIPT><A HREF="http://tanalog.com/[ブログID]" >ブログへ</A></NOSCRIPT>

※[カテゴリーID] は表示したいカテゴリーIDに置き換えます。
※"max=" の部分には表示する件数の上限値を設定できます。(例では3件)
※category,maxの2つのパラメータは任意です。

 

スタイルの変更

スタイルシートはご自身で用意いただくか、埋め込むページ内で定義してください。

  • クラス rss-js: テーブル全体の定義
  • クラス rss-js-header: ブログ名を表示する部分
  • クラス rss-js-entry: エントリーのリストが表示される部分

    ※リンクで表示されますので、a:link, a:visited, a:activeすべてを定義します

上記サンプルのスタイルシート(rss_style.css)

.rss-js {
 border: 1px dotted #000000;
}

.rss-js-header, .rss-js-header a:link, .rss-js-header a:visited, .rss-js-header a:active {
 font-size: 12px;
 background-color: #FF6600;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
}

.rss-js-entry {
 font-size: 10px;
 background-color: #FFFFCC;
 color: #666666;
 text-indent: 5px;
}

.rss-js-entry a:link, .rss-js-entry a:visited, .rss-js-entry a:active {
 font-size: 12px;
 color: #3366CC;
 text-decoration: none;
}

.rss-js-entry a:hover {
 text-decoration: underline;
}