簡単ヒント: Webnodeのホームページにカレンダーを入れる方法
2020年 8月 12日
見逃せないイベントや予定をホームページ上でチェック！ミーティングやワークショップへの招待状を作ったり、予約可能時間などを表示するなど色々な機能が使えるGoogleカレンダーをホームページに入れませんか？3ステップで簡単に入れられて、満足感、充実感ともまちがいなしです。
- イベント開催詳細
- 練習スケジュール
- 事務所、美容室、ホテル、レストラン、ショップの予約可能時間、定休日
- 医院・クリニックの診療時間、休診日 などをホームページ上で表示してみませんか？
Googleカレンダーの便利なところはなんといってもメンテナンスが要らないこと！自分のカレンダーを変更をすると自動的にサイト上のカレンダーも同期されて表示されます。そのため、ページの閲覧者やお客様は重要なタイミングを逃すことなく情報を見ることが可能です。
更に便利なのは、カレンダーの更新がある度に通知を受け取るかどうか閲覧者が選択できること。カレンダーのデザインもホームページやネットショップに合わせて変更できます。
無料オンラインカレンダー
カレンダーに取り掛かる前に、Googleのアカウントが必要になります。まだ終わっていない人はここからできます。アカウントを作成したらすぐに以下のページに行けます： www.google.com/calendar
カレンダーのページに行ったら、左上に「作成」ボタンがあります。ここをクリックするとカレンダーにイベントや予定を入れられ、時間や場所などのほか、Google Meetのミーティングの予定まで入れられます。
このボタンでカレンダーにいろいろな予定を入れられます
準備ができたら、カレンダーを以下の3ステップでホームページに埋め込みます：
- 右上にある歯車マークをクリック。出てくるメニューから設定を選択。
- 左メニューから自分が入れたいカレンダーを選び、「カレンダーの統合」をクリックします。これで自分のカレンダーに予定を入れたり、名前やデザインなどを編集できます。
- 変更が終わったら、カレンダーをサイトに入れます。一番簡単なのは<iframe…> で始まる埋め込みコードをコピーし、 Webnodeの編集画面で好きな場所にこのコードを入れる方法です。コードの入れ方はこちらの使い方ページで紹介しています。Googleカレンダーでは仕事用、趣味用、個人用などいろいろな目的で複数のカレンダーをもち統合もできます。
埋め込みコードをコピーする場所
埋め込みコードをコピーする場所
これで終わり! サイトにGoogleカレンダーが入りました！
スマホでもちゃんと表示したい！
上記の設定でGoogleカレンダーはPCのサイト上では表示されますが、スマホやタブレットでは切れて表示されることがあります。このような場合は、小さい画面でもちゃんと閲覧できるように設定できます。
1. まず先ほどコードを入れた場所のコードを以下のように修正します。（前後にコードが入る形になります）
- <center>
- <div class=”googleCalendar”>ここに<iframe…で始まるGoogleカレンダーのコードを挿入</div>
- </center>
Webnodeの編集画面で右上のメニューから「ページ」をクリック、カレンダーを挿入したページを選んでそのページの「SEO（検索エンジン最適化）ページ設定」の下のHTMLヘッダーコードをカスタマイズに以下のコードを入れます。そのままコピーしてみてください。
- <style>
- .googleCalendar{
- position: relative;
- padding-bottom: 75%;
- height: 0;
- overflow: hidden;
- }
- .googleCalendar iframe{
- position: absolute;
- top:0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- </style>
Webnodeの編集画面に貼り付けます。
カレンダーがスマホやタブレットで切れてしまうときの対策
最後に公開して画面がちゃんと表示されているかみてみてください。上手くいきましたでしょうか？ちょっとでも困ったらぜひサポートsupport@webnode.jpまでメールを！
おすすめカレンダー
Googleカレンダーではなくほかのカレンダーも同じように入れることができます。
英語版では Tockify, Calendly やそのほかもおしゃれでお勧めです。日本語版ではショップ向け、定休日の表示に便利なものなど、用途に合わせていろいろあります。
上記のやり方で埋め込みコードを使えば、外部のカウンターや動画、予約フォームなど好きなものをホームページ上に入れられますよ。
もうサイトにカレンダーは入れていますか？便利な使い方や助かっている機能などぜひシェアしてください。
ウェブサイトビルダーをうまくつかいこなすために、こちらの詳細ガイドをご活用ください。