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

この記事は約7分で読めます。

「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”]

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

インターネット Googleカレンダー
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

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

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。