【2018年版】Googleカレンダーを使って公開用のカレンダーをWordPressに埋め込む方法

WordPressなどのホームページでGoogleカレンダーを埋め込むということは今までも何度も行っているのですが、Googleカレンダーのデザインが新しくなってからはまだ埋め込みを行っていませんでした。やってみたのですが、以前のイメージで探すと見つからなかったことと、今後は新しいGoogleカレンダーのインターフェースで埋め込みを行うと思うので改めて新しいGoogleカレンダーでの埋め込みについて書いてみようと思います。

Googleカレンダーの中身を考える

昨年7月に書いた記事

とほぼ同じことを新しいGoogleカレンダーで行ってみます。カレンダーを利用するGoogleIDが違ったり、時間が経って内容が変わったりしているので若干の変更はあります。

WEBサイトにカレンダーを貼り付けたいのは見に来てくれた人に営業日などについて知らせたいことがあるからだと思います。

カレンダーで知らせたい内容を考えてみます。

1.年末年始、夏季休暇などの大型休暇の予定
2.打ち合わせなど予定が入っている日時
3.土日はお休みです
4.祝祭日はお休みです

1.2.に関しては営業カレンダーという名前で新しくカレンダーを作って公開するための予定を入れます。
3.営業カレンダーに繰り返し予定で土日を休業日にします。
4．祝祭日はGoogleカレンダーに入っている日本の祝祭日カレンダーを重ねて表示させようと思います。

新しいカレンダーを作る

営業カレンダーを新しく作ってみます。

Googleにログインしている状態で、Googleカレンダーに行きます。

新しいカレンダーの追加方法は2つあります。

新しいカレンダーを追加する その1

カレンダーページの左側にある友だちのカレンダーを追加の右にある＋をクリックします。
※ 友だちのカレンダーを追加とあるのがちょっとわかりにくいですが

クリックするとカレンダーの種類が表示されるので新しいカレンダーをクリックします。

設定画面のカレンダー追加画面になります。

カレンダー名に営業カレンダー、説明にホームページに埋め込む用の、公開カレンダーと入力してカレンダーを作成をクリックすると新しいカレンダーが作成されます。

新しいカレンダーを追加する その2

カレンダーページの右上にある

歯車をクリック

設定をクリック

設定画面の左ブロックにあるカレンダーを追加をクリック

新しいカレンダーをクリックします。

設定画面のカレンダー追加画面になります。

カレンダー名に営業カレンダー、説明にホームページに埋め込む用の、公開カレンダーと入力してカレンダーを作成をクリックすると新しいカレンダーが作成されます。

作成したカレンダーの公開設定を変更する

カレンダーが作成されると

マイカレンダーのところに営業カレンダーが表示されるのでクリックします

アクセス権限というところがあるので、

一般公開して誰でも利用できるようにするにチェックを入れます。チェックを入れると

このような警告が表示されるのでOKをクリック

このように表示されればOKです。

お休みの日である土日を繰り返し予定で休業日にする

カレンダーができあがったら、予定を入れておきます。

この記事などを参考にしてみてください。

土日を繰り返しで休業日にするには

左矢印をクリックして、カレンダー画面で

右下にある＋（予定を作成）をクリックし、

タイトルに休業日と入力してから、

日付をクリック

次の土曜日をクリック

終日にチェックを入れて、繰り返さないをクリックし、毎週土曜日をクリック

少し下の方にカレンダーの種類を選ぶところがあるので営業カレンダーを選びます。

保存をクリック

カレンダーに休業日と表示されました。この日から先は

ずっと土曜日に休業日と表示されました。日曜日も同様に設定しておきます。

表示用のカレンダーデザインを決めてWEBサイトに貼り付ける

Googleカレンダーは埋め込み用コードをホームページに貼り付けることで埋め込むことができるようになっています。

ホームページにカレンダーを埋め込むときにはメインエリアに大きなカレンダーを表示したり、サイドバーに小さなカレンダーを表示したりします。この2種類のカレンダーのデザインを決めます。カレンダーのデザインを決めると埋め込みコードが作成されます。

営業カレンダーの設定画面を表示する

カレンダー設定のページに行くには2つの方法があります。

1つめは、

