Googleカレンダーをサイトに表示させる方法。-その1-デフォルトタイプ

Google

Googleカレンダーをサイトに表示させたいというご要望を頂きましたので、マニュアル代わりに記事として公開させて頂きたいと思います。

とは言え、Googleカレンダーをサイトや記事に埋め込み表示させる方法は非常に簡単です。

カスタムHTML」で表示させたいGoogleカレンダーコードをコピペすればOKです。
なお、埋め込みたいGoogleカレンダーのコードの取得方法を下記に簡単に説明いたしますね。

Googleカレンダーのコードの取得方法

※Googleアカウントにログインする必要があります。

Googleアプリにある「カレンダー」をクリックします。

Googleカレンダーで表示したいカレンダー名にマウスを重ねると表示される「オーバーフロー メニュー」をクリック。

オーバーフロー メニューから、「設定と共有」を選択します。

「予定のアクセス権限」セクションに移動し、「一般公開して誰でも利用できるようにする」にチェック

警告が表示されるので、問題ない場合は「OK」をクリック。

※時間枠のみ表示させたい場合は「予定の表示(時間枠のみ、詳細は非表示)」に。

「カレンダーの統合」セクションに移動し、「埋め込みコード」から埋め込みコードをコピーします。

Googleカレンダーのコードの埋め込み

Googleカレンダーの埋め込みコードを取得したなら、あとは埋め込みたいページや記事にペーストすればOKです。
今回はWordPressを使った方法HTML(PHP)に貼り付ける方法をご紹介いたします。

[WordPress]固定ページ、投稿記事に埋め込む方法

WordPressで埋め込む場合は前述した通り、「カスタムHTML」ブロックを選択。

先程コピーした「埋め込みコード」をペーストすればOKです。

プレビューで問題なく表示されているか確認してください。

[HTML、PHP]埋め込む方法

埋め込みたいファイルをテキストエディタなどで開き、該当箇所に「埋め込みコード」をペーストすればOKです。

注意

こちらの画像のように「カレンダーの表示権限がないため、予定を表示できません。」と出ている場合は、「予定のアクセス権限」にチェックが入っているかご確認ください。

まとめ

以上がGoogleカレンダーをサイトに表示させる方法となります。

大まかな流れとしては、Googleカレンダーの「埋め込みコード」を取得し、サイトにコードを貼り付ける形となります。

その他にもGoogleではカレンダーの基本操作の他、共有設定、便利な機能などを紹介しているガイドページがありますので、Googleカレンダーを有効利用したい方は、公式サイトをご覧ください!

関連記事

タイトルとURLをコピーしました