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

使用方法

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、身長、座高、属性、資格)
60℃くらいの水属性

■入社年
2017年

■趣味
8bitとカフェミュージック、白と茶色模様の犬、観葉植物、ナワバリを確保する試合(イカ)、ボウリング

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

■ひとこと
だんだん早くなる

関連記事

  1. img1

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

  2. FullSizeRender-9-1-1024x768

    コワーキングスペースで働く3つのメリット

  3. ブログサムネ

    WordPressの投稿ページにGoogle Mapsを埋め込む方法

  4. img_01

    西宮の魅力発信

  5. AB

    【作ってみた】googleスプレッドシートでチーム分けサイコロ

  6. 2017年スタートアップトレンド (アメリカ版)

    2017年スタートアップトレンド (アメリカ版)

  7. IMG_6697

    2017年新年のご挨拶。昨年を振りかえって

  8. NsNb7ndCeV3FkP61515754521_1515756417

    【WordPress】MW WP Formを使用したお問い合わせフォームの作成

人気記事

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

最近の記事

  1. NsNb7ndCeV3FkP61515754521_1515756417 【WordPress】MW WP Formを使用したお問い合わせフォームの作成
  2. db43c292d744f2ab9bcec5c9e2012172_m 【WordPress】プラグインの使い方(インストール・有効化・停止・削除)
  3. 66efd8d312710c14e1e7656010bc60bd_m 【WordPress】Contact Form 7を使ったお問い合わせフォームを…
  4. 223395ae7cd150697858d397130d03f0_m 【WordPress】会員ページ作成のオススメプラグイン5選!
  5. 9f803b3532fa44bcb3001cac6734d898_m 埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法
2018年1月
« 12月    
1234567
891011121314
15161718192021
22232425262728
293031  
PAGE TOP