スポンサーサイト

一定期間更新がないため広告を表示しています

    -     -     ▲ top

ブログの過去の記事をランダムに表示させる「BStir」(英語)が日本語に対応してた。(プチカスタマイズ付き)

てさて、今回はうちのサイドバーに置いてある「FX.ACCORDION(タブ・アコーディオン)」(紹介記事)のコンテンツボックスシリーズ(2回目)です。

前回の記事では、「 ブログパーツをさがせ」さんとうちのRSSフィードを「 Yahoo! Pipes」を使ってミックス。
さらに「Google AJAX Feed API」を使って、ファビコンとはてブ数を表示させました。



そして今回はブログの過去の記事をランダムに表示させる「BStir」(英語)を使った「Randam Post」の解説。

この「BStir」(英語)は過去にも紹介しましたが、その時は日本語に未対応。見事に文字化けをおこし、こりゃダメだと。
ところが知らぬ間に日本語も使えるようになっていたからビックリもの。

詳しくはこちらのサイトを。
そうなんですよ。コードに「charset="utf-8"」を追加するだけで文字化けが防げます。

もちろんページが読み込まれるたびに表示される記事もランダムに。
そしてついでに自動更新なんてものを付けてパーツの中に放り込んでみました。
ちなみにJavaScriptはほとんど使っていません。(知識ありませんから!)

では、覚え書き。

1).まず「BStir」(英語)を使って、表示。
Powered by Stuff-a-Blog
ここからは長くなりますので、続きにて。
でも、かなり適当なのでスルーしてくれー

続きをご覧になられる奇特な方へ。
インラインフレームばりばりなので許してくだせえ。

2).インラインフレーム(iframe)を作るためhtmlを作成する。
Notepad(テキストエディタ)にスクリプトをコピーして、ページの基本タグ(htmlタグ)で囲む。
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>random post</title>
</head>
<body>
<script language="Javascript" type="text/javascript" src="http://stuffablog.com/bstir/service?blogurl=sasori-flower.jugem.jp/&output=html&results=5&border=0&snippets=no&encoding=UTF-8&keywords=" charset="utf-8"> </script> 
<div style="text-align:right;"><font size="1">Powered by <a href="http://stuffablog.com">Stuff-a-Blog</a></font></div>
</div>
</body>
</html>
拡張子をhtmlで保存して、サーバーにアップ。
JUGEMではhtmlファイルはアップできないので、ここではSeesaaブログを利用。(ごめんなさい)

3).iframeタグで囲んで、ページに埋め込む。
例:
<iframe src="http://sasori-flower.up.seesaa.net/post/randam_post_01.html">未対応ブラウザでは表示されません</iframe>


4).インラインフレームの大きさを調整。
iframeタグに width="180"、 height="300" を追加。
frameborder="0"で枠線を消す。


5).文字の大きさやリンクを調整。
2)で作ったhtmlファイルのhead要素内にCSSを記述して設定する。
「BStir」ではpタグが生成されるので、pタグにフォントサイズを指定。
リンクも下線が入らないように指定。
例:
<style type="text/css">
<!--
p {
    font-size: 12px;
}
a {
    text-decoration: none;
}
p a:link,p a:visited {
    color : #ffa500;
}
p a:hover,p a:active {
    color : #ff6600;
    background-color : #ffcc99;
}
-->
</style>


6).クリック時にフレームをはずす。
このままだとリンクをクリックした時に、インラインフレーム内で表示されてしまうのでtarget="_top" を指定して回避。
リンク元のページを基準位置にするため、baseタグを使用。
これも2)で作ったhtmlファイルのhead要素内に記述します。
<head>
<base target="_top">
</head>


7).インラインフレームの背景に画像を入れる。
これは簡単。bodyタグに背景画像を指定するプロパティbackground-imageを記述。

8).一定時間後に自動更新させる。
基本的には閲覧者にはハタ迷惑な自動更新ですが、これはススーっと眺めていただくのが目的で付けてみました。(自分が見てても楽しいってのもある)

まあ、検索すればJavaScriptのサンプルが出てきますが、metaタグでも可能。
headタグに囲まれた部分へ記述します。
例:30秒後に自動でリロード(content="秒数")
<meta http-equiv="Refresh" content="30">
例:JavaScriptの場合
<script type="text/javascript">
<!--
function rld()
{
location.reload();
}
setTimeout("rld()",30000);
// -->
</script>

こんなかんじです。(縦を少し長めにしました)
9).ちょっとオマケでAjaxモドキ。
リロードしているあいだにAjaxでよくあるLoadingアニメをやってみました。
といってもあくまでもモドキ。有名なprototype.jsなどのエフェクトは敷居が高いので、簡単なJavaScriptで。

まずLoadingアニメをこちらのサイトからダウンロード。
んで、ページのロードが終わるまで別画面を表示するJavaScriptはここから。
では、最後にiframeタグをdivタグで囲んで枠線をつけてみましょう。
すると、こんなかんじです。

以上、お疲れさまでしたー。
今度はきちっとAjaxを覚えてみます。(脳みそがあれば)

    comments(2)     trackbacks(0)     ▲ top

スポンサーサイト

    -     -     ▲ top

Comment

sasoriさん,はじめまして.路上の風景のyanzです.
紹介していただき,ありがとうござました.
過去に書いた記事へのアクセシビリティを求めて,Bstirを貼り付けていますが,なかなか重宝しています.ただし,結果のほどはわかっていませんが(笑)
Bstirはgoogleブログサーチの検索結果を元に引っ張ってきてるようなので,比較的新しいポストが表示されやすいです.もう少し古いものを表示したり,キーワードなどを指定できるといいのですけど.

Posted by: yanz | at: 2007/07/30 6:17 PM

>yanzさん。

はじめまして。
紹介というほどのものでもありませんが、コメントまでいただいてありがとうございます。

Bstirはたしかにいいですね。
うちは自分でのほほんと眺めて楽しむ程度なのですが・・・
(自己満足^^;)
以前は違う方法で文字化け回避をしていました(実はココログに置いてあった。おい!)ので、貴重な情報でした。
重ねてありがとうございました。

キーワードまでは無理みたいですね。
うーん。残念!

Posted by: sasori | at: 2007/07/31 8:21 PM


Trackback

Trackback URL

http://sasori-flower.jugem.jp/trackback/993

  • » ブログパーツの設置方法 (links with BlogDeco)

 
サンプル・イベント・モニターならBloMotion