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

スケジュールや講座予定、お店の営業日などを公開したい時は、Googleカレンダーを活用しましょう。Googleカレンダーなら簡単に埋め込みができ、予定の管理から公開までを一括して行えます。 埋め込み方法・レスポンシブ対応・デザイン変更方法など、解説します。

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

目次

  1. 1Googleカレンダーの埋め込み前の準備
  2. 公開用カレンダーを作成
  3. 2GoogleカレンダーのWebページ埋め込み方法
  4. 埋め込み手順
  5. 3Googleカレンダーの埋め込みをカスタマイズ〜大きさ〜
  6. Googleカレンダーの大きさを変更する方法
  7. 4Googleカレンダーの埋め込みをカスタマイズ〜レシポンシブ対応〜
  8. 埋め込みコードを編集してレスポンシブ対応する
  9. 5Googleカレンダーの埋め込みをカスタマイズ〜デザイン〜
  10. 埋め込みコードを編集してデザインを変更する
  11. 6Googleカレンダーの埋め込みで訪問者に予定を保存してもらう方法
  12. 訪問者のカレンダーに予定を保存できるようにする設定方法
  13. 合わせて読みたい!アプリに関する記事一覧

Googleカレンダーの埋め込み前の準備

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

公開用カレンダーを作成

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

Google カレンダー

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

タイルのアイコンをクリック

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

カレンダーを選択

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

カレンダーを追加を選択

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

新しいカレンダーを作成 を選択

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

好きなタイトルを入力する

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

カレンダーを作成をクリックする

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

設定を選択する

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

アクセス権限を選択する

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

一般公開にチェックを入れる

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

確認画面が出たらOKをクリック

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

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

ThumbGmailの予定をGoogleカレンダーに連携して追加/登録する方法
仕事やプライベートでGmailやGoogleカレンダーを使用されている方も多いと思います。同...

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

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

埋め込み手順

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

webページにカレンダーを表示したい

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

作成したカレンダーを選択する

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

設定と共有をクリック

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

カレンダーの統合を選択する

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

埋込コードをコピーする

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

HTMLにコピーしたコードを張り付ける

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

Webページにカレンダーが表示される

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

Google カレンダーをウェブサイトに追加する - カレンダー ヘルプ

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

ThumbiPhone「カレンダー」の使い方まとめ!基本アプリを使いこなそう
iPhone「カレンダー」はiPhoneに標準搭載されているカレンダーです。iPhone「カ...

Googleカレンダーの埋め込みをカスタマイズ〜大きさ〜

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

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

Googleカレンダーの大きさを変更する方法

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

もう一度、公開用カレンダーを選択する

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

メニューから設定と共有をクリックする

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

設定→カレンダーの統合をクリックする

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

カスタマイズをクリックする

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

幅と高さを指定する

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

HTMLを更新をクリックする

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

大きさ変更後のコードをHTMLに張り付ける

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

カレンダーの大きさが変更される

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

見やすい大きさに設定しよう

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

Thumb【iPhone】カレンダーおすすめアプリ11選!スケジュール管理はコレ!
iPhoneに元々内蔵されているカレンダーアプリをご利用している方は多いと思いますが、今回の...

Googleカレンダーの埋め込みをカスタマイズ〜レシポンシブ対応〜

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

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

埋め込みコードを編集してレスポンシブ対応する

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

HTMLのコードを直接変更する方法

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

埋込コード内のWidethとHeightを変更する

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

幅→100%、高さ350pxに指定する

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

幅はウィンドウ幅、高さは350pxで表示される

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

ウィンドウを広げるとカレンターの幅も変化する

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

HTMLとCSSの両方を使用する方法

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

埋込コードの前後に<div></div>のタグを追加する

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

CSSで使用するclass名を指定する

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

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

CSSで表示方法を指定する

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

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

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

HTMLで指定したClass名を入力する

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

通常時の表示を指定する

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

スマホでの表示を指定する

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

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

スマホ画面でもキレイに表示される

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

Thumb【Googleカレンダー】リマインダーの活用法!ToDoリストとの使い分けは?
Googleカレンダーのリマインダー機能についてご存知でしょうか?リマインダーの追加や削除方...

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

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

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

埋め込みコードを編集してデザインを変更する

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

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

埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法|ホームページ制作 大阪 SmileVision

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

「Set your color scheme below」の要素を変更する

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

#000000~#ffffffの値を指定する

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

背景色を指定する

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

曜日のテキストカラーを指定する

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

各日にちの背景カラーを指定する

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

各日にちのテキストカラーを指定する

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

本日のカラーを指定する

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

埋め込みコードを書き換える

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

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

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

ThumbLINEでカレンダーを共有!イベント機能の使い方
LINEにはイベント機能があります。イベント機能ではLINE上でカレンダー形状のイベント管理...

Googleカレンダーの埋め込みで訪問者に予定を保存してもらう方法

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

訪問者のカレンダーに予定を保存できるようにする設定方法

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

Google カレンダーをウェブサイトに追加する - カレンダー ヘルプ

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

作成ボタンをクリックする

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

予定を入力する

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

作成した予定をクリックする

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

右上のメニューをクリックする

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

予定を公開をクリックする

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

表示されたコードをコピーする

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

HTMLに張り付ける

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

予定をカレンダーに追加するボタンが表示される

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

保存を選択して予定を追加する

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

予定の保存ボタンを好きな画像に変更する

好きな画像をボタンに使用することもできる

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

scr=""の中のファイル名を変更する

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

それぞれの追加ボタンがあると便利

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

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

Thumb【iPhone】カレンダーを家族や他人と共有する方法
今ではiPhoneやAndroidなどの端末でスケジュールを管理できるカレンダー共有アプリが...
ThumbiPhoneカレンダーとGoogleカレンダーを同期する方法
iPhoneとAndroid両方を持っている方やiPhoneからAndroidに機種変更した...

合わせて読みたい!アプリに関する記事一覧

Thumb無料メールアプリのおすすめ13選【iPhone/Android】
iPhoneやAndroidなどのスマホで使える無料メールアプリは、デザインや機能がそれぞれ...
Thumbパスワード管理アプリ|おすすめソフトの機能や価格を比較
パスワード管理アプリ・ソフトってなにかみなさんはご存知でしょうか。今パスワードは必須の世の中...
Thumbミラーリングアプリおすすめ3選!スマホ画面をPCにミラーリングしよう
スマホのミラーリングアプリは知っていますか。スマホの画面をパソコンの画面にミラーリングするこ...
ThumbMastodon(マストドン)のおすすめアプリ9選【iPhone(iOS)/Android】
マストドン(Mastdon)という今話題のSNSアプリ。実はiPhoneやAndroidなど...

関連するまとめ

Original
この記事のライター
macoto