Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法

9f803b3532fa44bcb3001cac6734d898_m

ども、こんにちは。開発部のいろはです!

Googleカレンダーはiframeでサイトへ簡単に埋め込むことができますが、
通常のカラーは水色となっており、サイトに合わせて見た目の色を変更したいことがあると思います。

そんな時に便利なのが「gcalendar-wrapper.php」という
簡単にテキストカラーや背景色などを変更出来るスクリプトです。

img1
元々はこんなデザインですが・・・

img2
見た目をこんなデザインに変更することができちゃいます!!

・・・ということで、今回はこのgcalendar-wrapper.phpの使い方についてご紹介いたします!

gcalendar-wrapper.phpをダウンロードする

下記URLページの真ん中辺りにある「Download the wrapper script」をクリックします。

Easy Color Customization for Embedded Google Calendars

img3

—–2018.06.07追記—–
上記リンク先が変更されていたため、下記のURLよりダウンロードしてください
http://www.unitz.com/u-notez/2009/04/color-customization-for-embedded-google-calendars/

「このページは動作していません」とメッセージが表示される場合はVPN接続でアクセスします

※レンタルサーバーwpXではgcalendar-wrapper.phpは使用できないようです

使用方法

1:gcalendar-wrapper.phpの編集

ダウンロードしたファイルをを解凍し、
gcalendar-wrapper.phpをテキストエディタで開きます。

23〜30行目の”Set your color scheme below”を変更することで
カレンダーをお好みの色にチェンジすることができます!

img4

1. $calColorBgDark :背景色を変更します
2. $calColorTextOnDark :曜日の文字色を変更します
3. $calColorBgLight :各日にちの背景色を変更します
4. $calColorTextOnLight :各日にちの文字色を変更します
5. $calColorBgToday :当日の枠の色を変更します

img5

ファイルの編集後サーバーにgcalendar-wrapper.phpを設置します。
WordPressで使用する場合は下記ディレクトリに配置します。

2:Googleカレンダーの共有設定をする

Googleカレンダーの詳細ページに行き、
「このカレンダーを一般公開する」にチェックをします。

予定内容を公開せず、時間のみ表示したい場合は、
「予定の時間枠のみを一般に公開」を選択します。

チェックしたら保存をクリックします。

img4

3:埋め込みコードを取得する

Googleカレンダー埋め込み支援ツール(https://calendar.google.com/calendar/embedhelper)
などにアクセスして、埋め込みコードを取得します。

すると次のようなコードが表示されるかと思います。

この中の「src=”https://calender.google.com/calendar/embed?」 の部分を
「アップロードした場所へのパス/gcalendar-wrapper.php?」 に書き換えます。

WordPressの場合はこのようになります。

 

あとはこの埋め込みコードが入ったHTMLファイルをアップロードで完成です!
使ってみると雰囲気がガラッと変化するかもしれませんね!

お疲れ様でしたノシ

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

いろは

いろは

■部署
開発部

■スペック(Level、身長、座高、属性、資格)
水属性(95℃)

■入社年
2017年

■趣味
ごはん(つくる)、白と茶色模様の犬、ボウリング、8bit

■座右の銘
明けない夜はない

■ひとこと
スキレットの錆がとれない

関連記事

  1. 66a4ab51ed9ffc879ff0cf5064d744e7_m

    EFO(入力フォーム最適化)で成約率を上げる10のテクニック

  2. J18ZCO3IPA

    ビジネスバッグは最後のオシャレ

  3. 0831_01

    「広告」と「広報」の違い

  4. 223395ae7cd150697858d397130d03f0_m

    【WordPress】会員ページ作成のオススメプラグイン5選!

  5. 0I9A6577ISUMI_TP_V

    一人でも楽しめる!GWの過ごし方5選!!

  6. ひょうご就職サミット2018

    今年も開催!! 集まれ!未来の幹部候補! 合同企業説明会迫る!

  7. SUMMER SONIC 2016行ってきた

  8. img1

    MG研修 at スマイルヴィジョン

人気記事

  1. クリアボタン
  2. mv
  3. 9f803b3532fa44bcb3001cac6734d898_m
  4. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  5. 新入社員研修「伝える+伝わるセミナー」
  6. tukutte08
  7. タイ料理「天満3パクチー」
  8. 2017年スタートアップトレンド (アメリカ版)
  9. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK

最近の記事

  1. IMG_1502 (1) 会議室とイベントスペースの違い・活用方法
  2. sslservice 常時SSLサービス 2018年7月よりいよいよ警告が表示
  3. tsukutte11 【作ってみた】KeynoteとSkitchを使用した画像加工方法(macユーザー…
  4. gatag-00014199 中小企業でも増えている「自社独自の採用サイト」
  5. mv_ssl01 「常時SSL対策」セットアップサービスについて
2018年7月
« 6月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
PAGE TOP