目次
Webサイトにカレンダーを表示しよう
ホームページやブログなどWebサイトでレッスンやイベントのスケジュールをお知らせするとき、もっと見やすくしたいなーって思いますよね。そんな時、カレンダーで表示できればスケジュール共有がもっと便利になりそう。
そこで、GoogleカレンダーをWebサイトに埋め込む方法をご紹介。HTMLなど専門的な知識がなくても、意外と簡単に設置できます。ぜひ、試してみてくださいね～。
公開用のGoogle Calendarを作成しよう
Googleにログイン
Googleアカウントがない場合はアカウントを作成しましょう。
Google カレンダーを表示
右上の「 □□□ 」をクリック。アプリ一覧の中から「カレンダー」をクリックします。
公開用のカレンダーを作成
マイカレンダーの右にある「▼」をクリック。「新しいカレンダーの作成」をクリックします。
カレンダー名に名称を入れ、「このカレンダーを一般公開する」にチェックを入れます。「カレンダーを作成」ボタンをクリックします。
「一般公開していいですか？」というメッセージが表示されますので、「はい」をクリックします。
Google カレンダーにスケジュールを登録しよう
登録するカレンダーを選択
Googleカレンダーにレッスンスケジュールを登録していきます。先ほど作った公開用のカレンダーを選択します。
レッスンを登録
レッスンの開催日時をクリックします。
編集をクリックすると、より詳細な情報も入力できます。「保存」ボタンで登録します。
スケジュールが表示できました。
カレンダーをWebサイトに埋め込もう
Googleカレンダーをホームページやブログなどのウェブサイトに、インラインフレームを使って貼りつけ表示させます。
GoogleカレンダーのHTMLコードを取得
公開用のカレンダーの右にある「▼」をクリック。「カレンダー設定」を選択します。
「このカレンダーを埋め込む」にある貼り付け用のHTMLタグ。そのコードをコピーします。
Webサイトに貼り付ける
コピーしたコードを、表示させるホームページに貼り付けます。ブログツールの場合は、エディタをHTMLコード編集モードにして、該当箇所にペーストします。
- こんな風に表示されます！！
- このページにサンプルのカレンダーを埋め込みました！週表示で確認できたり、翌月のレッスンもみれます。実際に操作してみてください～！！
（おまけ）スマホでもキレイに見せたい
スマートフォンなど小さな画面で表示したときにも、見やすいカレンダーにしたいですね。そんな時は、グーグルカレンダーを貼り付けるためのHTMLタグで調整が可能です。画面の表示サイズに最適化させたい場合は下記の部分を書き換えてから貼りつけてください。
| 変更前 | 書き換え後 |
|---|---|
| width=”800″ | width=”100%” |
埋め込み先のホームページやブログにより、スマホでの見え方は変わってきます。どんな表示になるかは一度、確認してみてくださいね。
上記の方法は簡易的なものです。きちんとレスポンシブ対応をすればスマホ表示が最適化されもっと見やすくなります。その方法については、次回、お伝えしますね。
株式会社リザーブリンク マーケティング担当。予約システムの評価と検証業務も兼務し、予約を「使う人」と「創る人」の橋渡しをしている。プライベートでは子供たちのスポーツ活動の応援が一番の楽しみ。
