GroovesterのWebsite、
掲載するタレントも増えてきた。
昨夜は大橋歩美さんの紹介ページをUPしたが、
大橋さんのようにライブ活動を活発に行なっているArtistの場合、
「スケジュール」掲載が重要になってくる。

そこで、
「今後、タレントページ等にGoogleカレンダーを組み込もう！」、
と、今朝思い立った次第。

よくアイドルグループがページに組み込んでいるように、
アクティブな活動するタレントほど便利。
なぜなら、
予定が決まった時、スグに入力できるし、
ファンも そのカレンダーを自分のカレンダーと同期することもデキ、
情報拡散もしやすいから。

今、私が計画しているのは、
タレントの中でGoogleカレンダーを使える人は、
情報拡散用にカレンダーを作っていただき、
そのカレンダーを私のサイトで共有。
タレントページには、そのタレントのみのスケジュールを掲載し、
TOPページ等には、全員のスケジュールを表示。

早速、TOPページには、
カレンダーを組み込んだ!!!
↑冒頭のPHOTO参照♪

今後、どんどんカレンダーを増やしていきたい。


ところで、、
カレンダーを組み込む際、
重要なPOINTは、
レスポンシブWEBデザイン対応にすること！

PCでは大きく、
スマホではスマホサイズで、
自動的に表示する仕様。

↑冒頭のPHOTOに掲載したように、
現在、GroovesterのWebsiteにて実装済♪

レスポンシブ対応にする方法は・・・

まず、


Googleカレンダーのページを開き、
↑「設定」をCLICK.

で、


↑左上の「カレンダー」タブをSELECTし、
自分が掲載したいカレンダーの、
「共有・設定編集」をCLICK.

で、


↑まずは、「このカレンダーを共有」タブから、
「このカレンダーを共有する」のCHECK BOXにCHECKを。

この共有設定をしておかないと、
Websiteに貼って共有できないので、
まずは、設定を。
（もし、自分のPrivateな予定を入れてる場合、
そのカレンダーとは別に、一般公開用のカレンダーを作ればイイ。
１つのアカウントで、多数のカレンダーを作れるので。）

保存できたら、
１つ左隣の「カレンダーの情報」タブをCLICKし、

↑「このカレンダーを埋め込む」のコーナーに記載のCODEを
自分のWebsiteにコピペ.

カスタマイズする場合、
「色やサイズなどをカスタマイズします」をCLICKして、、


↑LINK先のページで詳細設定.

POINTは、
左下に表示されてるカレンダー一覧の中で、
CHECK BOXにCHECKを入れたものを掲載デキるので、
選ぶ点と、
「デフォルト表示」の部分で、
月、週、予定リストからSELECTデキるので、
そこから選ぶ点。

スマホ表示した際に、
月ごとの表示だとわかりにくいので、
私は「予定リスト」を選んだ。

そして、
選びきったら、右上のHTMLを更新をして、
表示されたCODEをコピペする.


さてさて、
このCODEを自分のWebsiteに記載したら、
ここからがレスポンシブ対応の設定.

まず、HTML設定。
私は、下記DIVEでIFRAME CODEを囲んだ。


続いて、CSS設定。



↑こんな感じで記載。

以前にYOUTUBEのレスポンシブ設定した時と同様、
その都度の画面で100%表示になるようにする。
 
以上。

記載してみると、
なんだか長くなってしまったがw、
非常に重要なPOINT!!!

まあ、アーティストの皆さんは、
ご自身のカレンダーを作るところまでだけでイイので、
作ったら、教えていただければ、
Website設定は、私にて行いますので、ご安心を♪w