ホームページにGoogleカレンダーを埋め込んで「予定ごとに色分けしたい！」と思って設定してみたのに、なぜか全部同じ色で表示されてしまう…よくあるミスを抑えながら解説します。
普通に色をつけるだけでは反映されません
Googleカレンダー上で予定に色をつけても、埋め込んだときには反映されず、すべて同じ色で表示されてしまいます。これは、予定に色をつけても「カレンダーそのもの」が分かれていないためです。
マイカレンダーを複数作成しよう
予定ごとの色分けをしたい場合は、「マイカレンダー」を複数作成する必要があります。
手順
新しいカレンダーを作る
Googleカレンダー左側の「他のカレンダー」横の「＋」をクリックします
「新しいカレンダーを作成」をクリックします
名前をつけて「カレンダーを作成」をクリックします
カレンダーの色を設定
カレンダーの色を設定します。
カレンダーの名称の横の縦「・・・」をクリックすると色が表示されますので、そこで色を選びます。
予定を登録する
予定を追加するときは、どのカレンダーに登録するかをしっかり選ぶことが重要です。
色分けをするということは複数のカレンダーができるということですので、必ずカレンダーを選ぶようにしましょう。
公開したい全てのカレンダーの公開設定を変更する
予定が登録できたら、いよいよ埋め込みの準備です。
まず、埋め込み予定のカレンダーの名称の右にある縦「・・・」をクリックします
「設定と共有」をクリックします
「予定のアクセス権限」があるので
青くチェックがつけばOKです
これを公開したい全てのカレンダーひとつひとつに行います。
一つでも公開設定が一般公開されていないとバグが起きますので注意してください。
複数のカレンダーを統合して、埋め込みコードを取得する
カレンダーを色分けしても、埋め込みコードを1つのカレンダーからだけコピーしてしまうと、1色しか表示されません。
必ずカレンダーの統合からコードを取得しましょう。
表示したいカレンダーのどれか一つの名称の横にある縦「・・・」をクリックします。
「設定と共有」をクリックします。
左のメニュー「カレンダーの統合」をクリック、右の「カスタマイズ」をクリックします。
カレンダーの埋め込みプレビューが表示されますので、一番下までスクロールして、埋め込みに表示したいカレンダーを全て選びます。
カレンダーに予定が表示されているのを確認し、右上のコピーボタンをクリックしコードをコピー。
コードをホームページソースに貼り付けます。
よくあるミスまとめ
- 予定の公開設定をしていない → 予定が表示されない
- カレンダーを統合せず、1つだけ埋め込んでしまう → 色が反映されない
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
