GoogleカレンダーをWebページに埋め込む方法!デザインカスタマイズやレスポンシブ対応させるには?

Googleカレンダーはホームページやブログに埋め込みをすることができます。この記事ではGoogleカレンダーの埋め込みをするためのHTMLの貼り付け方や、デザインのカスタマイズの方法、表示のレスポンシブ対応の仕方などについて詳しく解説します。

GoogleカレンダーをWebページに埋め込む方法!デザインカスタマイズやレスポンシブ対応させるには?のイメージ

目次

  1. 1GoogleカレンダーをWebページに埋め込もう
  2. カレンダーを更新するだけでサイトに反映されるので便利
  3. 2Googleカレンダーの埋め込み~Webページに表示~
  4. Googleカレンダーの埋め込み手順
  5. 3Googleカレンダーの埋め込み~デザインのカスタマイズ~
  6. デザインのカスタマイズ手順
  7. 4Googleカレンダーの埋め込み~レスポンシブ対応~
  8. レスポンシブ対応手順
  9. 5GoogleカレンダーをWebページに表示させよう
  10. Googleの記事が気になった方にはこちらもおすすめ!

GoogleカレンダーをWebページに埋め込もう

教室を開いていたり、イベントを運営したりしている人の多くがブログやホームページなどのウエブページを開設しています。そして、教室やイベントの日程のカレンダーをウエブページに開設しています。でもカレンダーの更新って、結構面倒くさいものです。

tableタグなどを使ってカレンダーを作ると、PCとスマホでは表示が崩れてデザインが滅茶苦茶になってしまったりしまうことも。そんな時には、Googleカレンダーを埋め込むことでカレンダーの更新の手間が一気に楽になります

この記事ではGoogleカレンダーのWebページへの埋め込み方法について詳しく見ていきましょう。

カレンダーを更新するだけでサイトに反映されるので便利

GoogleカレンダーをWebページに埋め込む最も大きなメリットは、Googleカレンダーを更新するだけでWebページに反映されるということです。Googleカレンダーなら、スマホからでも簡単な操作で更新することができるので、急な予定変更などもとても簡単にブログやホームページで告知ができます

Webページにカレンダーを掲載する必要がある人にとっては、本当に便利な方法なので、ぜひこの記事でその方法を覚えてしまいましょう。

ThumbGoogleカレンダーのショートカットをPCデスクトップに表示する方法!
Googleカレンダーのショートカットをデスクトップに追加する方法から、利用方法をご紹介しま...

Googleカレンダーの埋め込み~Webページに表示~

それでは実際にWebページにGoogleカレンダーを表示させられるように、埋め込みをする方法について詳しく見ていきましょう。こちらでは手順を追って、Googleカレンダーの埋め込み方法を説明します。

Googleカレンダーの埋め込み手順

具体的なGoogleカレンダーの埋め込み手順です。

公開するカレンダーを作成する

まずは後悔するGoogleカレンダーを作成します。ブラウザでGoogleのトップページを開いて、Googleアカウントへログインします。次にGoogleのトップページの右上にある”アプリを開くマーク”をクリックします。

Googleカレンダーの埋め込み方法

するとGoogleアカウントで使えるアプリが出てくるので、そちらから”カレンダー”をクリックします。

Googleカレンダーの埋め込み方法

”カレンダーを追加”の横にる”︙”あをクリックして”新しいカレンダー”をクリックします。

Googleカレンダーの埋め込み方法

すると新しいカレンダーの作成画面が出てくるので、カレンダーの名前と説明を入力し、タイムゾーンを選んで”作成”をクリックします。今回は”イベント”という名前のカレンダーを作成してみます。

Googleカレンダーの埋め込み方法

するとそのページの左のサイドバーに、今作ったカレンダーの名前が表示されています。これで新しいカレンダーが作成できました。

Googleカレンダーの埋め込み方法

カレンダーの設定画面を開く

次にカレンダーを公開して埋め込みできるように設定していきます。左サイドバーから作成したカレンダーをクリックして、そのカレンダーの設定画面を開きます。

Googleカレンダーの埋め込み方法

アクセス権限の設定で一般公開にする

設定画面がこのように開いたら設定を進めていきます。

