Koba Log

Read Article

googleカレンダーの覚書

googleカレンダーの覚書

ブログをされている方でしたら以下のようにgoogleカレンダーを表示したいと思われる方も多いとおもいます。

上記のカレンダーは何も設定しないで、カレンダーの設定より表示しています。

通常、お店のお休みだけをお知らせするならこのままでも良いのですがここに複数人いるstaffのお休みを載せたり、お店のイベントをのせたりしたい場合に良い方法がwebで見つからなかったので、僕が試した方法を覚書でのせますので、もしそういった情報をお探しの方が参考になれば幸いです。

普通のgoogleカレンダー使いこなし

通常は【ブログ 表示 googleカレンダー】と検索すればgoogleカレンダーをブログに掲載する方法や表示サイズの変更方法も見つけられると思います。

複数のカレンダーを一つのカレンダーにまとめて表示したい

一つのgoogleカレンダー内に複数のカレンダーを表示したいので、上記の検索キーワードに【複数】を追加して検索してみます。【ブログ 表示 googleカレンダー 複数】

すると、アカウント違いのカレンダーを同じカレンダーに集約して表示する方法は色々と出てくるのですが、これはアカウントが違うカレンダーをまとめて表示する方法なので、表示したいスタッフや種類ごとにgoogleアカウントがあって個別に管理がしたい場合は良いと思うのですが、サイト運営者がカレンダーの管理を行うのに人数分のアカウントを取るのもちょっとメンドウな気がしてしまいます。

複数のマイカレンダーを一つのカレンダーにまとめたい

自分のアカウント内でカレンダーを制作して色分けした表示は、このあたりの検索結果にのってると思いますが、こうして増やしたマイカレンダーを一つのgoogleカレンダーに集約してブログに表示する方法をここでは覚書します。

正しい方法かどうかは定かではないですが、他に見つからなかったのでこうしてみました。

参考までに(^-^)/

1.まずは、個々のマイカレンダーについているIDを確認し、記録しておく

したの画像を参考にマイカレンダーを貼り付ける時に使用するアドレスを、必要カレンダー分用意します

 

1

 

2

 

2枚目の画像の赤枠の部分にカレンダーを貼り付けるための情報が記載されていますのでコピーします

記録にはメモ帳などよりもテキストファイルを編集できるテキストエディターが便利です。

おすすめはmlというテキストエディターが便利です

コピーしたアドレスを順番に並べます。

3

 

 

※表示する際mlの場合は[ドキュメント]→[行の折り返し]→[折り返しあり(ウインドウ幅)]に設定すると見やすくなります

内容はほとんど同じなんですが赤枠の部分だけ違うと思います。

たぶんここがマイカレンダーのID部分だと思います。

2.次にカレンダーで表示する土台を作ります

以下の文字列を参考に土台を作ります

<iframe style=”border-width: 0;” frameborder=”0″ height=”400″ scrolling=”no” src=”https://www.google.com/calendar/b/0/embed?title=%E5%AE%9A%E4%BC%91%E6%97%A5%EF%BC%86%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC&amp;showNav=0&amp;showCalendars=0&amp;showTz=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=ここにsrc=から%40group前までの文字列を入れる%40group.calendar.google.com&amp;color=%23BE6D00&amp;src=ここにsrc=から%40gmail.com前までの文字列を入れる%40gmail.com&amp;color=%23853104&amp;ctz=Asia%2FTokyo” width=”90%”></iframe>

はじめの青い文字列はカレンダーのタイトルです。ここでは[定休日&イベントカレンダー]となっています。

このタイトル部分や、カレンダーの大きさなどを変更したい場合は、前の画像2枚目のマイカレンダーのIDを含むアドレスが表示されたウインドウの上に[色やサイズなどを変更します]というリンクがあるのでそこから変更し、上の文字列を参考に必要な部分を弄ってください。

赤い時の○○ここにsrc=から・・・の部分は各ID部分が入ります。上の参考文字列には2種類のIDが貼れらています。

IDにgoogle.comを含まない場合は以下のように切り抜きます。

赤い文字だけ変えても使えるようにしてみました。

src=ここにsrc=から%40group前までの文字列を入れる%40group.calendar.google.com&amp;color=%23BE6D00&amp;

IDの赤枠の部分がgoogle.comを含む場合はこちらを参考に切り抜きます

src=ここにsrc=から%40gmail.com前までの文字列を入れる%40gmail.com&amp;color=%23853104&amp;です

colorに続くピンクの部分は表示する際の色だと思います。

要はsrc=から、color設定と最後のコロンまで&amp;color=%23853104&amp;の間を切り抜いてつなげればいくつでも表示できるようです

これまでを踏まえて完成形

以下のカレンダーは、5つのマイカレンダーを表示しています

  • 定休日
  • イベント
  • 小林 定休日
  • 浅香 定休日
  • 理容 定休日

もっと簡単にできたら便利なんですけどね(;´Д`)

以上、マイカレンダーの表示方法でした。

Return Top