スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 ショップに便利な機能紹介 : 第2回 カレンダーとの連携をしてみよう

エキスパートコラム

みんビズ制作講座:ショップに便利な機能紹介(全4回)

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

執筆:原 一宣。(株式会社Gazi工房)

2012年12月5日更新

  • このエントリーをはてなブックマークに追加

閲覧数6,607views

このコラムをPDF形式でダウンロードする

「ショップに便利な機能の紹介」第2回目は、「カレンダーとの連携をしてみよう」です。

飲食店やショップなど、お店のホームページを運営する場合、カレンダーを利用し定休日や予約状況などが確認できれば便利です。しかし、みんビズにはカレンダーを表示する機能はありません。そこでGoogle カレンダーの登場です。みんビズにGoogle カレンダーを埋め込めば、簡単に表示することができます。

カレンダーを作成

Google カレンダーを利用するには、Google アカウントが必要となります。
まずはじめにGoogle アカウントを作成しましょう。

マイカレンダーを作成

みんビズで作成したホームページに表示するカレンダーを新しく作成します。
Google カレンダーの画面左側のメニュー「マイカレンダー」から[新しいカレンダーを作成]をクリックします。

「新しいカレンダーの作成」画面にて、「カレンダー名」、必要に応じて「説明」や「場所」を入力します。[このカレンダーを一般公開する]にチェックを入れます。
[カレンダーを作成]ボタンをクリックします。

[このカレンダーを一般公開する]にチェックを入れたので、警告画面が表示されます。
[はい]をクリックします。

[このカレンダーを一般公開する]へのチェックを忘れると、ホームページに埋め込んでも表示されませんので、注意してください。

予定を入力する

作成したカレンダー名が「マイカレンダー」の下に表示されていることを確認します。
このカレンダーに予定を入力していきます。

ヒントGoogle カレンダーの活用法

ヒント1:定休日を入力する

Google カレンダーに予定を入力する際に、定休日など場合[終日]にチェックを入れます。
「繰り返し」にチェックを入れることで、予定の繰り返しの画面が表示され、1度の入力で複数の予定を設定することができます。

ヒント2:予約状況を入力する

予約状況を入力し、外部向け表示を[予定あり]。
プライバシーを[限定公開]にします。すると、第三者がアクセスしたカレンダーには「予定あり」とだけ表示されるようになります。予約したお客さまの名前や、詳細を公表したくない時などに便利です。

コードをみんビズに埋め込む

カレンダーの作成が終了したら、カレンダーの埋め込みコードを取得して、ページに埋め込みます。

カレンダーの設定

Google カレンダーの画面左側メニュー「マイカレンダー」から、作成したカレンダー名の右隣の[▼]をクリックします。表示されたメニューから[カレンダー設定]をクリックし、作成したカレンダーの詳細ページを開きます。

Google カレンダー埋め込み支援ツール

作成したカレンダーの詳細ページの中段、「このカレンダーを埋め込む」の中にあるリンク[色やサイズなどをカスタマイズします]をクリック。別画面で「Google カレンダー埋め込み支援ツール」が開きます。
このツールを利用することで、プレビューを見ながら幅や高さなどのサイズ、カレンダーの表示設定などをカスタマイズすることができます。

ヒント

「カレンダーの設定」の「このカレンダーを埋め込む」に表示されている埋め込みコードをコピーし、みんビズの表示させたいページに貼り付けても表示させることは可能です。
しかし、この埋め込みコードでは、横幅が800ピクセルと幅が固定されていますので、テンプレートによって表示がはみ出してしまいます。

埋め込みコードをコピー

「Google カレンダー埋め込み支援ツール」で、埋め込みたいページにデザインやサイズを合わせてカレンダーをカスタマイズしたら、画面右上[HTMLを更新する]ボタンをクリックします。
「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」に表示されている埋め込みコードをコピーします。

埋め込みコードを貼り付け

みんビズにログインし、カレンダーを設置したいページに項目を追加し、[コンテンツメニュー]から[ウィジェット]をクリックします。

<<新たなHTML項目>>の部分に、先ほど「Google カレンダー埋め込み支援ツール」でコピーした埋め込みコードを貼り付けし、[保存]をクリックします。

確認

「プレビュー」または「ログアウト」して、設置したカレンダーが正しく表示されているか確認をし、完了です。

次回、第3回目は「Paypalの登録」では、ショップ機能に欠かせない決済サービスの登録方法について解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

原 一宣。(はら・かずのり)

原 一宣。(はら・かずのり)

株式会社Gazi工房 代表取締役/JimdoExpert
http://gazikobo.co.jp/

1974年、福島県福島市生まれ。東北福祉大学社会福祉学部社会福祉学科卒業。山形県川西町在住。食品加工会社、電子基板製造会社を経て、フリーランスでWeb制作活動を開始。
2007年に株式会社Gazi工房を設立。Webサイトの企画・設計、制作業務に従事。
イラストやキャラクターデザイン、地域づくりの企画・助言、パソコン教室なども行う。
元東北芸術工科大学 非常勤講師。クリエイティブユニット「gabs」メンバー。
CSS Nite in FUKUSHIMA実行委員。

著書『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

ああしたい、こう変えたいが手にとるようにわかるCSS基礎

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/6/18~2017/6/24]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!