【簡単】WixでGoogleカレンダーを使いたい スマホ表示も解説します!

当ページのリンクには広告が含まれています。

WixでGoogleカレンダーを使いたいんだけどどうやるの?

こんな疑問におこたえしていきます。

こんにちはろにぃです。サイト制作を始めてから10年

・月収100万円のサイトを作成、運営
・クライアントのサイトの作成、編集、管理
・SEO相談

などの経験を活かして、サイト制作やSEOについて情報発信をしております。

サイトにGoogleカレンダーを表示できると様々な用途があり、便利になりますすよね。

だけど共有のしかたが意外と面倒でつまづく人は多いはず。

そこで今回はGoogleカレンダーの使い方について、Wix歴10年以上のぼくが詳しく解説します。

本記事をご覧いただくことで、あなたのWixサイトにGoogleカレンダーが導入でき、より実用的なサイトに変身します。

ぜひ最後までご覧ください!

目次

Wixサイトのgoogleカレンダー活用法

あなたのWixサイトに営業カレンダーを表示させたいとき、出先から更新しようと思ったら、PCを開き、Wixエディターで更新しなければなりません。

しかし、Googleカレンダーを導入しておけば、移動中にスマホでちょこちょこっと更新して完了。

確認、更新が非常にラクになるので、空いた時間で他の情報発信に時間を費やして、よりよいサイト作りに注力できるようになるんです。

wixでGoogleカレンダーの導入方法

WixサイトにGoogleカレンダーを導入する際、以下の2パターンがあります。

  • Wixアプリを使う
  • HTMLコードを埋め込む

順に解説します。

導入方法1:Wixアプリを使う方法

Wixにはカレンダーアプリがいくつかあり、Googleカレンダーと同期できます。

せっかく無料で使えるGoogleカレンダーをわざわざ有料で使うのは勿体ない!ということで無料の公式アプリを紹介します。

  1. Wixアプリでカレンダーを検索
  2. Googleイベントカレンダーを追加
  3. 設定からGoogleアカウントと接続

順に画像を見ながら解説していきましょう。

1.Wixエディターのメニューからアプリ>App Market>カレンダーを検索>Googleイベントカレンダーを選択する

2.Googleイベントカレンダーを追加する

3.設定からGoogleカレンダーと接続

スケジュールは全てリンク可能なので、表示させたいカレンダーを選択してください。

Wixアプリ導入のメリット

デザイン変更の幅が広く、サイトイメージに合わせたカレンダーを表示できる

Wixアプリ導入のデメリット

モバイル表示で一覧では詳細がわからない

自分のスケジュール管理なら全く問題ない。しかし、訪問者に営業時間のご案内などをしようと思ったら不親切な表示になってしまうんですよね。

導入方法2:HTMLコードを埋め込む

HTMLコードを入力してGoogleカレンダーを挿入する場合の手順は以下の通り

  1. Googleカレンダーを開き、表示させたいカレンダーの設定と共有をクリックする
  2. 一般公開する
  3. カスタマイズを行う
  4. WixにHTML埋め込みを追加
  5. コードを入力
  6. 表示デザインを整える

1.Googleカレンダーを開き、表示させたいカレンダーの設定と共有をクリックする

2.予定のアクセス権限の「一般公開して誰でも利用できるようにする」にチェックを入れる

3.カスタマイズする

  •  表示:必要な項目にチェックを入れます
  •  幅・高さ:表示サイズを設定します
  •  背景色:ヘッダーの色を選択します
  •  枠線:外枠を付けるか付けないかを選びます
  •  デフォルトのビュー:表示形式を切り替えます
  •  週の開始日:左端の列を何曜日からにするか設定します
  •  言語:表示言語を選びます
  •  タイムゾーン:予定を表示するタイムゾーンを選びます
  •  表示するカレンダー:どのカレンダーを表示するか選び、表示したいものにチェックを入れます

表示設定をしたらCalendar上部にある埋め込みコードをコピーします。

4.WixにHTML埋め込みを追加

5.コードを入力

コード入力欄にペーストして更新をクリックします。

5.表示デザインを整える

以上で完了です。

HTMLコード入力のメリット

スマホ表示でも見慣れたGoogleカレンダー表示のまま使用できる

HTMLコード入力のデメリット

スマホ表示ではレスポンシブ対応になっていないためスクロールが必要

レスポンシブってなに?

閲覧する端末のサイズによって、自動的にサイズを調整してくれること

どうやって設定するの?

Googleカレンダーの埋め込みコードの中に、

width=”○○○” height=”○○○”(〇は数字)

という表記があるのでこれを、

width=”100%” height=”100%”

に変更します。

ただしGoogleカレンダーで使用すると登録してある予定の表示が小さくなりすぎ、よくわからなくなってしまうのでおすすめはしません。

カレンダーではあまり使えませんが、その他のコンテンツでも同様に変更できますので、覚えておくと便利です。

まとめ

今回はWixサイトでgoogleカレンダーを使う2つの方法について解説しました。

WixアプリとHTML iframeどちらもメリット、デメリットがありますが、私の場合、スマホ表示がどのようになるかを重視し、デザイン性よりも利便性でHTMLを選んでいます。

見る人がどう感じるかが大切だと思いますので、ご自身の使用用途に合わせて使い分けてください。

googleカレンダーを導入することにより、ホームページの利用法も幅が広がるかと思います。

ぜひご活用ください!

その他Wixサイトがより便利に変身させるテクニックはこちら↓

【デモ動画有り】wixサイトにお知らせ欄を設置する方法を徹底解説

【悪用厳禁】Wixサイトのテキストを綺麗に整える方法

【完全版】WixでInstagramを埋め込む方法!設置後の分析データも公開

【誰でも簡単】WixサイトにX(旧Twitter)タイムラインを埋め込む方法

ホームページサポートサービス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次