例えば、レッスンや教室の開催スケジュールなどをホームページに表示したい場合に、Googleカレンダーでカレンダーを管理し、ホームページに埋め込むという方法があります。
本記事ではGoogleカレンダーを作成・公開し、ホームページやWebサイトへ埋め込む方法をご説明いたします。
Contents
公開用のGoogleカレンダー作成
カレンダーの新規作成
①Googleカレンダーにアクセスします。
②左側の「他のカレンダー」の「+」のアイコンをクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-add01-1024x475.jpg)
③「新しいカレンダーを作成」をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-add02-1024x512.jpg)
④「名前」と「説明」を入力し「カレンダーを作成」をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-add03-1-1024x471.jpg)
カレンダーが作成されました。
カレンダーの一般公開
①Googleカレンダーにアクセスします。
②右上の設定アイコン-設定をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting01-1024x476.jpg)
③画面左側の、公開するカレンダーの名前をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting02-1024x477.jpg)
④「アクセス権限」をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting03-1024x505.jpg)
⑤「一般公開して誰でも利用できるようにする」にチェックを入れます。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting04-1024x202.jpg)
⑥警告が表示されるので「OK」をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting05-300x187.jpg)
一般公開されました。
予定の作成
①Googleカレンダーにアクセスします。
②カレンダー上で、予定を入力する日時をクリックします。
(左上の「作成」ボタンからも作成できます)
③予定のタイトルや詳細を入力し、「保存」ボタンをクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-schedule01-1-1024x500.jpg)
WebサイトへGoogleカレンダーを埋め込み
埋め込み用HTMLを取得
①Googleカレンダーにアクセスします。
②右上の設定アイコン-設定をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting01-1024x476.jpg)
③画面左側の、埋め込むカレンダーの名前をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting02-1024x477.jpg)
④「カレンダーの統合」をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting07-1024x425.jpg)
⑤カスタマイズをしない場合、「埋め込みコード」に表示されているコードをコピーします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-setting08-1024x424.jpg)
「カスタマイズ」ボタンをクリックして、カレンダーの表示のカスタマイズを行うこともできます。
カスタマイズする場合の手順は、以下の記事をご参照ください。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/eye-catch-google-calendar-customize-320x180.jpg)
WebサイトへHTMLを貼り付け
コピーしたHTMLをWebサイト側に貼り付けます。
WordPressに埋め込む場合の手順を例に説明します。
固定ページへ埋め込む場合
①WordPressの管理画面へログインし、カレンダーを埋め込む固定ページを開きます。
②「+」ボタンをクリックし「カスタムHTML」ブロックを選択します。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-page01-1024x673.jpg)
③先ほどコピーしたHTMLを貼り付けます。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-page02-1024x427.jpg)
④「更新」をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-page03-1024x344.jpg)
④Googleカレンダーが表示されることを確認します。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-page04-300x261.jpg)
サイドバーやフッターなど、ウィジェットに埋め込む場合
①WordPressの管理画面へログインし、[外観]-[ウィジェット]画面を開きます。
②「カスタムHTML」を設置したい場所へドラッグします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-widget01-1024x458.jpg)
③「タイトル」を入力し、「内容」に先ほどコピーしたHTMLを貼り付けし、「保存」をクリックします。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-widget02-1024x452.jpg)
④Googleカレンダーが表示されることを確認します。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/google-calendar-widget03-300x236.jpg)
GoogleカレンダーをWebサイトに埋め込む手順は以上です。
Googleカレンダーの表示項目をカスタマイズしたり、
複数のカレンダーを1つの埋め込みカレンダーに表示したい場合のカスタマイズ手順を、以下の記事にてご紹介しています。
こちらも参考にしてみてください。
![](https://howtomake-homepage.com/wp-content/uploads/2020/02/eye-catch-google-calendar-customize-320x180.jpg)