Googleカレンダーの枠線の色や形をカスタマイズするgcalendar-wrapper.php

「Googleカレンダーを使ってお店の定休日とイベントのカレンダーをWebサイトに埋め込む」ではGoogleカレンダーを使ってお店の定休日とイベントのカレンダーをWebサイトに埋め込みました。Googleカレンダーは枠の色などをカスタマイズできないのですが、それをカスタマイズする方法がありましたのでそれについて書きます。

Googleカレンダーをカスタマイズする前の状態

Googleカレンダーをカスタマイズする前の状態は、

こんな感じです。枠の薄い水色などは変更できないのでWebサイトの色合いに合わせることができません。

Googleカレンダーの枠線の色などをカスタマイズできるgcalendar-wrapper.php

なにか方法はないものかなぁと検索して、こちらのページを発見しました。

Googleカレンダーのデザインをカスタマイズして埋め込む方法

gcalendar-wrapper.php というプログラムでGoogleカレンダーの色などのCSSを指定できる仕組みを提供してくれるようです。

Easy Color Customization for Embedded Google Calendars

こちらのサイトでダウンロードすることができます。

Download the wrapper script をクリックし、

gcalendar-wrapper-20101115.zip をダウンロードして解凍します。
* 年月日の部分はバージョンによって変わると思います。

解凍するとフォルダに gcalendar-wrapper.php というファイルができます。このファイルを使っている子テーマフォルダに入れます。

これで準備ができました。

Googleカレンダーの貼り付けコードを変更する

「Googleカレンダーを使ってお店の定休日とイベントのカレンダーをWebサイトに埋め込む」で、GoogleカレンダーをWebサイトに貼り付けました。

そのときのコードは

で始まっています。その部分を

このように書き換えます。simplicity2-child は今回使っている子テーマのフォルダ名ですので、お使いの子テーマフォルダに書き換えてください。

このように書き換えても

まだ、色などは変わっていません。

サンプルを使えば簡単に色を変更できる

gcalendar-wrapper.php には、

 * Orange color scheme
 * Purple color scheme
 * Green color scheme

色サンプルが入っています。これを使うには、

例えば Green を試す場合は、
 

と、色指定の部分が /* */ で囲まれコメントアウトされている状態を
 

のようにコメントを外します。これでカレンダーを見ると、

緑系のカレンダーになりました。ほかの色を試すときはいったんはずした /* */ をもとに戻してから試してみてください。

サイトに合わせた色にカスタマイズする

今回カレンダーを入れたいサイトは茶色系の色合いなので、オリジナルの色にカスタマイズしたいと思います。

gcalendar-wrapper.php をテキストエディタで開くと、

このようになっています。ここで色を指定すると、色が変わるようです。

意味的には

こんな感じです。

サイトに合わせて

茶色系の色にしてみました。これでカレンダーを表示すると、

このように木目調のテーマに合った色合いになりました(^^)/

枠線の表示を変更してみる

枠線の表示を変更してみます。曜日の枠だけ暗い背景色を残し、カレンダー部分は罫線だけ、一番下のGoogleカレンダーの行は背景色をにしようと思います。

gcalendar-wrapper.php を開いて

89行目あたりのこの部分 /* misc interface */ の前に、指定したいCSSを追加します。

このCSSを追加しました。これで表示すると、

このように思った通りの表示になりました。Googleカレンダーで使われているcssのclassなどのcssをこのgcalendar-wrapper.phpで上書きすることで、Googleカレンダーのcssを上書きすることができます。

[Amazon sponsored link] css 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. […] Googleカレンダーの枠線の色や形をカスタマイズするgcalendar-wrapper.php […]

トップへ戻る