こんにちは、マルネです。
とても便利なGoogleカレンダー、皆さんは上手く活用していますか?今回は、Googleカレンダーをご自身のウェブサイト(ホームページ)やブログに埋め込む方法について、分かりやすく紹介します。
GoogleカレンダーをHPに埋め込む手順
Googleカレンダーを使用するために、ウェブブラウザを起動します。
特にアカウント名は表示されないため、通常どおりのアカウントで進めて問題ありません。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.02.08-1024x328.png)
左側にあるカレンダーの一覧から、「他のカレンダー」と書いてある横の「+」アイコンをクリックします。
下記のようにプルダウンメニューから「新しいカレンダーを作成」をクリックします。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.02.23-1024x377.png)
新しいカレンダーを作成する画面に移るので、カレンダーの名前を決めます。今回は「休業日カレンダー」にしてみました。(名前は後ほど非表示にもできます)
名前を入力後、青い「カレンダーを作成」ボタンをクリックすると、新しいカレンダーが生成されます。少し時間がかかりますので「作成しました」の文字が表示されるまでお待ちください。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.02.54-1024x510.png)
カレンダーが作成されたら、左サイドに先ほど付けたカレンダーの名前が表示されているのでそちらをクリックして設定画面に進みます。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.16.11-1024x300.png)
予定のアクセス権限の欄の「一般公開して誰でも利用できるようにする」にチェックを入れます。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.04.47-1024x303.png)
予定の表示は「すべての予定の詳細」を選んでください。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.05.00-1024x234.png)
そのまま画面を下にスクロールし、埋め込みコードの下にある「カスタマイズ」ボタンをクリックし、カスタマイズ画面に進みます。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.05.13-1024x325.png)
左サイドの項目からカレンダーのカスタマイズが可能です。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.05.31-1024x568.png)
重要なカスタマイズはココ!
最下部「表示させるカレンダー」の項目で、表示させたくないカレンダーはチェックを外しておきましょう。ここにチェックされていると公開されてしまう可能性があります。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.05.45-1024x262.png)
カスタマイズが終わったらカスタマイズ画面上部の「埋め込みコード」右端のアイコンをクリックし、埋め込みコードをコピーし、パソコンのメモ帳機能などに貼り付けて保存しておきましょう。このコードをHPに埋め込みます。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.05.52-1024x248.png)
WordPressにログインし、カレンダーを貼り付けたいページの編集画面に入ってください。例として固定ページに「スケジュール」のページを設けましたので、「スケジュール」のタイトルをクリックし、編集画面に進みます。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.42.43-1024x431.png)
編集画面の「プラスマーク」(ブロックを追加)ボタンをクリックし、「カスタムHTML」と書かれたアイコンをクリックします。検索窓に「html」と入力すると出てきます。
![画像に alt 属性が指定されていません。ファイル名: -2023-08-31-13.43.05-1-1024x521.png](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/image.png)
↓出てきたボックス内に先ほどコピーした「埋め込みURL」のコード(<iframe src〜で始まるコード)を貼り付けます。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.56.12-1024x194.png)
画面右上の「パソコン」アイコンをクリックし、「新しいタブでプレビュー」から表示を確認しましょう。
うまくカレンダーが表示できていればOKです。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/08/スクリーンショット-2023-08-31-13.43.40-1024x454.png)
スマホでGoogleカレンダーが表示されない時
iPhoneのSafariで見るとGoogleカレンダーが表示されないことがあります。そんな時は下記記事を参考にしてください。
![](https://marune-lab.com/wp-en/wp-content/uploads/2023/09/2-300x200.jpg)