ホームページの更新システムを一から構築するのは骨が折れるのでBlogを使ってしまおう。
今回ご紹介するのは弊社のブログでも採用しているWordpress。 最近のサーバーは簡単インストールと銘打ち、Wordpressをワンクリックでインストールするサービスが多い。
GMOインターネットサービスのお名前.comレンタルサーバーがスペック・サービス面でコストパフォーマンスが良いです。

さて、本題です。
■必要なもの
１．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様のHP完成しました。

 

東京都23区で出張マッサージをやっているMana&Moana様のHPがまもなく完成を迎え、Webサーバーにアップロードをしました。

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

住環境ジャパン様のサーチエンジンオプティマイズを施工しております。

ネットマナーの問題で2chが攻撃されたみたいですね。

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

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

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

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

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

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

CASTAGEのHPを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” />

Movable Typeの勉強をしようとサーバーのデータベースをいじっていて謝って削除してしまいました。

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

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

気をつけなはれや。

Web制作の動作確認は基本的にFirefoxで行っているのですが、余裕こいて最終的にIEでテストをすると痛い目に遭う。

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

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

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

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

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

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

画像ギャラリー関連のスクリプトでFlickrにUPされた画像を呼び出すというものがあったのでアカウントを作りました。

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

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

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

CASTAGE FLOWをホームページのフリー素材に公開。

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