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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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とは「カスケーディング・スタイル・シート」という意味で、Webページのスタイルを指定するための言語です。Googleカレンダーのデザインはスタイルそのものなので、Webページの種類によってはCSSも変更する必要が出てきます。

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

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

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

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