2025.04.25 未分類

Googleカレンダー（予約・イベントスケジュール表）をホームページに掲載する方法

この記事では、WordPressテーマ「OLTANA」を使用する皆さんが、ビジネス用のGoogleカレンダーを開設し、ホームページに掲載して顧客にスケジュールやイベントを共有する手順を解説します。美容サロンやクリニックなど、OLTANAのユーザー層に合わせた具体例を交え、初心者でも簡単に進められるよう、スクリーンショット付きで説明します。この記事を終える頃には、顧客があなたの店舗の予約枠やイベントを簡単に確認できるGoogleカレンダーが、OLTANAの美しいデザインに統合された状態で完成します。

Contents

この記事の目的
対象読者
必要なもの
手順1：ビジネス用Googleカレンダーの開設
手順2：Googleカレンダーを公開設定にする
手順3：GoogleカレンダーをOLTANAホームページに掲載
手順4：動作テストと運用準備
よくある質問（FAQ)
次のステップ

この記事の目的

ビジネス用のGoogleカレンダーを開設する。
カレンダーを公開設定にして共有可能にする。
GoogleカレンダーをOLTANAの「カスタマイズ」セクションに掲載する。
デザインをOLTANAのテーマカラーに合わせてカスタマイズする。
モバイル表示を最適化し、顧客の利便性を向上。
動作テストでカレンダーの正確性を確認。

対象読者

OLTANAを購入し、Googleアカウントを保有しているユーザー（または新規作成可能な方）。
OLTANAの「カスタマイズ」セクション（カスタムHTML/CSS）の基本操作に慣れている方。
美容サロン、クリニックなどの店舗運営者で、スケジュールやイベントを顧客に公開したい方。

必要なもの

PC（Googleカレンダー、WordPress管理画面を使用）。
Googleアカウント（ビジネス用に新規作成推奨）。
OLTANAのホームページ（公開済みまたは編集中）。
（推奨）画像編集ツール（例: Canva、無料プランで可）。

手順1：ビジネス用Googleカレンダーの開設

Googleアカウントの準備
- 既存のGoogleアカウントを使用、またはビジネス用に新規アカウントを作成（https://accounts.google.com/）。
  - 推奨: 店舗専用アカウント（例: salonname@gmail.com）を作成すると管理が簡単。
- Googleアカウントでログインし、Googleカレンダーにアクセス。
新しいカレンダーを作成
- 左メニューの「他のカレンダー」横の「+」をクリックし、「新しいカレンダー」を選択。
- カレンダー情報を入力:
  - 名前: 例: 「〇〇サロン予約」「〇〇クリニック診療」。
  - 説明: 例: 「美容サロンの予約枠」「クリニックの診療スケジュール」。
  - タイムゾーン: 日本標準時（JST、GMT+9）を選択。
- 「カレンダーを作成」をクリック。
  ヒント: 店舗名を含めると顧客がカレンダーの目的を理解しやすい。
イベントを追加（例）
- 新しいカレンダーを選択し、イベントを追加:
  - 例: 美容サロンなら「カット予約枠、5月1日9:00-9:30」、クリニックなら「健康診断、5月1日10:00-11:00」。
  - イベント詳細（場所、説明、通知設定）を入力。
- 複数の仮イベントを追加し、カレンダーの見た目を確認。
  注意: イベントは後で編集可能。まずはテスト用に数件作成。

スクリーンショット例: Googleカレンダーのログイン画面、新しいカレンダー作成フォーム、イベント追加画面。

手順2：Googleカレンダーを公開設定にする

カレンダーを公開
- Googleカレンダーの左メニューで、作成したカレンダー（例: 「〇〇サロン予約」）をクリック。
- 「設定と共有」を選択。
- 「アクセス権限」セクションで「一般公開する」にチェックを入れる。
  - ポップアップが表示されるので、「OK」をクリック（カレンダーが公開され、Google検索結果に表示される可能性あり
  - 注意: 公開カレンダーには機密情報（例: 顧客名）を記載しない。
埋め込みコードを取得
- 「カレンダーの統合」セクションにスクロール。
- 「埋め込みコード」をコピー（例: <iframe src="https://calendar.google.com/calendar/embed?src=..."）。
- （任意）「カスタマイズ」をクリックして調整:
  - 幅と高さ: 例: 幅800px、高さ600px（OLTANAのコンテンツ幅に合わせる）。
  - カラー: OLTANAのテーマカラー（例: No.001のピンク系）に近い色を選択。
  - 表示オプション: ナビゲーションボタン、タイトル、タイムゾーンなどを選択。
- カスタマイズ後、更新された埋め込みコードをコピー
動作確認
- コピーした埋め込みコードをテキストエディタに貼り付け、ブラウザでプレビュー。
- カレンダーが正しく表示され、イベント（例: カット予約枠）が公開されているか確認。
  ヒント: Googleアカウント名がコードに含まれるため、公開に問題ないか確認

