みんビズ制作講座：ショップに便利な機能紹介（全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/
© Copyright 2024 Paperzz
