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

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

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

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

Googleにログイン

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

Google カレンダーを表示

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

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

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

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

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

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

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

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

レッスンを登録

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

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

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

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

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

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

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

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

Webサイトに貼り付ける

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

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

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

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

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

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

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