Dressing 
今回は、GoogleカレンダーをWordPressのブログに表示する方法を解説します。
予約や日程調整が必要なサービスを提供されている方は、ブログにGoogleカレンダーを表示できたら便利ですよね。
簡単に設置できますのでぜひご活用ください。
主な手順は以下のようになります。
- ブログ表示用のGoogleカレンダーを作成する
- Googleカレンダーの埋め込みコードを取得する
- ブログに貼り付ける
ではさっそく説明していきます。
Googleカレンダーをブログに表示する方法
ブログ表示用のGoogleカレンダーを作成する
① Googleアカウントにログインした状態で、Googleカレンダーを開きます。
Googleを開いて右上のメニューアイコンから「カレンダー」を選びましょう。
② 右上の歯車アイコンから設定をクリックします。
③ 左側の「カレンダーを追加」を開いて「新しいカレンダーを作成」をクリックします。
④ カレンダーの名前を聞かれますので、カレンダーの名前を入力して[カレンダーを作成]をクリックして、用途に合わせた名前をつけます。
この例では「カウンセリング空き状況」としました。
これでブログに表示するカレンダーが作成できました。
左の「マイカレンダーの設定」に作成したカレンダーが表示されるのでクリックしてカレンダーの設定を行います。
⑤ 少しスクロールすると「予定のアクセス権限」という項目があるので、「一般公開して誰でも利用できるようにする」にチェックを入れます。
チェックをすると警告が表示されますが[OK]をクリックしてください。
これでこのカレンダーが誰でも見られるようになりました。
同じアカウントの他のカレンダーは公開されませんのでご安心ください。
続けて、ブログに埋め込むためのコードを取得します。
Googleカレンダーの埋め込みコードを取得する
さらに下にスクロールすると埋め込みコードがあるのでコピーします。
Googleカレンダーをカスタマイズする（任意）
このままでも良いのですが、下図のように印刷アイコンやタイムゾーンなどが表示されてしまうので、非表示にしたい場合はカスタマイズしましょう。
カスタマイズは、埋め込みコードの下にある[カスタマイズ]ボタンから行います。
カスタマイズ画面が開きますので、左側の項目をお好みで設定したら、上の埋め込みコードをコピーします。
主な設定項目はこちら。
- カレンダーのタイトル：表示用のカレンダー名を任意に設定可能
- 表示：表示・非表示を設定
- 幅・高さ：大きさを変更したい場合は数値を入力
- 背景色：カレンダーの背景色を選択
- デフォルトのビュー：月・週・予定リストから選択
- 週の開始日：土曜日、日曜日、月曜日から選択
- 言語・Timezone：お住まいの地域に合わせて設定
- 表示するカレンダー：ブログに表示するカレンダーのみチェック
「表示するカレンダー」で他のカレンダーのチェックを外し忘れて埋め込んでしまっても予定が見えてしまうことはありませんが、下記のようなエラーが表示されます。表示するカレンダー以外のチェックは外すようにしましょう。
ブログに貼り付ける
WordPressでカレンダーを埋め込むページを開き、「カスタムHTML」ブロックを選んで先ほどコピーした埋め込みコードを貼り付けます。
プレビューで確認。カレンダーが表示されました。
予定を登録する
ブログ用に作成したカレンダーに予定を登録する方法も解説します。
Googleカレンダーを開き、予定を入れたい日付の枠内をクリックすると入力ウィンドウが立ち上がるので、予定を入れたいカレンダーを選んでタイトルと日時を入力します。
② 最後に[保存]したら予定の登録は完了です。
登録した内容がブログに埋め込んだカレンダーに反映されていることを確認しましょう。
予定を編集、削除する
編集または削除したい予定をクリックすると小さいウィンドウが立ち上がりますので、そこから編集・削除を行います。
- 編集する場合：鉛筆アイコンをクリック
- 削除する場合：ゴミ箱アイコンをクリック
まとめ
今回はGoogleカレンダーをWordPressに埋め込む方法を解説しました。
普段使っているGoogleカレンダーで、サービスの予約状況の表示を簡単に行えるので便利だと思います。
この記事で紹介した方法を試してみたけれど、うまくいかない…。そんな時は、Dressingのウェブサポートを活用してみませんか？
WordPressのお悩みに経験豊富な専門スタッフが対応します。設定方法のご説明から、代行設定まで柔軟に承ります。
ホームページ運営でお困りの際は、ぜひDressingにご相談ください。