【図解】Googleカレンダーをホームページへ埋め込み方法

Author: ウェブさえ |
2022年8月25日
カテゴリー ホームページ作成
B!

GoogleカレンダーどうやってHPへ埋め込むの?

ホームページやブログで、

  • イベント情報をカレンダーで見せたい
  • 予約状況をカレンダーで表示したい
  • 営業スケジュールをカレンダーで告知したい

こういうとき「Googleカレンダーの埋め込み」は非常に便利です。

Googleカレンダーは無料で使えて、webサイト側で表示するための「埋め込み設定」も簡単。
10分もあれば、できるでしょう。

以下で、その方法を詳しくお伝えしていきます。
パソコンが苦手な人のために図解も付けました。
順番通りに手順を追えば、特に難しくなくGoogleカレンダーをホームページやブログへ貼り付けられるはずです。

ウェブさえプロフィール画像

著者情報:この記事を書いた人

ウェブさえ twitter facebook 株式会社ウェブさえ 著者のプロフィール

web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。

Googleカレンダーを埋め込む手順

1. Googleカレンダーへログイン

まず、webサイトへ埋め込むためのカレンダーを用意します。
すでにホームページへ表示したいカレンダーの用意ができている人には、不要な作業です。
5. カレンダーの設定」から始めてください。

最初に、ホームページへ埋め込むためのカレンダーを用意します。
Googleカレンダーへログインしましょう。
以下のリンク先からログインできます。

ログイン後、【他のカレンダー】の横に見える【+】をクリックします。

新規カレンダーを作成

2. 新しいカレンダーを作成

【新しいカレンダーを作成】をクリックします。

新しいカレンダーを作成

3. カレンダー情報を入力

カレンダーの基本情報を入力します。

カレンダー情報を入力

入力項目 内容
名前 カレンダーに名前を付けます。
設定によって、ホームページでカレンダーと一緒に表示されます。
見ている人に何のカレンダーかわかるような名前にしておきましょう。
説明 何のカレンダーなのか説明のための文章を入力できます。
入力は任意です。
今回の例では入力してません。
タイムゾーン カレンダーの日時がどの時間区域に属するかを選択します。
多くの場合は「日本標準時」でいいでしょう。

入力後、【カレンダーを作成】をクリック。
次へ進みます。

4. カレンダーの作成を確認

少し待つとカレンダーの作成を知らせるメッセージが現れます。

カレンダーを作成

5. カレンダーの設定

すでにあるカレンダーを設定したい場合
今回新規にカレンダーを作らず、すでに用意のあったカレンダーを設定する場合は、カレンダー名の横にマウスを当て、

カレンダー名の横にマウスを当て

現れるメニューから【設定と共有】をクリックします。

現れるメニューから【設定と共有】をクリックします

今作ったカレンダーを埋め込むための設定をしていきます。
新しく【マイカレンダー】に加わったカレンダーの名称をクリックします。

カレンダーを選択

6. 予約のアクセス権限

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

予定のアクセス権限

6. 予約のアクセス権限の確認

一般公開することを承認するための画面です。

一般公開したくないカレンダーを誤って公開状態にしてしまわないよう注意しましょう。

大丈夫なら【OK】をクリック。

OK

7. 予定の表示内容

カレンダーで表示する予定の内容を選択します。
以下のどちらかを選択します。

  • 予定の表示(時間枠のみ、詳細は非表示)
  • 予定の表示(すべての予定の詳細)

予定の表示(時間枠のみ、詳細は非表示)、予定の表示(すべての予定の詳細)

8. 埋め込みコード

以下の部分へ表示されている文字列をコピペでwebサイト側のカレンダーを表示したい部分へ貼り付けます。

埋め込みコード

以上で完了です。

WordPressへGoogleカレンダーを埋め込みたい

以下の手順でできます。

1. 「カスタムHTML」ブロックを追加

htmlと検索するとすぐに見つかります。

「カスタムHTML」ブロックを追加

2. 「埋め込みコード」貼り付ける

カスタムHTMLの入力欄に「ここで取得できる埋め込みコード」をコピペで貼り付けます。
これで完了。

2. 「埋め込みコード」貼り付ける

