Googleカレンダーを自分のWebページに貼り付ける

カテゴリ:QHM

Googleカレンダーを自分のWebページに貼り付ける

こんにちは、市民パソコン教室北九州小倉校の篠原です。


今日は、QHMで、Googleカレンダーを貼り付ける方法です。

Googleカレンダーを貼り付けるには、まずアカウント登録しましょう

 googleカレンダーが自分のホームページに貼り付けることが出来ることが分かったので、挑戦してみました。
 教室のスケジュール管理に使えるかもしれません。
 では。
図1-1 googleカレンダーのページに移動します。(アカウントの登録が必要です)


googleカレンダーを選択


図2-1 「設定」ボタンをクリックします。
図2-2 リストから「設定」をクリックします。


googleカレンダーの表示と設定の選択


図3-1 「カレンダーの設定」画面が表示されますので、「カレンダー」リンクをlクリックします。


googleカレンダーの設定画面


図4-1 自分の名前のリンクをクリックします。


googleカレンダーの設定


図5-1 カレンダーの色や大きさを調整できますので、必要であれば、「カスタマイズ」リンクをクリックします。
図5-2 カスタマイズの必要がなければ、ここのコードを「Ctrl+C」でコピーします。


googleカレンダーんおカスタマイズの選択


図6-1 カレンダーのカスタマイズ画面です。
図6-2 カレンダーの表示サイズを指定できます。ページサイズに合わせて調整してください。
図6-3 「HTMLの更新」ボタンをクリックします。
図6-4 表示されているhtmlのコードをコピーします。


googleカレンダーコードをコピー


最後に、自分のWebページの編集画面を開いて、コピーしたコードを貼り付けます。
 QHMでは#html{{}}を使います。

#html{{
<iframe src="https://www.google.com/calendar/embed?src=googleaccount%40gmail.com&ctz=Asia/Tokyo" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

 赤の下線部分は、自分のアカウント(@gmail.comの@の前の部分)が入ります。

補足:本来</iframe>の後には}}を描かなくてはいけません。QHMで表示しようとしたのですが、うまくできませんでした。調べてわかったら修正します。

QHMが使える方なら簡単にできますよね。

GoogleカレンダーのWebページへの貼り付けの説明はこれで終わりです。
この情報は、2012.11.25現在の情報です。





市民パソコン教室北九州小倉校の「パソコン無料相談」も見てね。

コメント


認証コード7582

コメントは管理者の承認後に表示されます。