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サイトに貼り付けました。

そのときのコードは

 <iframe src="https://calendar.google.com/calendar/embed?

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

<iframe src="http://WebサイトのURL/wp-content/themes/simplicity2-child/gcalendar-wrapper.php?

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

このように書き換えても

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

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

gcalendar-wrapper.php　には、

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

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

例えば　Green　を試す場合は、
 

/**
 * Green color scheme
 */
/*
$calColorBgDark      = '#336633';
$calColorTextOnDark  = '#ffffff';
$calColorBgLight     = '#ace0ac';
$calColorTextOnLight = '#003300';
$calColorBgToday     = '#ffe5ac';
*/

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

/**
 * Green color scheme
 */
$calColorBgDark      = '#336633';
$calColorTextOnDark  = '#ffffff';
$calColorBgLight     = '#ace0ac';
$calColorTextOnLight = '#003300';
$calColorBgToday     = '#ffe5ac';

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

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

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

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

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

/**
 * Set your color scheme below
 */
$calColorBgDark      = '#c3d9ff';    // dark background color
$calColorTextOnDark  = '#000000';    // text appearing on top of dark bg color
$calColorBgLight     = '#e8eef7';    // light background color
$calColorTextOnLight = '#000000';    // text appearing on top of light bg color
$calColorBgToday     = '#ffffcc';    // background color for "today" box

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

意味的には

$calColorBgDark      = '#c3d9ff';    // 暗い背景色
$calColorTextOnDark  = '#000000';    // 暗い背景色の上のテキストカラー
$calColorBgLight     = '#e8eef7';    // 明るい背景色
$calColorTextOnLight = '#000000';    // 明るい背景色の上の文字の色
$calColorBgToday     = '#ffffcc';    // 今日のセルの背景色

こんな感じです。

サイトに合わせて

$calColorBgDark      = '#663e1e';    // dark background color
$calColorTextOnDark  = '#ffffff';    // text appearing on top of dark bg color
$calColorBgLight     = '#d69f74';    // light background color
$calColorTextOnLight = '#663e1e';    // text appearing on top of light bg color
$calColorBgToday     = '#f0e68c';    // background color for "today" box

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

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

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

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

gcalendar-wrapper.php　を開いて

$calCustomStyle =<<<EOT

/* misc interface */
.cc-titlebar {

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

table.st-bg-table {
    border-bottom:1px solid {$calColorBgDark} !important;
}
table#footer1.footer {
    border-right:1px solid #ffffff !important;
    background-color: #ffffff !important;
}
.view-container-border {
    padding: 8px 0 0 0;
}
.view-container {
    padding: 0 1px 0 0;
}

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

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

[amazon_searchlink search=”css”]