予約ラボでは「予約」に関する独自リサーチ、体験取材などの情報を配信中

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

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

ホームページやブログなどWebサイトでレッスンやイベントのスケジュールをお知らせするとき、もっと見やすくしたいなーって思いますよね。そんな時、カレンダーで表示できればスケジュール共有がもっと便利になりそう。

そこで、GoogleカレンダーをWebサイトに埋め込む方法をご紹介。HTMLなど専門的な知識がなくても、意外と簡単に設置できます。ぜひ、試してみてくださいね~。

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

Googleにログイン

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

calendar0

Google カレンダーを表示

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

calendar01

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

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

calendar02

カレンダー名に名称を入れ、「このカレンダーを一般公開する」にチェックを入れます。「カレンダーを作成」ボタンをクリックします。

calendar03

「一般公開していいですか?」というメッセージが表示されますので、「はい」をクリックします。

calendar04

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

登録するカレンダーを選択

Googleカレンダーにレッスンスケジュールを登録していきます。先ほど作った公開用のカレンダーを選択します。

calendar09

レッスンを登録

レッスンの開催日時をクリックします。

calendar10

編集をクリックすると、より詳細な情報も入力できます。「保存」ボタンで登録します。

calendar11

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

calendar12

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

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

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

公開用のカレンダーの右にある「▼」をクリック。「カレンダー設定」を選択します。

calendar13

「このカレンダーを埋め込む」にある貼り付け用のHTMLタグ。そのコードをコピーします。

calendar07

Webサイトに貼り付ける

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

こんな風に表示されます!!
このページにサンプルのカレンダーを埋め込みました!週表示で確認できたり、翌月のレッスンもみれます。実際に操作してみてください~!!

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

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

変更前 書き換え後
width=”800″ width=”100%”

埋め込み先のホームページやブログにより、スマホでの見え方は変わってきます。どんな表示になるかは一度、確認してみてくださいね。

上記の方法は簡易的なものです。きちんとレスポンシブ対応をすればスマホ表示が最適化されもっと見やすくなります。その方法については、次回、お伝えしますね。

この記事の著者、最近書いた記事

内山 美由紀

株式会社リザーブリンク マーケティング担当。予約システムの評価と検証業務も兼務し、予約を「使う人」と「創る人」の橋渡しをしている。プライベートでは子供たちのスポーツ活動の応援が一番の楽しみ。

カテゴリから探す

予約ラボについて