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

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

Sponsorlink

そんな時に手軽に背景色やテキストカラーなどをカスタマイズする事ができるスクリプト 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

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

10 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

  • hiromi 2015-03-30 4:07 PM

    こんにちは。初心者ながらWordPressでウェブサイトを運営しています。
    Googleカレンダーを表示させるプラグインを色々と試行錯誤しましたが知識不足ゆえなかなか上手くいかずプラグイン使用を断念したところです。Google提供のカスタムだけでは不満でしたがこちらを教えて頂いて希望が持てました。まだ挑戦していないのですが、近日中にぜひやってみます。取り急ぎご挨拶まで。

    Reply

    • saori 2015-04-01 10:14 PM

      hiromi さま

      お返事遅くなりすみません。
      上手く実装できるとよいですね。この記事がお役にたてば光栄です。

      Reply

  • maco 2015-05-13 10:15 AM

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

    私もこの記事を参考にさせていただいていますが、
    wordpressに表示できません。

    <iframe src="http://●●●.com/wp-content/themes/●●●/gcalendar-wrapper.php?

    としています。

    ●のところはちゃんといれています。

    なにがおかしいのでしょうか??

    他に設定するところはありますか?

    アドバイスお願いいたします。

    Reply

    • saori 2015-05-13 2:05 PM

      maco さま

      初めまして。こんにちは。
      うーん、gcalendar-wrapper.php ファイルへのパスが間違っているとかはないですか?特に他に設定などはなかったと思いますが…。

      Reply

      • maco 2015-05-13 3:29 PM

        saori様

        ありがとうございます。

        正しいパスを確認するためにはどうしたらいいのですか??

        初心者で手探りの為行き詰まっています。
        申し訳ありません。

        Reply

  • maco 2015-05-14 7:10 AM

    できました!
    やっとできて感動しました!

    ありがとうございました!

    Reply

    • saori 2015-05-14 12:37 PM

      maco さま

      ご報告ありがとうございます。できてよかったです!つまづいたあとにできるととても嬉しいですよね…!

      Reply

Leave a Comment

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

*



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

Categorys

Tags

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