Adobe MuseにGoogleカレンダーを埋め込む方法

今回はAdobe MuseにGoogleカレンダーを埋め込む方法です。たまに見るアドビ公式のMuseのフォーラムに同様の質問があったのと、偶然見たサイトにGoogleカレンダーが埋め込まれていたことが切欠となりました。
Googleカレンダーを利用するにはGoogleのアカウントが必要なので、お持ちでない方は前もってアカウントを取得しておいてください。
※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。
Googleカレンダーを共有化し、サイトに埋め込むためのコードを取得する
はじめにGoogleカレンダーで共有化の設定
Googleカレンダーを開きます。
1. Googleのページの右上にある四角のメニューをクリックするとパネルが開きます。
2. パネルの中にある「カレンダー」をクリックします。
1. Googleのページの右上にある四角のメニューをクリックするとパネルが開きます。
2. パネルの中にある「カレンダー」をクリックします。
3. Googleカレンダーが開いたら、画面の右上にある歯車のアイコンをクリックします。
4. 開いたパネルの中の「設定」をクリックします。
4. 開いたパネルの中の「設定」をクリックします。
5. 次に画面左側にある「マイカレンダー」から、共有したいカレンダー名をクリックします。
6. マイカレンダーの設定画面になったら、上から2つめの「アクセス権限」の枠の中にある「一般公開して誰でも利用できるようにする」をクリックしてください。
7. クリックすると警告パネルがでますが、OKボタンをクリックしてください。
以上の手順でサイトに埋め込みたいGoogleカレンダーに表示するマイカレンダー全てを共有化させます。
8. 共有化の設定が終わったら、「カレンダーの統合」の枠の中にある青文字「カスタマイズ」をクリックしてください。
OKをクリックするとGoogleカレンダー埋込支援ツールが開きます。
![]() |
(C) Google |
OKをクリックするとGoogleカレンダー埋込支援ツールが開きます。
Googleカレンダー埋込支援ツールで埋め込み用コードを取得
Googleカレンダー埋込支援ツールでは左側にある設定で各種表示やカレンダーのサイズを変更できます。9. 先ほどの手順で共有化したマイカレンダーのうち、どれをカレンダーに表示させるかを左下のチェックボックスで指定できます。全ての設定が終わったら画面上に表示されているHTMLコードを全て選択し、クリップボードにコピーして下さい。
![]() |
(C) Google |
追記:左側の表示メニューの中にある「タイムゾーン」にチェックがあると、カレンダーの左下に「予定を表示するタイムゾーン」の文章が表示されるのですが、Museにカレンダーを配置した際にはこの文章が欠けて表示されてしまいます。なので、特に重要でなければタイムゾーンのチェックは外してしまったほうが良いと思います。
Adobe MuseにHTMLコードを挿入
10. Adobe MuseでHTMLコードを利用するには画面の上にあるメニュー「オブジェクト」から「HTMLを挿入...」を使用します。
11. クリックするとウィンドウが表示されるので、枠内に先ほどGoogleカレンダー埋込支援ツールにて取得したHTMLコードをペーストして入力してください。
OKをクリックするとGoogleカレンダーが配置されます。
OKをクリックするとGoogleカレンダーが配置されます。
以上となります。
次回のAdobe Museのついての投稿は、配置したGoogleカレンダーのレスポンシブ化について書こうと思っています。
次回→ Adobe Museに埋め込んだGoogleカレンダーをレスポンシブ化させる方法
コメント
コメントを投稿