みなさんはGoogleカレンダーを使ってますか？
ビジネスとして、また私用として使うにはかなり便利なツールですよね。
スマートフォンとの同期もできるので本当にありがたいカレンダーだと思います。
さて、そんなGoogleカレンダーに関してですが、先日お客様よりwebサイトに埋め込んだカレンダーの予定箇所が色分けされないというお問い合わせを頂きました。
実はこの手のお問い合わせは初めてではないので、「Googleの仕様です（もちろん順を追って説明して）」とお話することがほとんどでしたが、今回は備忘録も兼ねてGoogleカレンダーの予定部分の色についてざっくりとお話したいと思います。
詳しく知りたい方は、「Googleカレンダー web埋め込み 色変え」などで検索してみるといいでしょう。
Googleカレンダーについて
Google カレンダーは、Googleが提供する無料の時間管理ウェブアプリケーションである。2006年4月13日にスタート。2009年7月までベータ版だった。ユーザーはソフトウェア使用するためにGoogleアカウントを取得する必要がある。
https://ja.wikipedia.org/wiki/Google_%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC
さて、Googleカレンダーに関してですが、予定を書き込んだ後に「色」を変更することがありませんか？
下記の画像の①のところで色を変えた事がありませんか？
ここで色を変えてもWEBサイトに埋め込むと、色が変わらない仕様になってます。
では、どうやったら埋め込んだ予定の色が反映されるかといいますと、カレンダーを新規作成する必要があります。
カレンダーの新規作成方法
他のカレンダー横の「+」アイコンをクリックします。
するとメニューが開きますので、新しいカレンダーを作成をクリックします。
画面が遷移されますのでこちらのフォーム内に必要事項を入力し「カレンダーを作成」をクリックします。
作成が完了すると画面左にの「マイカレンダーの設定」箇所に追加したカレンダー名（ここでは仮にhogehoge-1としています）が表示されます。
これで準備はOKです。
画面上部の「← 設定」をクリックして一つ前の画面に戻りましょう。
カレンダーの設定
先程と同じように予定を書き込みます。
そしてカレンダーアイコンの項目をクリックします。
すると、先程追加したカレンダーの名前が表示されますので、そちらを選択してください。
すると、予定の色がカレンダーに合わせた色に自動的に変更されます。
[準備編]Googleカレンダーを埋め込み
さて、あとはGoogleカレンダーをwebサイトに埋め込むために設定をしていきます。
メインカレンダー名にカーソルを重ねるとメニューのアイコンが表示されます。
ニューをクリックするとサブメニューが表示されますので「設定と共有」をクリックします。
カレンダーの帯色を変更したい場合は下のカラーパレットから好きな色を選択すればOK
設定画面に遷移されますので、そちらの予定のアクセス権の「一般公開して〜」にチェックを入れます。
警告文が表示されますので問題なければOKをクリック
Googleカレンダーを埋め込み
いよいよカレンダーをWEBサイト・ブログサイトに埋め込む方法をご紹介。
一般的であれば、カレンダーの統合に記載されているソースコードを埋め込めばいいんですが、それだけでは先程追加したカレンダー（hogehoge-1）は表示されません。
試しにこちらのソースコードを埋め込んでみると下記の画像のように追加したカレンダー（hogehoge-1）が表示されない状態になっているかと思います。
追加したカレンダー（hogehoge-1）を表示させるにはひと手間掛けなくては行けません。
追加したカレンダーの予定を表示させる
追加したカレンダー(hogehoge-1)を表示させるには埋め込みコードのみでは表示されませんのでカスタマイズする必要があります。
カスタマイズをクリックすると追加したカレンダー（hogehoge-1）の予定なども表示されているかと思います。
こちらのページの埋め込みコードをwebサイトに埋め込めばhogehoge-1の予定が表示されるようになります。
カスタマイズ
余計なカレンダーの情報が表示されていて、そちらを削除したい…などのお悩みも出てくるかと思います。
その場合は「表示するカレンダー」から、表示したいカレンダーのみを選択すればOKです！
あとは、ソースコードをコピーして該当箇所に貼り付ければOKです。
下記は実際の埋め込みコードのソースを利用したカレンダーの画像になります。
さらにカレンダーを追加したい場合は、「カレンダーの追加方法」を繰り返して下さい。
注意点
カレンダーの色を変えた場合は、そのままにしていても埋め込んだカレンダーの色は変更されません。
ですので、色を変えたり設定を変えた場合は毎回新たにカスタマイズしたソースコードをwebサイトやブログサイトの該当箇所に埋め込み直す必要があります。
試しに、下記カレンダーは帯色を変更したカレンダーを、カスタマイズで新たに吐き出したソースを埋め込んだ画像になります。（↑で表示しているカレンダーと比較してみてください。）
メインカレンダーが緑で、hogehoge-1カレンダーは紫に変更。
カレンダーの色を変更した場合は、できるだけ埋め込んでいるサイトのソースコードも書き換えるようにしましょう！
最後に
いかがでしたか？
今回はGoogleカレンダーの予定箇所の色変えのご紹介でした。
Googleカレンダーを利用して予約システムを使っていたり、営業カレンダーを利用している方で色を変えたいけど変わらないとお悩みの方は、一度ご自分のカレンダーの設定を見直して見てはいかがでしょうか？
使い方によっては上記のように予約状況がひと目で分かるようなカレンダーの作成も可能です。
また、WordPressであれば、Googleカレンダーと連動した予約システムのプラグインなどもありますので、興味のある方は一度調べて見てください！
それでは、今回はここまで。
お疲れさまでした
