...

「Google カレンダー」をホームページへ埋め込む方法

by user

on
Category: Documents
3

views

Report

Comments

Transcript

「Google カレンダー」をホームページへ埋め込む方法
「Google カレンダー」をホームページへ埋め込む方法
予定表など、Google カレンダーをホームページに埋め込む方法を説明します。





実際にページに埋め込んだカレンダーです
上記のおまじない(設定)です
前提条件及び処理概要
埋め込みコード取得までの手順
カレンダーのカスタマイズ
実際にページに埋め込んだカレンダーです
元々の大きさ横 800px、縦 600px を 700x500px に縮小して当ページに埋め込んでいます。
上記のおまじない(設定)です
#html{{
<iframe
src="https://www.google.com/calendar/embed?title=%E8%97%A4%E5 %BF%83QHM%E3%82%AF%E3%83%
A9%E3%83%96%E3%81%AE%E4%BA%88%E5%AE%9A%E8%A1%A8&amp;showPrint=0&amp;showCalendars=0&amp
;showTz=0&amp;height=500&amp;wkst=2&amp;bgcolor=%2366ff99&amp;src=mo.ri.sa.ki.hi.to.shi
%40gmail.com&amp;color=%235C1158&amp;src=ja.japanese%23holiday%40group.v.calendar.googl
e.com&amp;color=%232952A3&amp;ctz=Asia%2FTokyo" style=" border:solid 1px #777 "
width="700" height="500" frameborder="0" scrolling="no"></iframe>
}}
-1-
前提条件及び処理概要
1.
2.
3.
4.
5.
6.
Google アカウントを取得していること。(Google カレンダーには必須です)
カレンダーの更新は、Google カレンダー側で行うこと。
カレンダーの詳細編集は熟知しているという前提で、ここでは編集方法は割愛します。
Google カレンダーのページより埋め込みコードを取得する。
取得された埋め込みコードを QHM の該当ページに HTML タグとして貼り付ける。
当然のことながら Google カレンダー側の更新結果は QHM のページに反映されます。
前記のおまじないの一般形
コピー & 貼り付け
#html{{
(ここに Google カレンダーで取得した埋め込みコードを挿入する)
}}
埋め込みコード取得までの手順
1.Google カレンダーのページで「マイカレンダー」~「設定」をクリックする。
-2-
2.該当のカレンダー名称をクリックする。
3.「色やサイズなどをカスタマイズします」をクリックする。
-3-
4.埋め込み支援ツールの画面で埋め込みコードが取得できます。
上記の埋め込みコード(丸印)を全選択~コピーして QHM の該当ページで貼り付けてあげれば、Google
カレンダーを埋め込むことができるようになります。
カレンダーのカスタマイズ
前記3.の「色やサイズなどをカスタマイズします」をクリックする。
-4-
カスタマイズ項目にはいろいろありますが、幅と高さを QHM 側のページサイズに合わせて調整して下さ
い。
-5-
カレンダーのカスタマイズ処理が終わったら「HTML を更新する」を必ず押して下さい。
このボタンを押し忘れると QHM 側のカレンダーにカスタマイズ結果が反映されません。
-6-
Fly UP