MENU
WEB制作技術ノート｜HTML・CSSやWordPress、学習・転職のことなど様々な情報を発信しています。
  1. ホーム
  2. Web制作
  3. ホームページにGoogleカレンダーを埋め込む方法について

ホームページにGoogleカレンダーを埋め込む方法について

Web制作

ホームページにGoogleカレンダーを埋め込んで、
イベントやスケジュールを簡単に共有したいなという時ってありますよね・・

営業日やイベント日程、予約状況などを共有したい！
カレンダーの色やサイズ、枠線なども自由にカスタマイズできるの？

Googleカレンダーは登録した情報をカレンダー形式で表示でき、簡単にホームページに埋め込むことができるため、とても便利です。

カレンダーの色やサイズ、枠線など自由にカスタマイズできますし、
レスポンシブデザインにも対応しているので、スマートフォンやタブレット端末でも見やすく表示されます。

この記事では、Googleカレンダーをホームページに埋め込むための手順をご紹介します！

目次

ステップ1: Googleカレンダーを公開する

Googleカレンダーにアクセス:

カレンダーの設定を開く:

  • 左側の「マイカレンダー」リストから、埋め込みたいカレンダーの横にある三点アイコン（⋮）をクリックし、
    「設定と共有」を選択します。

カレンダーを公開する:

  • 「カレンダーの設定」ページで、「カレンダーを公開」にチェックを入れます。

ステップ2: 埋め込みコードを取得する

埋め込みコードの生成:

  • 「カレンダーの統合」セクションに移動し、「カレンダーを埋め込む」オプションを見つけます。
  • ここで表示されるiframeコードが埋め込みコードです。このコードをコピーします。
<iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

ステップ3: HTMLコードに埋め込む

ホームページのHTMLファイルを開く:

  • 使用しているホームページビルダーやCMS（WordPressなど）でHTMLを編集できる場所を開きます。

埋め込みコードを貼り付ける:

  • カレンダーを表示させたい場所に、先ほどコピーしたiframeコードを貼り付けます。
<div style="max-width: 100%; overflow: auto;">
  <iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

ステップ4: カレンダーのカスタマイズ

サイズの調整

iframeのwidthやheight属性を調整して、カレンダーの表示サイズを変更できます。

例えば、レスポンシブデザインを考慮する場合、
次のようにCSSを使用してカレンダーを柔軟に調整できます。

<div style="max-width: 100%; overflow: auto;">
  <iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン" style="border: 0; width: 100%; height: 600px;" frameborder="0" scrolling="no"></iframe>
</div>

表示オプションのカスタマイズ

埋め込みURLにパラメータを追加して、カレンダーの表示方法をカスタマイズできます。

以下は主なパラメータの例です。

  • showTitle=0：タイトルを非表示にする
  • showDate=0：日付を非表示にする
  • showNav=0：ナビゲーションバーを非表示にする
  • showPrint=0：印刷アイコンを非表示にする
  • showTabs=0：タブを非表示にする
  • showCalendars=0：他のカレンダーを非表示にする
  • mode=AGENDA：アジェンダビューに設定する
  • mode=WEEK：週間ビューに設定する
  • mode=MONTH：月間ビューに設定する

例えば、月間ビューでタイトルとナビゲーションバーを非表示にしたい場合、
次のようにURLを修正します。

<iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン&mode=MONTH&showTitle=0&showNav=0" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

まとめ

Googleカレンダーをホームページに埋め込むことで、簡単にスケジュールやイベントを共有できます。

カレンダーの公開設定を行い、取得した埋め込みコードをHTMLに貼り付けるだけで表示可能です。
また、iframeの属性やURLのパラメータを調整することで、表示方法をカスタマイズできます！

これにより、ユーザーにとって見やすいカレンダーを提供することができるので
是非活用してみてください！

Web制作
目次