カレンダーページの作りたいカレンダー（今回は営業カレンダー）にカーソルを乗せると表示される右端のオーバーフローメニューをクリックして、

設定と共有をクリックする方法。

2つめは、カレンダーページの右上にある

歯車をクリック

設定をクリックして

マイカレンダーの設定のところで営業カレンダーをクリック

これでどちらの場合も

営業カレンダーの設定画面になります。

大きいカレンダーを埋め込む

大きいカレンダー用のコードを作りたいと思います。カレンダーの設定画面の下の方にある

カレンダーの統合という項目の中にある、カスタマイズという文字リンクをクリック
※ 今回この部分が今までより分かりにくかったので探してしまいました！

Googleカレンダー埋め込み支援ツールというページが表示されます。ここで表示するカレンダーの種類や、大きさなどを決めていきます。

左側に

このようにすべてのオプションが表示された状態になっているので、

一つずつチェックを外してみて「表示しなくてもよい」オプションがあればチェックを外します。また、週の始まりを月曜日にしたかったので変更しておきます。

画面の左側の下の方に、

表示するカレンダーがあるので

日本の祝日にチェックを入れます。

この画面に表示されているカレンダーの状態でよければ、

下記のコードを貼り付けると、このカレンダーがウェブページに挿入されますのところにあるテキストエリアで右クリックして、すべて選択して、

コピーをクリック。

WordPressの固定ページに貼り付けてみます。

新規固定ページで

必ずテキストタブにしておいてから、コピーしたコードを貼り付けます。これを表示してみると、

このように大きいカレンダーが表示されました。

サイドバーに小さいカレンダーを表示する

次にWebサイトでいつでも見られるようにサイドバーにカレンダーを表示してみたいと思います。

先ほどの手順で、Googleカレンダー埋め込み支援ツールというページを表示します。

先ほどはいじらなかった

幅、高さを変えて小さいカレンダーを作ります。

幅 250、高さ 300 にしてみるとこのぐらいの大きさになりました。後は先ほどと同じくオプションや開始の曜日を変更し、表示するカレンダーの種類で日本の祝日を追加します。

表示されたカレンダーを見て、これでよいなと思ったら先ほどと同じ手順で

コードをコピーします。

WordPressのサイドバーに貼り付けてみます。

ダッシュボード 外観＞ウィジェット で、

カスタムHTMLをクリックして、表示したいサイドバーをクリックしてから（サイドバーはテーマによって異なります）、ウィジェットを追加をクリック

タイトルに任意の文字（この場合は「営業カレンダー」）、内容に先ほどコピーしたコードを貼り付けて、保存をクリックします。

表画面を見ると

サイドバーに小さいカレンダーが表示されました。

おまけ：大きいカレンダーのレスポンシブ非対応問題

ここまで書いてきて、大きいカレンダーはレスポンシブ対応していないということに気づきました。

Bliskで確認したところ、スマホサイズとタブレットサイズの表示ではカレンダーの赤矢印の部分がはみ出しちゃっています。

ゆうそうとのホームページではデザイン担当がCSSなどを駆使して

このようにはみ出さないようにしていました。方法を聞いてみたところHTMLとCSSの追加があってかなりややこしい（＠＠）ので、もっと簡単な方法はないかな～と工夫してみました。

Bliskについてはこちらをご覧ください。

貼り付け時のコードをちょっと変えるだけでのGoogleカレンダーレスポンシブ対応

大きいカレンダーの埋め込みをするときのコードに

style="border-width:0" width="800" height="600"

こういう部分があります。ここで大きさを800ピクセル、600ピクセルと決めてしまっているので幅は縮まりそうにありません。ということでこの部分を

style="width:100%;height:400px;border-width:0"

このように書き換えてみました。幅は100％、高さはパーセンテージだとうまくいきそうにないので大きくても小さくてもまぁ大丈夫かなという400pxに指定してみます。他のコードはGoogleカレンダーからコピーしてきたもののままです。これを貼り付けてみると、

このようにだいたいいい感じに収まりました。PCでの表示も、

ちょっと高さが短くなりましたがまぁまぁという感じで表示されます。Googleカレンダーのレスポンシブ対応を簡単にやりたい！という方は参考にしてみてください(^^)/