WordPressやCSS・HTML、その他ホームページ制作に必要な知識のメモとして・・・

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

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

コメントをお寄せ下さい!