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

予約システム メールフォーム作成

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

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

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

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

Googleカレンダーとは

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

Google

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

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

  • アカウントで共有・・・複数人で仕事のスケジュールを共有する。
  • ホームページに公開・・・お店の営業日、予約の空席状況お知らせ。

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

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

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

Googleカレンダーはコチラ

今時店長
パソコンでも、スマホでも、いつでも同期して使えるのがいいですね。しかも、無料、ビジネス用途にも使えると申し分ありません。
無料でパッと作れるホームページ作成ツール
無料でパッと作れるホームページ作成ツール9選!上広告なし・おすすめサービスを順番に紹介

今時店長皆さんこんにちは、今時店長です。 今回は、無料でパッと作れる、ホームページ作成ツールをご紹介します。「お金や時間を掛けずにホームページを作りたい」方は、ぜひ参考にしてください。 無料ホームペー ...

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

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

ワードプレス

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

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

Googleカレンダーにアクセスして新しいカレンダーを作成する

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

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

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

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

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

Googleカレンダーでイベント開催の予定を記載する方法

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

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

予約ページへのリンクを掲載することもできる

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

その他オプション

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

Googleカレンダーに予約ページのリンクを掲載する

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

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

空席予約が必要なカレンダー

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

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

無料で使えるネット予約システムを徹底比較
2023年版|無料で使えるネット予約システムを徹底比較!広告なし・アプリ対応・Google連携などわかりやすく解説

今時店長皆さんこんにちは、今時店長です。 今回は、無料で使えるオンライン予約システムについて解説します。 フィットネス、ヨガなどのスクール。エステやマッサージなどのサロン。医療関係や各種イベントで予約 ...

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

リスト表示したいカレンダーだけを選択した状態でメニューを表示

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

設定と共有をクリックする

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


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

Googleカレンダーを一般公開する方法

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

一般公開すると、誰でもあなたのカレンダーの予定を見たり検索したりできるようになります。一般公開してもよろしいですか?

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

アクセス権とは

対象のGoogleカレンダーを見ることができる権利のことです。カレンダーを見ることはできますが、編集などはできません。

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

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

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

Googleカレンダーに祝日を表示する

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

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

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

Googleカレンダーの埋め込みコードをコピーする

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

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

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

Googleカレンダーのスマートフォン表示

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

HTMLコードの書き換え。

<div class="google-cal">

<iframe src="************" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

</div>

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

CSSの編集。

/* Googleカレンダー埋め込み */

.google-cal iframe {
width:100%;
max-width:800px;
height:400px;
}

@media (min-width: 750px) {

.google-cal iframe {
height:600px;
}

}

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

完成イメージ。

Googleカレンダーのスマートフォン表示

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

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

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

Googleカレンダーはコチラ

今時店長
ホームページで手軽に予約の受付をするなら”ペライチ”はオススメです。予約システムに加えて、決済機能もあります。
ペライチの予約機能どうなの?
ペライチの予約機能どうなの!?実際に利用した感想・評価に加えて最適な使いみちなどを解説

今時店長皆さんこんにちは、今時店長です。 今回は、ホームページ作成ツール「ペライチ」の予約機能について調査してみました。予約機能に興味はあるけど、有料プランに契約するのを躊躇している方など、ぜひコチラ ...

今回のまとめ

今時店長

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

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

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

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

無料で使える入力フォーム作成ツール
2023年版|無料で使えるメールフォーム作成ツール8選!広告なし・埋め込み・顧客管理など徹底解説

今時店長皆さんこんにちは、今時店長です。 今回は、無料で利用することができるメールフォーム作成ツールをご紹介します。実際に全てのサービスを利用して、感想などを加えつつ解説していきます。 インターネット ...

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

失敗しないホームページ予約システムの選び方
失敗しないホームページ予約システムの選び方!費用や機能の違いを解説【操作動画も掲載してます】

今時店長皆さんこんにちは、今時店長です。 今回は、ホームページに導入できる予約システムについて、いくつかのサービスの費用や機能の違いについて解説します。 同じ予約機能でも、サービスごとに内容は違います ...

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

