GoogleカレンダーのWebページ埋め込み方法！デザインのカスタマイズも解説

GoogleカレンダーをWebページに埋め込む前に、まずは埋め込むカレンダーを作成しましょう。作成したGoogleカレンダーは一般公開するように設定します。

Webページに埋め込む、公開用カレンダーの作成手順を詳しく見ていきましょう。まずはGoogleカレンダーのWebページを開きます。

Googleカレンダーには、こちらのURLからアクセスします。または次のように、Googleトップページからもアクセスできます。

Googleトップ画面から右上のタイルアイコンをクリックします。

メニュー画面が開くので、カレンダーを選択します。

Googleカレンダーのページが開いたら、「カレンダーを追加」を選択します。

「新しいカレンダーを作成」を選択します。

Googleカレンダーの作成画面が開きます。名前の欄にカレンダーのタイトルを入力します。

「カレンダーの作成」をクリックします。

新しいGoogleカレンダーが作成されました。つづいて画面下に表示されたポップアップから「設定」を選択して、カレンダーの公開設定をしましょう。

設定画面が開きます。左のメニューより「アクセス権限」を選択します。

「一般公開して誰にでも利用できるようにする」にチェックを入れます。

”カレンダーの内容を誰でも見られるようになる”と警告がでます。問題ないので「OK」をクリックします。

これで埋め込み用のGoogleカレンダー作成が完了しました。Webページに表示するGoogleカレンダーは誰でもアクセスできる状態です。

それでは、先ほど作った公開カレンダーをWebページに埋め込みしましょう。設定方法は、Googleカレンダーの埋め込みコードを取得しHTMLに張り付けるだけです。

手順を詳しく見ていきましょう。適当なWebページを作成したので、ここにGoogleカレンダーを埋め込みます。

埋め込みたいのはこの箇所です。まずGoogleカレンダーページにアクセスします。

先ほど作成した公開用のGoolgeカレンダーを選択します。

表示されたメニューから「設定と共有」を選択します。

設定メニューの中から、「カレンダーの統合」を選択します。

記載されているGoogleカレンダーの埋め込みコードをすべて選択しコピーします。

Googleカレンダーを埋め込みたいWebページのHTMLファイルを開きます。コピーした埋め込みコードを、Googleカレンダーを表示する箇所に張り付けます。

WebページにGoogleカレンダーが埋め込みされました。

この手順は、Googleカレンダーの公式ヘルプ（上記URL）にも記載があります。ぜひ参考にしてください。

ここからは、埋め込みしたGoogleカレンダーをカスタマイズしていきます。まずはカレンダーの大きさを変更する方法です。

Googleカレンダーを全面に表示したい場合は大きくしたり、サイドメニューや画面下に表示したい場合は小さくしたりと、用途に合わせて埋め込みサイズを変更しましょう。

Googleカレンダーの大きさ変更も設定画面から行います。先ほどと同じように、公開用カレンダーの設定メニューを開きます。

公開用のGoolgeカレンダーを選択します。

つづいて、「設定と共有」を選択します。

「カレンダーの統合」を選択します。

統合メニューの中から「カスタマイズ」をクリックします。

Googleカレンダーのカスタマイズ画面が表示されます。埋め込みしたいサイズに合わせて幅・高さのテキストボックス内に数値を入力します。

右上の「HTMLを更新する」ボタンをクリックし、Googleカレンダーの埋め込みコードを更新します。表示された、新しい埋め込みコードをコピーしましょう。

コピーした新しい埋め込みコードをHTMLに張り付けます。張り付ける時は、最初に張ったGoogleカレンダーの埋め込みコードと差し替えます。

大きさの変更されたGoogleカレンダーがWebページに埋め込みされました。

用途やデザインに合わせて、見やすい大きさに設定しましょう。カスタマイズ画面ではサイズの変更以外に、Googleカレンダーに表示する項目の選択やテーマカラーの変更などもできます。

つづいて紹介するカスタマイズ方法は、Googleカレンダーのレスポンシブ対応です。レスポンシブ対応とは、Webページの表示をスマホ・タブレット・PCなどデバイスに合わせて変化させることです。

表示サイズやデザインを固定していると、デバイスによって画面サイズが異なるため表示が崩れる可能性があります。そこで表示を可変にするレスポンシブ対応を行うことで、Webページの崩れを回避します。

レスポンシブ対応を実現するためには、HTMLとCSSを利用します。まずはHTMLのコードを直接変更する方法から解説します。

まずはシンプルにHTMLを直接変更して、Googleカレンダーをレスポンシブ対応にしましょう。Googleカレンダーの埋め込みコード内から、幅「width」と高さ「height」が書かれている部分を探します。

「width＝”800” height="600"」とあります。これは、幅800px・高さ600pxで表示するという意味です。

レスポンシブ対応とするために、「width="100%" height="350"」と書き換えます。

幅はウィンドウ幅100%、高さは350pxで表示されました。

ブラウザのウィンドウを広げると、幅100％となるようにGoogleカレンダーが変化します。幅は90%や80%と指定して、左右にマージンを持たせた表示とすることも可能です。