Googleカレンダーの見た目を変えたい

【カスタマイズ】の画面から、Googleカレンダーのデザインを変えられます。

以下の設定を変更できます。

  • 表示するカレンダー
  • タイトルの表示/非表示
  • ナビゲーションの表示/非表示
  • 日付の表示/非表示
  • 印刷アイコンの表示/非表示
  • タブの表示/非表示
  • カレンダーリストの表示/非表示
  • タイムゾーンの表示/非表示
  • 枠線の表示/非表示
  • 表示サイズ
  • 背景色
  • 表示形式(月ごと、週ごと、リスト形式)
  • 週の開始日(土、日、月)
  • 言語
  • タイムゾーン

変更したいなら【カスタマイズ】をクリックしましょう。

カレンダーカスタマイズ

注意)カスタマイズするときは必ず【表示するカレンダー】を選択する
カレンダーのカスタマイズをするときは、公開したくないカレンダーも一緒に表示する設定になっていることがあります。
必ず【表示するカレンダー】で、埋め込みたいカレンダーだけを選択してください。
表示するカレンダー

カスタマイズ後の埋め込みコードが表示されます。
コピペでwebサイト側のGoogleカレンダーを表示したい場所へ貼り付けましょう。

カスタマイズ済みの埋め込みコード


以上です。

Googleカレンダーは個人で使うのももちろん便利ですが、今回の方法を利用すればビジネスにも役立てられます。

Googleカレンダーの表示だけでは物足りない。カレンダーから予約も取りたい!

わたくしウェブさえにお任せしてみませんか?
予約機能付きの「集客にも役立つ」ホームページをお作りします。

普通に予約機能付きのwebサイトを作るには、高額な制作費がかかります。
しかし、以下で特集しているような予約システムを利用すれば、思っているほど高くはなりません。

どんなホームページが作れるの?
参考として、最近の制作事例を2つ紹介しましょう。

制作事例 その1 丹波の犬宿 華格子さま

華格子さまは、自然豊かな兵庫県丹波市に位置する、全5室の愛犬と泊まれる隠れ宿。
サイト制作では、プライベートな空間で大切なワンちゃんと一緒に居心地よく過ごせる雰囲気をうまく表現できるよう工夫しました。

トップページ

華格子 トップページ

予約画面

華格子 予約画面

直筆のお手紙をいただきました

華格子さまからのお手紙

お手紙から喜びのひと声を紹介

大・大・大満足です。

これだけのものがセットになってクオリティも高い、しかも1ヶ月のサポート付きとなると他の業者さんではなかなかできないんじゃないでしょうか。


華格子のさまについての事例紹介とお客様の声は、以下のリンク先でもっと詳しくお伝えしています。

制作事例 その2 リフレクソロジーのお店 ソレストさま

ソレストさまは、お客様とセラピスト1対1の完全予約制、貸切タイプのリラクゼーションサロンです。
施術を担当するスタッフ様のプロフィールを紹介し、施術中の写真もたくさん掲載し来店時の様子を具体的にイメージできるよう工夫しました。

トップページ

ソレスト トップページ

予約画面

ソレスト 予約画面

直筆のお手紙をいただきました

ソレストさまからのお手紙

お手紙から喜びのひと声を紹介

ウェブさえさんには感謝の言葉しかありません。

ただホームページを作るだけでなく集客についてのアドバイスや提案などをしていただき本当にありがとうございました。


ソレストさまについての事例紹介とお客様の声は、以下のリンク先でもっと詳しくお伝えしています。

予約機能付きのホームページなら「ウェブさえ弁当」

ウェブさえ弁当

どちらの制作事例も「ウェブさえ弁当」をご利用いただきました。

ウェブさえ弁当は、会社やお店のホームページに最適な制作パッケージサービスです。

ホームページに詳しくない初心者さんでも、売上や集客に役立つ本格的なビジネス用のホームページが持てます。

財布に優しいお値段と、お値段以上のサービスについて、詳しくは以下のページをご覧ください。

いくら? どんなサービス? ウェブさえ弁当はこちら

読み終わったらシェア!

B!
あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
Top
ウェブさえ
@websae2012