Googleカレンダーの背景色などをカスタマイズできる gcalendar-wrapper script

Googleカレンダーをiframeでサイトに埋め込む事は簡単に行えますが、(ウェブサイトへの埋め込み – Google カレンダー ヘルプ)デフォルトのブルーの背景色がサイトデザインに合わなくて変更したい時があると思います。

そんな時に手軽に背景色やテキストカラーなどをカスタマイズする事ができるスクリプト gcalendar-wrapper script を見つけました。使い方や使用する際に私がつまづいた所についてです。

gcalendar-wrapper script

ダウンロード

下記のページのページ半ばにある「Download the wrapper script」よりファイルをダウンロードできます。

Easy Color Customization for Embedded Google Calendars | U-notez
ダウンロードリンク箇所

参考記事とダウンロード先のページにも使用方法が詳しく書いてあります。

使用方法

1. gcalendar-wrapper.php ファイルの編集

gcalendar-wrapper.php ファイルの編集箇所
ダウンロードした gcalendar-wrapper.php ファイルをテキストエディタで開き、23〜30行目の”Set your color scheme below”の所で背景色などを好きな色へ変更します。該当する箇所は以下のようになっています。

1. $calColorBgDark → 大枠の背景色
2. $calColorTextOnDark → カレンダー内一番上の曜日のテキストカラー
3. $calColorBgLight → 各日にちの部分の背景色
4. $calColorTextOnLight → 各日にちの部分のテキストカラー
5. $calColorBgToday → 当日の日にちのボックスカラー

デザイン適応できる箇所

ファイルの編集が終わったらサーバーの適当な場所へアップロードします。

2. 埋め込みコードの編集

Googleカレンダーの支援ツール等で(https://www.google.com/calendar/embedhelper)埋め込みコードを取得します。
以下のようなコードが吐き出されると思います。

<iframe src="http://www.google.com/calendar/embed?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

「src=”http://www.google.com/calendar/embed?」 の部分を 「アップロードした場所へのパス/gcalendar-wrapper.php?」 に書き換えます。以下のような感じになります。

<iframe src="アップロードした場所へのパス/gcalendar-wrapper.php?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

このコードを貼付けたHTMLファイルをアップロードして完了です。

WordPressで使用する時

WordPressの個別ページや個別記事などへGoogleカレンダーを貼付けてgcalendar-wrapperを適用する場合はファイルを絶対パスで指定します。

例)gcalendar-wrapper.php をテーマファイルにアップした場合は以下のように記入。

<iframe src="http://ドメイン.com/wp-content/themes/Themeファイル名/gcalendar-wrapper.php?
showTitle=0&amp;showTz=0&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=○○○○○○○○○○.calendar.google.com&amp;color=%23B1440E&amp;src=ja.japanese%23holiday%40group.v.calendar.google.com&amp;color=%232F6309&amp;ctz=Asia%2FTokyo"
 style=" border-width:0 " width="600" height="500" frameborder="0" scrolling="no"></iframe>

注意点

ダウンロード先にもありますが、Googleの仕様が変わると表示されなくなる恐れもあるので注意が必要です。

設定する際に私がつまづいた所ですが、最初上の通りに設定しても下の画像のように表示されてしまい、全然動きませんでした。
scriptが全然動いてない
おかしいと思って色々設定を変えたりしていた所、Googleカレンダー側の共有設定ができていないだけでした。すごく単純なミスですが、gcalendar-wrapper.phpを通さなければ表示されていたので気づくのに時間がかかってしまいました…
Googleカレンダー側の共有設定をする
カレンダーの”設定”から”このカレンダーを共有”タブを開き、”このカレンダーを一般公開する”にチェックを入れ”保存”をクリックすればOKです。

このファイルを使用すれば、ボタンの色を変更できたり色々カスタマイズできるようです。

Related Article

    関連する記事はありません。

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。

*



次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Categorys

Tags

CSS3 ダッシュボード jQueryプラグイン ヘッダー Macアプリ スライドショー 素材 コンテンツ コードサンプル Facebook php トラブル JavaScript CSS 引っ越し Shareボタン カテゴリー seo お知らせ Photoshop 投稿タイプ IE WP使い方 mac使い方 Parallels WPセキュリティ HTML5 API ナビゲーション サイドバー query_posts タクソノミー SVG レスポンシブ カスタムメニュー back-to-top iPhoneアプリ データベース iTunes レビュー RSS 条件分岐 フリーソフト function コメント