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