ご無沙汰です。

暑かった夏もようやく終わってくれたようで、ここ数日はクーラーをつけづに仕事をしています。

先週から仕事仲間と一緒にサイト制作＆一部WordPressの組み込み＋携帯サイトの
導入作業をしています。
今日は『サイトトップページにWPの記事一覧を表示する』の一つの方法メモ。

★今回は「Aｶﾃｺﾞﾘｰ」「Bｶﾃｺﾞﾘｰ」の記事をそれぞれ独立して構築したかったのでWPは2つ設置。
　Ver3.0からMTのようなマルチブログ化も可能になりましたが、
　今回は『Aｶﾃｺﾞﾘｰ』だけの検索フォームが必須項目だったので、ちょっとアナログな方法で
　こうちくすることに・・・しました！

逆に『Bｶﾃｺﾞﾘｰ』のみすべての記事をWebサイトのトップページに表示したかったので、
今回は「RSSを表示させる」方法をとることにしました。

仕掛けは「Google Ajax Feed API」を利用すること。
今回はこちらで紹介している方法を参考にさせてもらいました。

jQueryでRSSを取得しリストで表示

＜HTML＞

//head内にjQueryを
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
//body内にリスト表示させる場所を作ってあげる
<div id="list-01">
<!-- ここにフィードの内容が表示される -->
</div>


＜JavaScript＞

$(function(){
        //RSSが同じドメインにある場合

        $.ajax({
            //同じドメインにあるXMLファイルのある場所を指定してあげる
            url: 'rss.xml',
            //非同期通信
            async: true,
            //通信結果をキャッシュしない
            cache: false,
            dataType: "xml",
            success: function(xml){
                $(xml).find('item').each(function(i){
                    if (i == 10) {
                        return false;
                    }
                    var title = $(this).find('title').text();
                    var url = $(this).find('link').text();
                    var date = $(this).find('pubDate').text();
                    //月表示を数字表示に変換する
                    date = dateChanger(date);
                    //idがlist-01の箇所にリストで書き出す
                    $('#list-01').append('<li>' + date + '<a href="' + url + '">' + title + '<\/a><\/li>');
                });
                //idがlist-01にあるliをolで括る
                $('#list-01 li').wrapAll('<ol><\/ol>');
            },
            //エラー表示
            error: function(xml){
                $('#list-01').append('<p>Feedの読み込みに失敗しちゃいました。<\/p>');
            }
        });
        //月表示を数字表示に変換する
        var dateChanger = function(str){
            var mydate = new Date(str);
            yy = mydate.getFullYear();
            mm = mydate.getMonth() + 1;
            dd = mydate.getDate();
            if (mm < 10) { mm = "0" + mm; }
            if (dd < 10) { dd = "0" + dd; }
            datestr = yy + "年" + mm + "月" + dd + "日";
            return datestr;
        };
});

これを実際にトップページで読み込ませて設置。
今回は日付の表示はいらないので（タイトルだけでOK）
日付に関する表示はCUTしました。

今回は『同じドメイン内にRSSが設置されていることが前提』の方法です。

違うドメインからのRSSを引っ張ってくるやり方はまた別で。

あっという間の9月でした。
今年もあと3ヶ月なんて・・・信じられないくらい毎日が早い気がします。

さて今日は、タイトル通りの「任意の画像をランダムに表示させる」Javascriptです。
ほとんど自分用のメモです＾＾；　結構忘れてしまいがちなので・・・。

個人・商用ホームページを問わず、シンプルなデザインだと
再訪するユーザーに飽きられてしまうこともあると思います。

またはアフィリエイトやドロップシッピング用のサイトで
広告バナーが増えすぎて1ページのボリュームが増えすぎて困る方にも、
ページを更新するたびにバナー広告がランダムに切り替わると
ユーザーに新鮮な印象を与えることができるかもしれません。

ちょっとしたJavascriptを追加すればOKです。

実際にWebサイトを作っているときに利用する機会が
なかなかないのですが・・・。

MENU部分のナビゲーションの２階層目などを
アニメーションで開閉、展開させるスクリプトをコリス様のページで
紹介していたので、MEMOです。

 

Ｍｏｖａｂｌｅ　Ｔｙｐｅはディフォルトでは前の月、次の月の表示はありません。
月別のカテゴリーから前の月のアーカイブ記事をたどることも出来ますが、
できれば簡単に月の移動をさせたいなぁ・・・ということで、
月送りカレンダーのＡｊａｘ版を導入してみました。

導入の参考にさせていただきましたのは、
小粋空間さまの『Ａｊａｘ　月送りカレンダー（ＭＴ４版）』です。

導入方法が詳しく紹介されていますが、自分用のカスタマイズをメモメモ。

今日は朝一番で仕事関連のデータをサーバーにアップしようとしたとたん、
なぜかCSSがまったく読み込まれず、レイアウトがメチャクチャに・・・

その後、データの確認作業をしたところ、
CSSの記述が・・・ごっそり消えてしまいマシタ・・・
間違えてDeleteキーでも押してしまったのか？
理由はまったく分かりません。
（電源が落ちたわけでもないし・・・）

とにかく記述したはずのCSSの内容を泣く泣く書き直して
作業終了（とりあえず）
あ～せめて一度サーバーにアップするとか、
バックアップを取った後にしてほしかったデス。

とにかく落ち着いたので、数日前のMT自分用メモを。

そろそろ記事が多くなってきたので、ページの下部にある
『ページトップへ戻る』をクリックしたときに
スルスル～っと移動するJavaScriptをMTに組み込みました。