スクリーンショット例: カレンダー設定画面、公開設定チェック、埋め込みコードコピー、カスタマイズ画面。

手順3：GoogleカレンダーをOLTANAホームページに掲載

「カスタマイズ」セクションにアクセス
- WordPress管理画面（your-site.com/wp-admin）で「外観」→「カスタマイズ」を開く。
- 「セクションの設定」に移動し、カレンダーを設置したいセクションを選択（例: トップページ下部、予約ページ）。
カスタムHTMLにカレンダーを追加
- 「カスタムHTML」欄に以下のコードを入力: <div class="ol-content-frame ol-animation"> <h2>店舗のスケジュールをチェック！</h2> <p>予約枠やイベントをGoogleカレンダーで確認♪</p> <iframe src="https://calendar.google.com/calendar/embed?src=..." style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> </div>
- src="https://calendar.google.com/calendar/embed?src=..."を手順2でコピーした埋め込みコードのsrc値に置き換える。
- widthとheightをセクションのレイアウトに合わせて調整（例: 幅600px、高さ400px）。
- ol-content-frameでコンテンツ幅を統一、ol-animationでアニメーション（例: フェードイン）を追加。
カスタムCSSでデザインを調整
- 「カスタムCSS」欄に以下のCSSを入力: .google-calendar { max-width: 100%; margin: 0 auto; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } iframe { width: 100%; height: 600px; border: none; } h2 { color: #F06292; /* No.001ピンク系 */ text-align: center; margin-bottom: 10px; } p { text-align: center; margin-bottom: 15px; } @media (max-width: 768px) { iframe { height: 400px; } }
- CSSはカレンダーの幅をレスポンシブに（max-width: 100%）、枠線や影で美しく、テーマカラー（例: No.001は#F06292、No.003は#1976D2）に合わせる。モバイルで高さを縮小（400px）。
動作確認
- ホームページをプレビューし、カレンダーが正しく表示されるか確認。
- イベント（例: 予約枠）が更新され、ナビゲーションボタンで操作可能かテスト。
- Googleカレンダーでイベントを追加し、ホームページに即時反映されるか確認。

スクリーンショット例: 「カスタマイズ」セクションのHTML/CSS入力、カレンダー表示、モバイル表示。

手順4：動作テストと運用準備

カレンダーの動作テスト
- ホームページを公開またはプレビュー。
- カレンダーのイベント（例: 予約枠、イベント）が正しく表示されるか確認。
- Googleカレンダーでイベントを追加/編集し、ホームページに即時反映されるかテスト
- ナビゲーションボタンや「Googleカレンダーに追加」リンクが機能するか確認
デザインとユーザビリティの確認
- カレンダーとキャッチコピーのデザインがOLTANAのテーマ（例: No.001ピンク系）に合っているか確認。
- モバイル表示でカレンダーが崩れず、イベント詳細が読みやすいか検証。
- ol-animationのアニメーション（例: フェードイン）がスムーズか確認。
運用準備
- キャンペーンとの連動: カレンダーにキャンペーンイベント（例: 「5月限定カット割引」）を追加し、OLTANAのブログで告知
- LINE予約との統合: OLTANAの「カスタマイズ」セクションにLINE予約のQRコードとカレンダーを並べ、予約導線を強化
- 定期更新: Googleカレンダーを週1回更新し、最新の予約枠やイベントを反映。
- 顧客向け通知: カレンダーの公開をInstagramやLINEで告知（例: 「予約枠を公開！[your-site.com/reserve]」）。

スクリーンショット例: カレンダー動作テスト、LINE予約との統合デザイン、ブログ告知例。

よくある質問（FAQ)

Q1: Googleカレンダーの開設は無料ですか？
A: はい、Googleカレンダーは無料で使用できます。ビジネス用途でも基本機能は無料です

Q2: カレンダーがホームページに表示されない場合、どうすればいいですか？
A: 埋め込みコードが正しいか、公開設定が「一般公開」になっているかを確認。キャッシュをクリアし、ブラウザを更新してください

Q3: OLTANAのどのセクションにカレンダーを設置すべきですか？
A: 予約ページやトップページ下部が効果的。コンタクトページや追尾サイドバーも顧客の利便性を高めます。

Q4: カレンダーのデザインをさらにカスタマイズするには？
A: 「カスタムCSS」で枠線や背景を調整。高度なカスタマイズはGoogleカレンダーの「カスタマイズ」オプションを使用

Q5: 顧客がカレンダーのイベントを自分のカレンダーに追加できますか？
A: はい、公開カレンダーの左下に「Googleカレンダーに追加」リンクが表示され、顧客がイベントを追加できます

次のステップ

ビジネス用GoogleカレンダーをOLTANAホームページに掲載できました！

定期的にイベントや予約枠を更新し、キャンペーンやLINE予約と連動して顧客の利便性を高めましょう。カレンダーをInstagramやLINEで告知し、集客をさらに強化してください。

No Image

公式LINEアカウントの開設と「LINEで予約」の初期設定ガイド

マニュアルトップに戻る