color_RGB.png?width=160&height=35&name=logo(w)color_RGB.png "fukucale"){kind=small}
GoogleカレンダーをWebサイトに埋め込む方法は、以下の4つのステップで簡単に行えます。
Googleカレンダーの画面右上にある歯車アイコンをクリックし、［設定］を選びます。
設定画面の左メニューから、Webサイトに追加したいカレンダーの名前をクリックしましょう。
［カレンダーの統合］セクションに進み、表示されたiframeコードをコピーします。
このコードは、Webサイトにカレンダーを埋め込む際に必要になります。
コピーしたコードを、WebサイトのHTMLエディタに貼り付けます。
カレンダーを表示したい場所に、コードを配置しましょう。
埋め込んだカレンダーは、デフォルトではカレンダーを共有している人だけに表示されます。
すべての訪問者が閲覧できるようにするには、以下の手順でカレンダーを「一般公開」に設定する必要があります。
1.カレンダーの設定画面を開き、アクセス権の項目で［一般公開］にチェックを入れる
2.公開用の埋め込みコードを、再度取得して貼り付ける
※予定がすべて公開されるため、機密情報が含まれないよう注意してください
表示するカレンダーをカスタマイズする方法
Googleカレンダーは、Webサイトのデザインや用途に合わせて柔軟に表示内容をカスタマイズできます。
必要に応じて［カスタマイズ］をクリックし、設定を変更してください。設定後は、新しいHTMLコードを取得し、Webサイトに反映させましょう。
まず、以下の項目を表示するかしないかを選べます。
- タイトル
- ナビゲーションボタン
- 日付
- 印刷アイコン
- タブ
- カレンダーリスト
- タイムゾーン
さらに、以下のレイアウト調整も可能です。
- サイズ
- 色
- 表示単位（月ごと・週ごと・1日ごと）
- 週の開始日
- 言語
- タイムゾーン
カスタマイズを活用すれば、GoogleカレンダーがWebサイトに自然に溶け込み、より取り入れやすくなるでしょう。
訪問者が、Webサイト上のGoogleカレンダーの予定を自分のカレンダーに簡単に保存できる「予定保存ボタン」を導入すると、より便利に使えます。
この機能を追加する手順は、以下の通りです。
Webサイトに公開するカレンダー上で、予定を作成または編集します。
忘れずに［公開］を選択してください。
予定の詳細画面から［オプションメニュー］を開き、［予定を公開］を選びましょう。
表示された「予定を公開」ウィンドウで生成されたHTMLコードをコピーします。
WebサイトのHTMLエディタを開き、保存ボタンを表示したい箇所にコードを貼り付けたら完了です。
GoogleカレンダーをWebサイトに追加することで、訪問者が簡単にスケジュールを確認したり、予定を保存したりできます。
この記事で解説した手順を参考に、カレンダーの埋め込みや保存ボタンの追加を試してみましょう。
これらの機能の活用で、Webサイトの利便性も高まります。
関連記事
