さて、本題です。
■必要なもの
１．WordpressのRSSフィードURL…【インストール先のURL】+【?feed=rss2】です。（ここのブログの場合）
２．Google AJAX Feed APIのキー…ココから取得してください　※英語ですがURLを入れてGenerate API Keyボタンを押すだけ
３．表示させるHTML…設置をお考えのトップページ等
４．取得コード…後記

■設置方法
１．</head>直前に

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=【取得したキー】”>
</script>
<script type=”text/javascript”>
google.load(“feeds”, “1″);
</script>

を挿入。

２．表示させるHTMLの希望箇所に下記ソース

<div id=”feed”></div>
<script type=”text/javascript”>
function initialize() {
//RSSフィードの取得
var feed = new google.feeds.Feed(“【WordpressのRSSフィードURL】”);

//取得するフィード数
feed.setNumEntries(10);

//実際に読む込む
feed.load(function(result) {

//読み込めたか判別
if (!result.error) {

//表示部分を選択
var container = document.getElementById(“feed”);

//変数の初期化
var useFeed = “”;

//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++) {

//Feedを一つ抽出
var entry = result.feed.entries[i];

//リストに挿入
useFeed +=
‘<li><a href=”‘ + entry.link + ‘”>’ + entry.title + ‘</a>’;
}

//リストを表示させる
container.innerHTML = ‘<ul>’ + useFeed + ‘</ul>’;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</div>

を挿入。

■CSS装飾
CSSで背景色やPaddingや下線をデザインすれば既存のHPのデザインとマッチします。

動きましたか？
時間があるときにWordpressで登録した画像の取得も書こうと思います。

アールベルアンジェMie様

アールベルアンジェMie様のHP完成しました。

サービスの実稼働は24日（木）という事で、興味がある方は後連絡下さい。「キャストエイジの紹介です。」と言えば何かいいことがあるかもしれません。

トップページ

三一節（韓国の独立運動記念日）に攻撃を仕掛けるという予告があったとか無いとか。

ロシアでの韓国人留学生殺人とキム・ヨナに対する妄言でヒートアップした模様。

攻撃手段は違法とされているDDos AtackではなくF5ボタンを連射することでページを更新を繰り返しサーバーに負荷をかけるという何とも地味な攻撃。

でも実際サーバーが落ちたからたいしたものですね。

２ちゃんねる サーバ負荷監視所　3月2日14：00

韓国側で設置された攻撃用コミュニティーサイトには攻撃時に9万人近くユーザーがいたとかいないとか。

そういう一丸となって一つのことをやり遂げるエネルギーをいいことに役立たせればよいのに。

FireFoxで表示

IEで表示

Dreamweaverのプレビューだと問題ないのでやっかいなんですよね。

align=”left”をfloat:leftにしたら直りました。

<img alt=”" src=”images/map.gif” style=”margin-left:47px; margin-right:20px; ” align=”left” />

↓↓↓

<img alt=”" src=”images/map.gif” style=”margin-left:47px; margin-right:20px; float:left” />

float設定後のIEで表示

おかげさまで全てのブログやカレンダーがあぼーんしました。

Googleにキャッシュされていたので自力で取り出してシコシコUPし直します。

気をつけなはれや。

今回はFirefoxでは正常に見えたテーブル内の画像達ですが、IEだとスキマスイッチ。

こちらはFirefoxでCASTAGEのトップページを開いた時の画像。

Firefoxで表示

こちらはIEで開いた時の画像。

IEで表示

何のことはない、CSSでimgの属性にvertical-align:top;をインしてあげればよい。

CASTAGEで使用しているCSSのimgはこちら

原因は画像もインラインなのでそのままで使うとbaselineが適用されているので下がちょっと空いてしまうからだそうです。

スクリプトにIDとパスを埋め込まなければならんとのことで探したのですが見あたらず、「Flickr　ID」で午後ったらflickr ID Checkerなるものがでてきました。

人生においてそれほど使う機会は無いと思いますが便利ですね。

ちなみに全然関係ないんですが、「ら　く　だ」はググってもダメですがYahooだとワード予測的にクリス松村が出てきました。

サンプルはこんな感じです。

CASTAGE FLOW