GoogleカレンダーをWEBサイトやWordPressに埋め込みしたい
自身のサイトで今後のスケジュールなどを共有する際、Googleカレンダーがとても便利です。
Googleカレンダーのページを閲覧できるリンクをWebサイトやWordPressに貼り付けておくのも一つの手ですが、Googleカレンダーそのものを埋め込むことが可能です。
カレンダーを埋め込んだら自分のプライベートのスケジュールまで全部ばれてしまうではと思うかもしれませんが、その心配はありません。
この記事では、GoogleカレンダーをWEBサイトやWordPressに埋め込みする方法を解説します。
事前に埋め込み用カレンダーを作成しておく
これと同じように埋め込み用のカレンダーを作成しておくことで、プライベートな予定が含まれない共有用カレンダーを作成することができます。
![「他のカレンダー」の[+]をクリックして[新しいカレンダーを作成]を選択する](http://cdn2.aprico-media.com/production/imgs/images/000/049/687/original.png?1583571279)
カレンダーを作成したら、左上の矢印を押して元の画面に戻りましょう。
するとマイカレンダーに先ほど作成したカレンダーが追加されています。
GoogleカレンダーをWEBサイトに埋め込む方法
GoogleカレンダーをWebサイトに埋め込むことはとても簡単です。
![[設定と共有]をクリック](http://cdn2.aprico-media.com/production/imgs/images/000/049/691/original.png?1583571287)
カレンダーのタイトルやアクセス権限などの設定画面が表示されます。
この埋め込みコードをコピーしてWebサイトのHTMLにペーストしましょう。
埋め込まれたカレンダーは閲覧専用となってるので勝手に編集されることはありません。
GoogleカレンダーをWordPressに埋め込む方法
GoogleカレンダーはWordPressにも簡単に埋め込むことができます。
一応プラグインは存在しますが、開発者向けのAPI Key取得など難易度が高いためあまりお勧めしません。
また、一つだけ注意点があり投稿エディタのビジュアルモードになっている状態で貼り付けてはいけません。
埋め込みするGoogleカレンダーのカスタマイズ
ですが、Googleカレンダーは埋め込み用に週始めやカラーなどをカスタマイズすることが可能です。
そのまま埋め込みタグやURLが表示されているところまでスクロールしましょう。
![埋め込みコードの下にある[カスタマイズ]をクリック](http://cdn2.aprico-media.com/production/imgs/images/000/049/697/original.png?1583571301)
ここで表示された画面で色や週始めなどを自由にカスタマイズできます。
表示する項目を絞り込む
埋め込み用Googleカレンダーは印刷ボタンや月を切り替えるナビゲーションボタンが表示されております。
変更内容は右側のカレンダーに即時プレビューされるので、必要ないものは非表示、必要なものを表示させてコンパクトにすると良いでしょう。
週初めを変更する
デフォルトでは週始めが日曜日になっています。
「土曜日・日曜日・月曜日」の3種類から選択できるので。好きな物を選びましょう。
ヘッダーの背景色を変更する
カレンダー上部のヘッダーは色を変更することが可能です。
レスポンシブ対応する
ですがiframeタグにCSSを適用することでレスポンシブ対応できるので、レスポンシブ対応したい場合は以下のCSSを試用してください。
iframe[src^="https://calendar.google.com/calendar/embed"]{
width:100%;
}