Googleカレンダーの埋め込み方法

下にスクロールすると”アクセス権限”というところがあります。そちらのをクリックします。”一般公開して誰でも利用できるようにする”

Googleカレンダーの埋め込み方法

するとこのような警告文が出てきます。公開しても大丈夫なら”OK"をクリックします。

Googleカレンダーの埋め込み方法

HTMLのコードを張り付けたら埋め込み完了

公開できるカレンダーを作成したら、次に埋め込みコードを取得しましょう。今開いているGoogleカレンダーの設定ページを下にスクロールすると”カレンダーの統合”というところに”埋め込みコード”があります。そちらをコピーします。

Googleカレンダーの埋め込み方法

Googleカレンダーを貼り付けたいウエブページの編集画面を出しましょう。今回はブログに貼り付けてみます。こちらのブログの編集画面ではHTMLコードをそのまま本文の入力画面に貼り付けてもカレンダーは表示されません。

”ソース”というアイコンをクリックしてHTMLコードを貼り付けてみます。

Googleカレンダーの埋め込み方法

するとこのようにGoogleカレンダーが表示されました。

Googleカレンダーの埋め込み方法

Webページへの貼り付け方法は、ブログサービスやホームページ作成ソフトによってそれぞれ違います。それぞれのブログや作成ソフトの方法で貼り付けてください。

Googleカレンダーの埋め込み~デザインのカスタマイズ~

カレンダーのウエブページへの貼り付け方法が理解出来たら、次にカレンダーのカスタマイズをしていきましょう。

デザインのカスタマイズ手順

Googleカレンダーのデザインのカスタマイズの手順です。

カレンダーの統合の項目にあるカスタマイズをクリック

Googleカレンダーの”カレンダーの統合”の埋め込みコードの下にある”カスタマイズ”をクリックします。

Googleカレンダーのデザインのカスタマイズ方法

Googleカレンダー埋め込み支援ツールが表示される

するとGoogleカレンダーの埋め込み支援ツールが表示されます。

Googleカレンダーのデザインのカスタマイズ方法

カレンダーの種類や大きさなどをカスタマイズできる

Googleカレンダーの埋め込み支援ツールでは、カレンダーの表示の種類や背景色、大きさなどを返ることができます。

表示の種類を変更したい場合には、左サイドバーの”表示”から表示させたいものだけにチェックを入れます。

Googleカレンダーのデザインのカスタマイズ方法

”幅”と”高さ”を変更することでカレンダーの大きさを変更することもできます。こちらでは小さくしてみました。

Googleカレンダーのデザインのカスタマイズ方法

”背景色”をクリックするとカラーパレットが表示されます。好きな色をクリックすると、カレンダーの背景色がその色に変更されます。

Googleカレンダーのデザインのカスタマイズ方法

HTMLのコードを張り付ける

カレンダーのデザインを好きなように変更したら、その変更は埋め込み用のHTMLコードに自動で反映されます。カレンダーの上に埋め込み用のHTMLコードが表示されているので、そちらをコピーしてウエブページの編集画面に貼り付ければ変更が反映されます。

Googleカレンダーのデザインのカスタマイズ方法

もしも変更が反映されない場合には、”HTMLを変更”をクリックしてみましょう。そうするとHTMLの記述が変更されます。

Googleカレンダーの埋め込み~レスポンシブ対応~

Googleカレンダーの埋め込みはとても便利なものなのですが、1つだけ困った問題があります。それは大きさをピクセルでしか指定できない、という点です。ホームページやブログの記事の作成というのは、スマホではなくPCで行うことが多いのですが、PCで作ったWebページのデザインの表示はスマホでは崩れてしまうことがよくあります。

GoogleカレンダーもPC用に大きさを設定したらスマホでは大きすぎてしまうし、スマホ用に設定したらPCからは小さすぎて醜くなってしまいます。そんな時にはレスポンシブ対応に設定すると、カレンダーを閲覧している画面に合わせてカレンダーの大きさが変化します。こちらでは、Googleカレンダーのレスポンシブ対応について解説します。

レスポンシブ対応手順

