Webサイトデザイン制作Tips|Webあんぎゃ

Webサイトデザイン制作における基礎知識を中心に記載しています。
内容は2013/6/7より受講している求職者支援訓練「Webサイト制作科」の授業に基づいています。

 | 

2013-07-31

Webサイト制作におけるRSSの設置方法

Webサイト制作において、自分や知人のブログなどの更新情報を自分のサイト内に表示して、簡単にチェックできると便利である。

今回はgoogleAPIを利用してブログなどのRSSを取得して自分のサイト内に設置する方法を簡単にまとめておく。

その前に、まずRSSAPIとは何かを確認しておく。

では設置手順。

1.HTMLのhead内に下記の2行を記述する。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/feed.js"></script>

2.HTMLのbody内に下記のようなidを指定する。

<div id="feed">Webサイトデザイン制作の新着Tips</div>

以下、注意点。

  • タグはdiv以外でも可。
  • divタグに書いた文字列SEO対策にはなるが表示はされない。
  • divタグに書いた文字列は空でも構わないが、「id="feed"」の指定を含むタグの記述がないとRSSが表示されない。


3.設置したい自分のブログなどのRSSを取得する。
 参照:http://web-terminal.blogspot.jp/2013/07/19feedrssatom.html

4.下記のようなJavascriptファイル(feed.js)を作成してHTMLで読み込む。

// JavaScript Document
google.load("feeds", "1");

function initialize() {
  var control = new google.feeds.FeedControl();
  var feedurl1 = "取得した表示させたいRSSのURL";

  control.addFeed(feedurl1, "RSS設置部に表示させたいタイトル");
  control.draw(document.getElementById("feed"));
}
google.setOnLoadCallback(initialize);

5.これだけで設置は完了。ここから先はCSSなどで見栄えを整えていく。

他、設置に関するCSS関連補足情報。

  • CSSの指定は、ブラウザHTMLファイルを開いた(表示した)状態で要素検証や開発モードにして、指定したい場所の記述(子孫セレクタ)を調べながら行う。
  • 「white-space: nowrap;」⇒表示上複数行になるものを折り返して表示させず、1行に表示できるところまでだけを表示する。RSS設置で表示されるブログなどのタイトル部に有効。
  • 「text-overflow: ellipsis;」⇒表示しきれない(範囲からオーバーフローする)場合に表示可能範囲の最後を「…」表示にする。RSS設置で表示されるブログなどのタイトル部に有効。

以下、上記2つをCSSで指定した場合のコードと表示結果。

・どちらも指定しない場合

div#feed .gfc-result div.gf-title {
 width: 400px;
 height: 30px;
}

この場合の表示結果。
f:id:porco_webangya:20130801014504j:image:medium←クリックで拡大表示

・「white-space: nowrap;」のみ指定した場合

div#feed .gfc-result div.gf-title {
 width: 400px;
 height: 30px;
 white-space: nowrap;
}

この場合の表示結果。
f:id:porco_webangya:20130801014940j:image:medium←クリックで拡大表示

・「text-overflow: ellipsis;」のみ指定した場合

div#feed .gfc-result div.gf-title {
 width: 400px;
 height: 30px;
 text-overflow: ellipsis;
}

この場合の表示結果。
f:id:porco_webangya:20130801015120j:image:medium←クリックで拡大表示
「text-overflow: ellipsis;」だけでは意味がないように見える。

・両方を指定した場合

div#feed .gfc-result div.gf-title {
 width: 400px;
 height: 30px;
 white-space: nowrap;
  text-overflow: ellipsis;
}

この場合の表示結果。
f:id:porco_webangya:20130801015248j:image:medium←クリックで拡大表示

上記結果から、使うなら両方を一緒に指定するのが良いと思われる。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/porco_webangya/20130731/1375287579
 |