パソコンに疎くても大丈夫!
サポート充実のホームページ制作

GoogleカレンダーをHPに埋め込む

こんにちは、マルネです。

とても便利なGoogleカレンダー、皆さんは上手く活用していますか?今回は、Googleカレンダーをご自身のウェブサイト(ホームページ)やブログに埋め込む方法について、分かりやすく紹介します。

目次

GoogleカレンダーをHPに埋め込む手順

STEP
ブラウザでGoogleカレンダーにアクセスする

Googleカレンダーを使用するために、ウェブブラウザを起動します。

特にアカウント名は表示されないため、通常どおりのアカウントで進めて問題ありません。

STEP
HPに埋め込むカレンダーを作ります

左側にあるカレンダーの一覧から、「他のカレンダー」と書いてある横の「+」アイコンをクリックします。

下記のようにプルダウンメニューから「新しいカレンダーを作成」をクリックします。

STEP
カレンダータイトルなどを決める

新しいカレンダーを作成する画面に移るので、カレンダーの名前を決めます。今回は「休業日カレンダー」にしてみました。(名前は後ほど非表示にもできます)

名前を入力後、青い「カレンダーを作成」ボタンをクリックすると、新しいカレンダーが生成されます。少し時間がかかりますので「作成しました」の文字が表示されるまでお待ちください。

STEP
カレンダーの設定画面へ進む

カレンダーが作成されたら、左サイドに先ほど付けたカレンダーの名前が表示されているのでそちらをクリックして設定画面に進みます。

STEP
アクセス権限を設定

予定のアクセス権限の欄の「一般公開して誰でも利用できるようにする」にチェックを入れます。

予定の表示は「すべての予定の詳細」を選んでください。

STEP
カスタマイズ

そのまま画面を下にスクロールし、埋め込みコードの下にある「カスタマイズ」ボタンをクリックし、カスタマイズ画面に進みます。

左サイドの項目からカレンダーのカスタマイズが可能です。

重要なカスタマイズはココ!

最下部「表示させるカレンダー」の項目で、表示させたくないカレンダーはチェックを外しておきましょう。ここにチェックされていると公開されてしまう可能性があります。

STEP
埋め込みコードをコピー

カスタマイズが終わったらカスタマイズ画面上部の「埋め込みコード」右端のアイコンをクリックし、埋め込みコードをコピーし、パソコンのメモ帳機能などに貼り付けて保存しておきましょう。このコードをHPに埋め込みます。

STEP
HPに埋め込みます。(WordPressの場合)

WordPressにログインし、カレンダーを貼り付けたいページの編集画面に入ってください。例として固定ページに「スケジュール」のページを設けましたので、「スケジュール」のタイトルをクリックし、編集画面に進みます。

STEP
埋め込みコードを貼り付けます。

編集画面の「プラスマーク」(ブロックを追加)ボタンをクリックし、「カスタムHTML」と書かれたアイコンをクリックします。検索窓に「html」と入力すると出てきます。

画像に alt 属性が指定されていません。ファイル名: -2023-08-31-13.43.05-1-1024x521.png

出てきたボックス内に先ほどコピーした「埋め込みURL」のコード(<iframe src〜で始まるコード)を貼り付けます。

STEP
プレビューで表示を確認し、「更新」で完了!

画面右上の「パソコン」アイコンをクリックし、「新しいタブでプレビュー」から表示を確認しましょう。

うまくカレンダーが表示できていればOKです。

スマホでGoogleカレンダーが表示されない時

iPhoneのSafariで見るとGoogleカレンダーが表示されないことがあります。そんな時は下記記事を参考にしてください。

あわせて読みたい
GoogleカレンダーをHPに埋め込んだけど、スマホで表示されない時の対処法(iPhoneのSafariの場合) Googleカレンダーはとても便利ですので、HPに埋め込まれている方も多くありません。ただ、この間クライアント様からスマホで埋め込まれたGoogleカレンダーが表示されな...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次