Googleカレンダーをホームページに表示させる方法

予約状況やスケジュール案内など、Googleカレンダーを使って、HP上にカレンダー表示をさせたい場合の方法です。
Googleカレンダーを使うと、スマホやタブレットからも更新できますし、外にいる時などでもどこからでも更新できますので便利です。

そのまま吐き出されるタグだと、レスポンシブデザインに対応していないので、対応させる方法もちょこっとついでに紹介。

1. まずはGoogleにログイン!

ca_01

2.Googleカレンダーを表示する

ca_02

3.新しいカレンダーを作成する

ca_03
「マイカレンダー」の右横の▼をクリックして、「新しいカレンダー作成」にすすみます。

ca_04
カレンダー名、説明を入力します。
そして「このカレンダーを一般公開する」にチェックを入れて、上部の「カレンダーを作成」ボタンをクリックします。

ca_05

そうすると、このように「一般公開してもよろしいですか?」とという画面が出ますが、HPに公開するものを作っているので、もちろんOKですね!

4.カレンダー設定をする

ca_06

先ほど新規作成したカレンダーの「カレンダー設定」をクリックします。
ca_07

そうすると、画面にこのようにタグが表示されています。この部分をHTMLに貼り付けると、インラインフレームとして表示されます。
この時に、「色やサイズなどをカスタマイズします」という所で、カスタマイズも可能です。

※このままのタグを貼ると、レスポンシブデザインの場合はインラインフレーム部分がはみ出てしまいますので、width=”800″ という部分を width=”100%” に書きかえると、伸縮してくれますので、レスポンシブ対応になります!

5.カレンダーに予定を書く

ca_08

あとはカレンダーに予定を入れて行きましょう!
ca_09

タイトルを入れた部分がカレンダーに表示されます。
その下の「終日」のチェックを外すと開始と終了の時間も入力することが出来ます。
予定の色もそれぞれ設定出来ますので、色分けしたい場合はチェックをして下さい。

関連記事

  1. Google AJAX Feed APIで静的HTMLに外部ブログを読…

  2. fc2ブログからWordPressへのお引っ越し

  3. レスポンシブデザインでインラインフレームをフィットさせる

  4. CSS3でドロップシャドウ(影)を付ける

  5. WEBサイト内の電話番号表記がskype番号になってしまうのを制御する…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WordPressのバックアップ
  2. 女性起業家の方へ

アーカイブ

制作実績一覧

  1. office-aki
  2. looplus 神戸の不動産買取・売却・リフォーム
  3. 12starz
  4. SOARist
  5. ダンスウェア ララック様
  6. デジタルイースト
  7. 西表島 シュノーケル・カヌーツアーcrossriver
  8. ハミング
  9. hearty