Comments
Description
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&showPrint=0&showCalendars=0& ;showTz=0&height=500&wkst=2&bgcolor=%2366ff99&src=mo.ri.sa.ki.hi.to.shi %40gmail.com&color=%235C1158&src=ja.japanese%23holiday%40group.v.calendar.googl e.com&color=%232952A3&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-