またHTMLとCSSの両方を利用して、もう少し自由度のあるレスポンシブ対応を設定してみましょう。

まずはHTMLからです。Googleカレンダーの埋め込みコードの前後に<div></div>のタグを追加します。

埋め込みコード前の<div>タグの中に「class="GoogleCalendar"」と追加し、CSSで利用するclass名を宣言します。class名は好きな文字列で大丈夫です。

HTMLの変更は以上です。つづいてCSSで具体的なレスポンシブ対応の内容を記述します。

CSSを利用して、Googleカレンダーの表示方法を指定します。今回は次のようなコードを書きました。

========================
.GoogleCalendar iframe 
    { width: 100%;
        height: 650px; }

@media all and (max-width: 767px) 
    { .GoogleCalendar iframe 
        { height: 400px;  }
    }
========================

「.GoogleCalendar iframe」はGoogleカレンダーの埋め込みコードを指します。.（ドット）の後は、HTMLで宣言したclass名を入力します。
 

コード前半は、PCやタブレット端末を想定した表示を指定しています。PCやタブレット端末では幅100%、高さ650pxで表示されます。

コード後半では、画面サイズが小さいスマホを想定した表示方法を指定しています。スマホの場合は、幅100％、高さ400pxでGoogleカレンダーが表示されます。

「@media all and (max-width: 767px) 」＝画面の最大サイズが1～767pxの場合、という意味です。このように画面サイズごとに表示方法を指定できるCSSでは、より細かいレスポンシブ対応を実現することができます。

実際にスマートフォンの縦長の画面でも、キレイに表示されています。Googleカレンダーを埋め込む際には、ぜひレスポンシブ対応をしておきましょう。

Googleカレンダーのデザインをカスタマイズする方法はいくつかありますが、ここではPHPファイルを利用した方法を紹介します。

デフォルトのままでは、Webページのデザインに合わない場合などに活用してください。

Googleカレンダーのデザイン変更に使用するPHPファイルは「gcalendar-wrapper.php」です。gcalendar-wrapper.phpは以前は公式サイトからダウンロードができましたが、現在（2019年4月）公式サイトへのリンクは切れているようです。

今回は公式サイトの代わりに、こちらからコードをお借りしました。

記載されているコードをすべてコピーして「gcalendar-wrapper.php」というファイル名で保存します。

コードの24行目から30行目までがGoogleカレンダーのデザイン変更箇所です。「Set your color scheme below」の要素を変更すると、Goolgeカレンダーを好きなカラーにできます。

それぞれの要素は、#000000～#ffffffのカラーコードで指定します。

「$calColorBgDark」は背景色の指定ができます。

「$calColorTextOnDark」は曜日のテキストカラーの指定ができます。

「$calColorBgLight」は各日にちの背景カラーが指定できます。

「$calColorTextOnLight」は各日にちのテキストカラーが指定できます。

「$calColorBgToday」は本日のカラーの指定ができます。

デザイン変更箇所のコード編集が終了したら、サーバーにPHPファイルをアップロードしましょう。

最後に、HTMLのGoogleカレンダーの埋め込みコード内の「https://.....embed?」 の箇所をPHPファイルへのパスに書き換えます。

以上でデザインのカスタマイズが完了しました。Webページを表示して、埋め込みしたGoogleカレンダーのデザインを確認しましょう。

Webサイトの訪問者が、個人のGoogleカレンダーに予定を保存できるようにしてみましょう。予定を作成するところから、手順を詳しく見ていきます。

個人のGoogleカレンダーに予定を保存するためには次のように設定を行います。予定をGoogleカレンダーに作成し、「予定の公開」を選択して表示されたコードをHTMLに張り付けます。

方法は、Googleカレンダーの公式ヘルプにも記載があるので、参考にしてください。

Googleカレンダーのトップページを開き、左上の予定の「作成」ボタンをクリックします。

公開したい予定の内容を入力します。タイトル・日時を入力し、追加するカレンダーに公開カレンダーを選択し、「保存」を選択します。

Googleカレンダー上に予定が表示されました。作成した予定をクリックします。

予定の詳細内容が表示されるので、右上のメニューマークをクリックします。

「予定を公開」をクリックします。

公開用のHTMLコードが表示されるので、「コピー」を選択します。

Googleカレンダーを埋め込むWebページのHTMLを開きましょう。コピーしたコードを予定の追加ボタンを表示したい箇所に張り付けます。

個人のGoogleカレンダーに予定を追加するボタンが表示されました。

ボタンをクリックすると、予定の詳細画面が開きます。「保存」をクリックすると、個人のGoogleカレンダーへ予定を追加できます。

また好きな画像を利用した予定追加ボタンを作成して、Googleカレンダーに表示することもできます。

予定の追加ボタンのコードを確認すると、「img border="0" scr="https://....」の記載があります。この「scr="＿＿"」の部分を、追加ボタンに使用したい画像のファイル名に変更します。

それぞれの予定の追加ボタンを作成しておくと便利です。ボタンにはオリジナルの画像を使用すると、訪問者にも分かりやすくなります。

ぜひ、Googleカレンダーの便利な埋め込み機能を活用しましょう。