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

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

3 Comments & Tracbacks

  • さいとう 2015-01-31 9:30 PM

    こんにちは。はじめまして。

    数年前の記事に、コメントすみません。。。

    この記事を参考にさせていただいて、wordpressの固定ページで、gcalendar-wrapper.phpを経由してgoogleカレンダーを読み込んでいます。

    ところが設置後、サイトの該当ページを開くと、googleから「フィッシングサイトの疑いがあります」という警告がでるようになりました。

    もし、考えられる原因、心当たりございましたら、ご教示いただけないでしょうか。
    このようなコメントで大変失礼かと思いましたが、なにとぞお知恵いただけますと幸いです。

    Reply

    • saori 2015-02-01 12:54 PM

      さいとう さま

      はじめてして!こんにちは。
      私もさいとうさまと同じように WordPress の個別ページでこの記事と同じように gcalendar-wrapper script を設定して Google カレンダーを表示しているサイトを管理していますが、今確認したところそのようなアラートは出ないので、スクリプト以外の問題でしょうか…??
      Webマスターツールはお使いですか?Webマスターツールの管理サイトにその警告が出るサイトを登録すると、不正なコードなどが見つかった場合には Google Webマスターツールの方へ具体的な不正コード部分のお知らせがもらえるのではないでしょうか?(セーフ ブラウジング – 透明性レポート – Google 「ウェブマスターへの通知」の項目参照)
      既にお試し済みであればすみません…。

      Reply

    • saori 2015-02-01 2:12 PM

      さいとう さま

      たびたびすみません。Google へフィッシング警告の誤りを送信するページを見つけたましたのでお知らせです。ご自身のサイトに問題が無さそうであればこちらのリンク先→「フィッシング警告の誤りを訂正」から報告すれば警告を解除してもらえるかもしれません…。あとはこちらのページ「ハッキングされたサイトに関するウェブマスター ヘルプ – Google」が参考になりそうだと思います。
      よろしくお願いします。

      Reply

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 レスポンシブ HTML5 WPセキュリティ API ナビゲーション サイドバー query_posts カスタムメニュー タクソノミー SVG データベース iPhoneアプリ back-to-top iTunes レビュー RSS 条件分岐 フリーソフト function コメント