第2回：カレンダーとの連携をしてみよう カレンダーを作成

みんビズ制作講座：ショップに便利な機能紹介（全4回）
第2回：カレンダーとの連携をしてみよう
執筆：原 一宣。（株式会社Gazi工房）
「ショップに便利な機能の紹介」第2回目は、「カレンダーとの連携をしてみよう」です。
飲食店やショップなど、お店のホームページを運営する場合、カレンダーを利用し定休日や予約状況などが確認できれ
ば便利です。しかし、みんビズにはカレンダーを表示する機能はありません。そこでGoogle
カレンダーの登場です。みんビズにGoogle カレンダーを埋め込めば、簡単に表示することができます。
カレンダーを作成
Google カレンダーを利用するには、Google アカウントが必要となります。
まずはじめにGoogle アカウントを作成しましょう。
マイカレンダーを作成
みんビズで作成したホームページに表示するカレンダーを新しく作成します。
Google カレンダーの画面左側のメニュー「マイカレンダー」から［新しいカレンダーを作成］をクリックします。
「新しいカレンダーの作成」画面にて、「カレンダー名」、必要に応じて「説明」や「場所」を入力します。［このカレンダーを
一般公開する］にチェックを入れます。
［カレンダーを作成］ボタンをクリックします。
［このカレンダーを一般公開する］にチェックを入れたので、警告画面が表示されます。
［はい］をクリックします。
［このカレンダーを一般公開する］へのチェックを忘れると、ホームページに埋め込んでも表示されませんので、注意して
ください。
予定を入力する
作成したカレンダー名が「マイカレンダー」の下に表示されていることを確認します。
このカレンダーに予定を入力していきます。
ヒントGoogle カレンダーの活用法
ヒント1：定休日を入力する
Google カレンダーに予定を入力する際に、定休日など場合［終日］にチェックを入れます。
「繰り返し」にチェックを入れることで、予定の繰り返しの画面が表示され、1度の入力で複数の予定を設定することがで
きます。
ヒント2：予約状況を入力する
予約状況を入力し、外部向け表示を［予定あり］。
プライバシーを［限定公開］にします。すると、第三者がアクセスしたカレンダーには「予定あり」とだけ表示されるように
なります。予約したお客さまの名前や、詳細を公表したくない時などに便利です。
コードをみんビズに埋め込む
カレンダーの作成が終了したら、カレンダーの埋め込みコードを取得して、ページに埋め込みます。
カレンダーの設定
Google
カレンダーの画面左側メニュー「マイカレンダー」から、作成したカレンダー名の右隣の［▼］をクリックします。表示され
たメニューから［カレンダー設定］をクリックし、作成したカレンダーの詳細ページを開きます。
Google カレンダー埋め込み支援ツール
作成したカレンダーの詳細ページの中段、「このカレンダーを埋め込む」の中にあるリンク［色やサイズなどをカスタマイ
ズします］をクリック。別画面で「Google カレンダー埋め込み支援ツール」が開きます。
このツールを利用することで、プレビューを見ながら幅や高さなどのサイズ、カレンダーの表示設定などをカスタマイズす
ることができます。
ヒント
「カレンダーの設定」の「このカレンダーを埋め込む」に表示されている埋め込みコードをコピーし、みんビズの表示させ
たいページに貼り付けても表示させることは可能です。
しかし、この埋め込みコードでは、横幅が800ピクセルと幅が固定されていますので、テンプレートによって表示がはみ
出してしまいます。
埋め込みコードをコピー
「Google
カレンダー埋め込み支援ツール」で、埋め込みたいページにデザインやサイズを合わせてカレンダーをカスタマイズした
ら、画面右上［HTMLを更新する］ボタンをクリックします。
「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」に表示されている埋め込みコードをコピー
します。
埋め込みコードを貼り付け
みんビズにログインし、カレンダーを設置したいページに項目を追加し、［コンテンツメニュー］から［ウィジェット］をクリッ
クします。
<<新たなHTML項目>>の部分に、先ほど「Google
カレンダー埋め込み支援ツール」でコピーした埋め込みコードを貼り付けし、［保存］をクリックします。
確認
「プレビュー」または「ログアウト」して、設置したカレンダーが正しく表示されているか確認をし、完了です。
次回、第3回目は「Paypalの登録」では、ショップ機能に欠かせない決済サービスの登録方法について解説します。
次回のコラムを見る »
原 一宣。（はら・かずのり）
株式会社Gazi工房 代表取締役／JimdoExpert
http://gazikobo.co.jp/
1974年、福島県福島市生まれ。東北福祉大学社会福祉学部社会福祉学科卒業。山形県川西町在住。食品加
工会社、電子基板製造会社を経て、フリーランスでWeb制作活動を開始。
2007年に株式会社Gazi工房を設立。Webサイトの企画・設計、制作業務に従事。
イラストやキャラクターデザイン、地域づくりの企画・助言、パソコン教室なども行う。
元東北芸術工科大学 非常勤講師。クリエイティブユニット「gabs」メンバー。
CSS Nite in FUKUSHIMA実行委員。
著書『HTML5+CSS3の新しい教科書
基礎から覚える、深く理解できる。』（共著、エムディエヌコーポレーション）、『ああしたい、こう変えたいが手にと
るようにわかるCSS基礎』（同）。
Copyright 2017 はじめてＷＥＢ All Rights Reserved.
http://hajimeteweb.jp/