レスポンシブという言葉を初めて目にする人も多いことでしょう。レスポンシブというのは、閲覧する画面に応じてウエブページのデザインを変えられるようにすることです。

PC,スマホ、タブレットとWebページを閲覧するためのデバイスが多様化したことで、画面の大きさがそれぞれ大きく違ってしまいました。1つの設定だけでは他のデバイスからの閲覧がしにくいということで、Webページを作成する段階で画面細部に応じてデザインを変化させられるようにできます。

Googleカレンダーの埋め込み支援ツールではレスポンシブ対応は設定できませんが、後から自分で設定することができるので、その方法を最後にお伝えします

HTML

HTMLコードでレスポンシブ対応に変更する方法です。Googleカレンダーの埋め込み支援ツールのHTMLコードから大きさを表示している部分を探します。すると次のような記述があります。

<… style="border-width:0" width="800" height="600" frameborder="0" scrolling="no…>

この”width="800" height="600"”の部分が、「幅800ピクセル、高さ600ピクセル」と設定している部分になります。

デバイスの画面では幅が特に問題になります。そこで幅をデバイスの大きさに合わせて変更できるように設定します。「width="800"」の部分を「width="100%"」に変更すると、デバイスの画面の横幅いっぱいに表示されるようになります。

100%ではギリギリだと思う人は90%か80%に変えてもいいでしょう。これでほとんどのデバイスでは横幅のレスポンシブ対応ができるようになります。

CSS

これだけではうまくレスポンシブ対応ができないという場合には、CSSの変更も必要になります。CSSとは「カスケーディング・スタイル・シート」という意味で、Webページのスタイルを指定するための言語です。Googleカレンダーのデザインはスタイルそのものなので、Webページの種類によってはCSSも変更する必要が出てきます。

GoogleカレンダーをCSSの変更でレスポンシブ対応するためのコードはいろいろと公表されています。ただ、どの種類のWebページにどのコードが合うのかは、それぞれのWebページによって変わってくることでしょう

”Googleカレンダー レスポンシブ CSS"と検索すると、CSSのコードを公開しているWebページがいろいろと出てきます。あなたのWebページに合うコードを見つけて貼ってみてください。

GoogleカレンダーをWebページに表示させよう

この記事ではGoogleカレンダーの埋め込み方法とデザインの変更方法についてみてきました。Googleカレンダーの埋め込みができれば、いちいちWebページのカレンダーを変更しなくても、Googleカレンダーの変更だけで日程の告知が簡単にできるようになります

Webページへのカレンダーの掲載が必要なお仕事などをしている人にとっては本当に便利な機能です。ぜひこの機会にGoogleカレンダーをWebページに表示させる方法を覚えて、ホームページの更新に使っていた労力を他のことに使えるようにしていきましょう。

ThumbGoogleカレンダーとiPhoneのカレンダーアプリを同期・同期解除する方法!
GoogleカレンダーとiPhoneのカレンダーアプリを同期・同期解除する方を紹介します。G...

Googleの記事が気になった方にはこちらもおすすめ!

ThumbGoogleカレンダーのスケジュール共有方法!ユーザーの閲覧権限設定するには?
Googleカレンダーではスケジュールを複数人に共有したり、共同で管理したりすることで、予定...
ThumbGoogleカレンダーのリマインダーの使い方!通知が表示されない対処法も解説!
Googleカレンダーのリマインダー機能をご存知ですか?リマインダーとは、予定の通知機能のこ...
ThumbGoogleカレンダーの使い方まとめ!PCとスマホのアプリでの共有方法は?
GoogleカレンダーはPCでもスマホアプリでも共有できてとても便利なカレンダーアプリです。...
ThumbGoogleカレンダーの通知のオン/オフ設定方法!10分前のポップアップを消すには?
Googleカレンダーでは登録した予定の時間前に、メールやポップアップで通知する便利な機能が...
ThumbGoogleカレンダーの祝日表示方法!日本・海外の休日や色付け設定も解説!
Googleカレンダーで日本や海外の祝日を表示させる方法を紹介します。カレンダーの色分けや表...

関連するまとめ

Original
この記事のライター
K.C
皆様のお役に立てる情報をお届けするために日々精進していきます。どうぞよろしくお願いします。