メールでカード決済
【無料】送信メールにカード決済を導入する方法!個人も使える厳選サービスを紹介[WEB請求書・メールリンク型決済]

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップやWEBサイトを持つことなく、メール送信だけでクレジットカード決済で料金を請求して回収する方法について解説します。 「メールリンク型決済 ...

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

無料で開業できるネットショップ作成サービスを徹底比較[CMで話題のオススメ・ツールを紹介]
2023年版|無料ネットショップ作成サービス比較解説【CMで話題】おすすめECカートをご紹介

今時店長皆さんこんにちは、今時店長です。 今回は、基本料金無料(タダ)で出店できる、ネットショップ作成サービスのについて、人気の傾向や料金や解説したのち、おすすめサービスをご紹介します。 こんな方に読 ...

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

今月の入会特典のあるサービス

  • makeshop|初期費用0円&独自ドメインプレゼント!5月31日まで
  • エックスサーバー|30%OFF&独自ドメイン永久無料!6月9日12時まで

エックスサーバーキャンペーン

おすすめ記事

無料で開業できるネットショップ作成サービスを徹底比較[CMで話題のオススメ・ツールを紹介] 1

今時店長皆さんこんにちは、今時店長です。 今回は、基本料金無料(タダ)で出店できる、ネットショップ作成サービスのについて、人気の傾向や料金や解説したのち、おすすめサービスをご紹介します。 こんな方に読 ...

商品仕入れ 2

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップの商品仕入れについてご紹介します。 個人が趣味や副業でも挑戦できるアイデアから、さらに本業として商品を仕入れるための基礎知識から具体的な ...

ネットショップ販売手数料の最安値はココ[初期・月額・クレジットカード決済手数料を比較] 3

今回は、ネットショップ作成サービスのクレジットカード決済手数料について比較してみました。初期費用、月額費用とあわせてチェックしてみてください。 こんな方におすすめの記事 無料サービスで実質的に負担する ...

プロ目線で解説!ハンドメイドをネット販売する方法 4

今時店長皆さんこんにちは、今時店長です。 今回は、ハンドメイド・手作り・クラフト作品の方法について、ネット通販業界歴10年以上の経験をもとに、最適な販売方法について解説します。 こんな方にオススメの記 ...

MakeShop(メイクショップ) 5

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップ作成サービスのmakeshop(メイクショップ)について、サービスの特徴や手数料・実際に利用してみた感想をご紹介します。 こんな方にオス ...

オリジナルTシャツの販売 6

今時店長皆さんこんにちは、今時店長です。 今回は、自作のデザインを在庫リスクなしで販売できるサービスをご紹介します。 こんな方におすすめの記事 資金は無いけどオリジナル商品を販売したい方。 YouTu ...

ネットショップの確定申告 7

今時店長皆さんこんにちは、今時店長です。 今回はネットショップ(BASE、カラーミーなど)を運営している方に、はじめての確定申告について解説します。 ネットショップを運営している方だけでなく、ハンドメ ...

無料で実店舗とネットショップの在庫連動 8

今時店長皆さんこんにちは、今時店長です。 今回は、初期費用、固定費無料で使える決済サービスの「Square」を利用した、実店舗とネットショップの在庫を連携する方法について解説します。 実店舗とネットで ...

無料でパッと作れるホームページ作成ツール 9

今時店長皆さんこんにちは、今時店長です。 今回は、無料でパッと作れる、ホームページ作成ツールをご紹介します。「お金や時間を掛けずにホームページを作りたい」方は、ぜひ参考にしてください。 無料ホームペー ...

マルチ決済端末を徹底比較!おすすめサービス料金・特徴・選び方のポイント解説 10

今時店長皆さんこんにちは、今時店長です。 今回は、1台でお店をキャッシュレス化できる、マルチ決済端末について比較してみました。おすすめキャッシュレス決済端末から、レシートプリンター内蔵のオールインワン ...

無料で使えるPOSレジアプリ徹底比較 11

今時店長皆さんこんにちは、今時店長です。 今回は、スマートフォン(iPhone)やタブレット(iPad/Android)端末で利用できる、無料で使えるPOSレジアプリを4つご紹介します。 無料で使える ...

-予約システム, メールフォーム作成
-

Copyright © 2013-2023 いまどきのネットショップ開業講座