【簡単】GoogleカレンダーをWEBサイトに埋め込む手順！必須カスタマイズ・レスポンシブ対応など

今時店長

皆さんこんにちは、今時店長です。

今回は、Googleカレンダーをブログ・ホームページ・ネットショップなどに埋め込む手順を解説します。

カレンダーに祝日を表示するカスタマイズ、スマホやタブレットなどレスポンシブデザイン対応、表示できない場合の確認事項など、参考にしてみてください。

Googleカレンダーとは

無料で時間管理ができるWEBサービス

Googleが提供している、無料で時間管理ができるWEBサービスのことです。パソコン版のほかに、Android、iOS用のスマホアプリも提供されています。

カレンダーは共有・公開することができる。

たとえば、上記のようなビジネス用途でも使えます。

カレンダーは１アカウントで複数作成できる。

Googleカレンダーは、１つのアカウントで複数のカレンダーを作成できます。たとえば、個人用、店舗用とわけてそれぞれ公開設定も決めることができます。

Googleカレンダーはコチラ

今時店長

パソコンでも、スマホでも、いつでも同期して使えるのがいいですね。しかも、無料、ビジネス用途にも使えると申し分ありません。

GoogleカレンダーをWEBサイトに埋め込む手順

Googleカレンダーをホームページに埋め込む手順

Googleカレンダーをホームページやブログに埋め込む方法について解説します。

新しいカレンダーを作成する

まずは「Googleカレンダー」にアクセスして、店舗用に新しいカレンダーを作成しましょう。上画像の「新しいカレンダーを作成」をクリックする。

新しいカレンダーを作成する。

カレンダーの名前を入力して「カレンダーを作成」をクリックすれば作成は完了です。「名前」は、カレンダーの目的にあったものをつけましょう。

イベント開催予定などの記入方法

カレンダーの日付をクリックすると、上画像のようなダイアログボックスが表示されて入力できます。１にはタイトル、２は反映するカレンダーを選びます。

カレンダーに予約リンクを掲載する方法。

登録した予定にリンクをつけて、予約ページに誘導することもできます。

スケジューを選択→「編集」→「その他オプション」をクリックする。

「リンクを挿入」をクリックして、テキスト、リンク先のを記入しましょう。

空席状況まで必要ならば別サービス推奨。

少ない空席を手作業で伝えるなら利用できますが、ある程度の空席状況を告知するなら、もはやGoogleカレンダーにこだわる必要はありません。

Googleカレンダーと同じ用に、無料で使える予約システム「Airリザーブ」などの埋め込み機能をつかいましょう。上画像のように残数もきちんと反映されます。

埋め込みコードを取得する

マイカレンダーから、表示したいカレンダーだけにチェックマークを入れた状態で右の「３点マーク」のメニューを開きます。

続けて「設定と共有」をクリックしてください。

アクセス権を一般公開にする。

アクセス権限の「一般公開して誰でも利用できるようにする」にチェックマークを入れてください。予定の表示は（すべての予定の詳細）で構いません。

一般公開すると、誰でもあなたのカレンダーの・・・という警告が表示されますが、見れないと意味がないので「OK」をクリックします。

カスタマイズをクリックする。※祝日の表示設定など。

続けてカレンダーの統合にある「カスタマイズ」をクリックしてください。

ビジネス用途であれば祝日は表示しておきたいところです。下にスクロールして「日本の祝日」チェックマークを入れましょう。

カレンダーのタイトル、サイズ、カラー、デフォルトのビュー、言語、タイムゾーンなど。色々とカスタマイズできます。

埋め込みコードをコピーする。

あとは「埋め込みコード」をコピーして、ホームページ、ブログ、などの”HTMLコード”を貼り付ければ完了です。

ちなみに、デザインを変更する場合したい場合には、変更したのち「埋め込みコード」を張替えないと反映されません。※URLに設定のパラメータが含まれるためデザインを変更するとURLも変わります。

レスポンシブウェブデザインに対応する

そのまま貼り付けると、スマートフォンなどで横幅が狭いときには、カレンダーが縦長に表示されます。スマホ表示の場合には、縦を短くするように修正しましょう。

HTMLコードの書き換え。

Googleカレンダーで取得した「埋め込みコード」に上記太字を追加してください。

CSSの編集。

CSSに上記をコピーして貼り付けてください。

完成イメージ。

上記のように、スマートフォン表示（750px以下）は、縦長400pxで表示されるようになりました。

表示されない場合の確認事項

自分は表示されるのに、自分以外のパソコンやスマホで表示されない場合には「アクセス権の一般公開」を再度確認してみてください。

Googleカレンダーはコチラ

今時店長

ホームページで手軽に予約の受付をするなら”ペライチ”はオススメです。予約システムに加えて、決済機能もあります。

今回のまとめ

今回は、Googleカレンダーをブログ・ホームページ・ネットショップなどに埋め込む手順を解説しました。

ぜひコチラの記事を参考にして、ブログ、ホームページ、ネットショップなどに、Googleカレンダーを掲載してみてください。

あわせてチェックしてほしい記事

ブログに本格的なメールフォームを導入したい方はコチラ。

予約の受付もできるカレンダーはコチラ。

メールでカード決済を導入する方法はコチラ。

無料でネットビジネスをはじめる方はコチラ。

最後まで読んで頂きありがとうございました。
また新しい情報などあれば更新していきます。