ホーム >  Blog > 無料で出来るホームページにイベントカレンダーを表示。
2011年06月11日

無料で出来るホームページにイベントカレンダーを表示。

こんにちは。WEBクリエイター CUBES です。

今回はWeb屋らしい記事を書かせていただきます。
内容は「ホームページにイベントやスケジュールを簡単に掲載できるカレンダー」

です。

サロンさんのアメブロを拝見していると、「00月00日はご予約できます。」「00月00日の00時に空きができました。」

と表示されている方が意外と多かったことにびっくりしました。

オフィシャルホームページで告知せずにアメブロで告知するには色々な理由があると思います。
1 オフィシャルより、アメブロを見てくれる人のほうが多い。


2 オフィシャルホームページは業者に頼まないといけない。


3 タイムリーに反映してもらえない。


4 アメブロだったら自分で簡単に更新できるから。


多分、こんなことかなと思います。
オフィシャルホームページをお持ちなのに、更新・活用されなければ、ますますホームページを見てくれる方が少なくなりますので、今回はご自分で無料で簡単にイベントカレンダーが更新できる方法を公開いたします。

例で、CUBESのお客様「おおにし動物クリニックさま」ホームページにて、ご説明させていただくと。

■ホームページにイベントカレンダーが表示されています。

大阪の太っちょWebクリエイターCUBES-おおにし動物クリニックイベントカレンダー

見えにくいので拡大すると、こんな感じでイベントカレンダーが表示され、
休診情報やパピー教室などの情報が表示さできます。
※サロンさんの場合だとアキのある時間を表示したり、キャンペーン日やイレギュラーな休暇などを事前にカレンダーで表示することが出来ます。

大阪の太っちょWebクリエイターCUBES-おおにし動物クリニックイベントカレンダー

そしてこのカレンダーは、イベントをクリックすることで、
イベントの詳細情報が表示できます。
しかもお客さんがGoogleカレンダを使っている場合、お客さんのスケジュールにカレンダー情報を取り込んで貰うことも出来ます。
※最近はやりのアンドロイド携帯(スマートフォン)は標準でGoogleカレンダーが入っています。

大阪の太っちょWebクリエイターCUBES-おおにし動物クリニックイベントカレンダー

■カレンダー更新方法

大阪の太っちょWebクリエイターCUBES-Googleカレンダー

ホームページに表示しているカレンダーはGoogleカレンダーなので、
Googleカレンダーを更新すれば、自動でホームページのカレンダーも更新されます。
わざわざホームページ屋さんへ依頼すること無く、簡単にカレンダーに表示するイベントの追加・削除・変更ができます。

パソコンからの場合は、下記写真のようにGoogleカレンダーをブラウザー経由で新規イベントを作るだけ。

大阪の太っちょWebクリエイターCUBES-Googleカレンダー更新

iPhoneやAndroidなどのスマートフォンはGoogleカレンダーとリンクできますので、
スマートフォンのカレンダーにイベントを入力すれば、自動でホームページに表示しているカレンダーが更新されます。

■イベントカレンダーを作るには(ご用意頂く物)
1 自社ホームページ×1
2 Googleアカウント×1
3 ホームページを更新する技術が少々もしくはWeb屋さんへの作業費用。

■Googleカレンダー公開方法
まずはGoogleカレンダーページの左側に表示されている「マイカレンダー」の設定をクリックします。

大阪の太っちょWebクリエイターCUBES-Googleカレンダー

画面が切り替わりますので、公開したいカレンダーの「共有:設定を編集」をクリック

大阪の太っちょWebクリエイターCUBES-Googleカレン
ダー更新

またまた、画面が切り替わりますので、左上のタブ「カレンダーの情報」をクリック。

大阪の太っちょWebクリエイターCUBES-Googleカレンダー

またまた画面が切り替わりますので、チュルチュルチュル~と画面下部までスライドすると
カレンダー絵面横の「色やサイズなどをカスタマイズします」をクリック。

大阪の太っちょWebクリエイターCUBES-Googleカレンダー

今度は新しいウィンドウが開きますので、左側の設定枠から表示したい大きさ、表示したいカレンダー情報をチョコチョコチョコっと設定してください。

大阪の太っちょWebクリエイターCUBES-Googleカレンダー

全ての設定が終われば、ウィンドウ上部へチュルチュルチュル~ともどると、
「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」の横に「HTMLを更新する」ボタンがあるので、1クリック!!
その後、「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」下の枠に表示されているHTMLを、ご自分のホームページへコピペしてください。
※コピペする場所はカレンダーを表示したい箇所です。
※アメーバブログへはコピペ出来ません。

大阪の太っちょWebクリエイターCUBES-Googleカレンダー


と、こんな感じでオフィシャルホームページにイベントカレンダーと埋め込むことが出来ます。
カレンダーの更新は、アメブロと同じようにブラウザーから簡単にできますので、おすすめですよ。

page-top