Googleカレンダーをホームページに埋め込み！スケジュールカレンダーを簡単に表示しよう

2021年7月6日更新

Webサイトにカレンダーを表示しよう

ホームページやブログなどWebサイトでレッスンやイベントのスケジュールをお知らせするとき、もっと見やすくしたいなーって思いますよね。そんな時、カレンダーで表示できればスケジュール共有がもっと便利になりそう。 そこで、GoogleカレンダーをWebサイトに埋め込む方法をご紹介。HTMLなど専門的な知識がなくても、意外と簡単に設置できます。ぜひ、試してみてくださいね～。

公開用のGoogle Calendarを作成しよう

Googleにログイン

Googleアカウントがない場合はアカウントを作成しましょう。

Google カレンダーを表示

右上の「 □□□ 」をクリック。アプリ一覧の中から「カレンダー」をクリックします。

公開用のカレンダーを作成

「他のカレンダー」の右にある「＋」をクリック。「新しいカレンダーを作成」をクリックします。

「名前」にカレンダーの名称を入れ、「カレンダーを作成」ボタンをクリックすると、新しくカレンダーが作成されます。

Google カレンダーにスケジュールを登録しよう

レッスンを登録

Googleカレンダーにレッスンスケジュールを登録していきます。レッスンの開催日時をクリックします。登録するカレンダーを「▼」から選択します。（今回は、先ほど作成した「青山Yogaレッスンカレンダー」を選択します。）

「その他のオプション」をクリックすると、より詳細な情報も入力できます。「保存」ボタンで登録します。

スケジュールが表示できました。

カレンダーをWebサイトに埋め込もう

Googleカレンダーをホームページやブログなどのウェブサイトに、インラインフレームを使って貼りつけ表示させます。

カレンダーの公開設定をする

公開したいカレンダーの右にある「（A）」をクリック。「設定と共有」をクリックします。

「アクセス権限」をクリック。「一般公開して誰でも利用できるようにする」にチェックを入れます。

「一般公開してもよろしいですか？」というメッセージが表示されるので、「OK」をクリックします。

GoogleカレンダーのHTMLコードを取得

「カレンダーの結合」をクリック。「埋め込みコード」にある貼り付け用のHTMLタグをコピーします。

Webサイトに貼り付ける

コピーしたコードを、表示させるホームページに貼り付けます。ブログツールの場合は、エディタをHTMLコード編集モードにして、該当箇所にペーストします。

こんな風に表示されます！！

週表示で確認できたり、翌月のレッスンもみれます。

（おまけ）スマホでもキレイに見せたい

スマートフォンなど小さな画面で表示したときにも、見やすいカレンダーにしたいですね。そんな時は、グーグルカレンダーを貼り付けるためのHTMLタグで調整が可能です。画面の表示サイズに最適化させたい場合は下記の部分を書き換えてから貼りつけてください。

埋め込み先のホームページやブログにより、スマホでの見え方は変わってきます。どんな表示になるかは一度、確認してみてくださいね。 上記の方法は簡易的なものです。きちんとレスポンシブ対応をすればスマホ表示が最適化されもっと見やすくなります。その方法については、次回、お伝えしますね。