アメブロへのスケジュール掲載

☆*･カフェビバーチェ｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00～15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に！」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。

少人数グループのイベント会場としてもご活用くださいね。

☆*･゜ﾟ･*:.｡..｡.:*･☆･*:.｡. .｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

おはようございます。
夢が叶うブログのHirokoです。

今日は、アメブロへの
スケジュール掲載についてです。

手順は、
Googleカレンダーのホームページへの掲載とほぼ同じですが、
アメブロでは、iframe(インラインフレーム)を
使うことができませんので、
その対策が必要になります。

対策手順は以下のようになります。

　①　アメブロの「ブログ管理」から「設定・管理」を
　　　クリック。画面が変わったら

　　　「プラグインの追加」をクリックして、
　　　「フリープラグイン」タブをクリックします。

　②　その入力域に
　<scriptsrc="http://www.google.com/jsapi">　
　</script>　<script>google.load('jquery', '1.6.2');
　</script>　<script>(_JQ162_=jQuery)(function()
　{$=jQuery=_JQ162_;});</script>

　　　と入力し、さらに
　<!-- iframe(インラインフレーム)を使用する -->

<script type="text/javascript"><!--

$(function(){

  $("div.iframeCreate").each(function(i, O){

    var tag = 'iframe';

    var attrs = new Array("src", "width", "height", "frameborder", "scrolling", "marginwidth", "marginheight");

    for(var i in attrs){

      if ($(O).attr(attrs[i])) {

        tag += ' ' + attrs[i] + '="' + $(O).attr(attrs[i]) + '"';

        $(O).removeAttr(attrs[i]);

      }

    }

    tag = "<" + tag + "></iframe>";

    $(O).empty();

    $(O).append(tag);

  });

});

//--></script>

　　　と続けます。
　　　ここまでが準備です。

　③　実際に記事にカレンダーを貼り付けるには。。。
　　　Googleカレンダーのコードを以下のように
　　　修正します。
　　　<iframe ～～～～～></iframe>
　　　　を
　　　<div class"iframeCreate" ～～～～～></div>
　　　　に変更！

　④　記事を公開します。
　　　エラーが出なければ成功です。    

いかがでしたか？
コピペして貼り付けたり、コードの修正が手間かもしれませんが。。。
トライしてみてください。

明日は、予約フォームの作り方について

お伝えします。

今日も最後まで読んでいただいてありがとうございました。