という疑問を解決します。
こんにちは、ロニー（@ronnie_2020)です。 これまでWixサイトを多数作り、 今回は 『WixサイトでGoogleカレンダーを表示する方法』 について解説していきます。
時々、制作代行、サイト修正などのお仕事を頂いています。
WixサイトへのGoogleカレンダー導入でお困りの方はぜひ最後までご覧ください。
Wixでgoogleカレンダーを使う
ホームぺージの活用方法について、
例えばスケジュールの連絡ツールとして利用する場合、
『予定は載せてあるので確認しておいてください』
なんてできたらわざわざメールをうつ必要もなく、
自分でも管理がしやすくなり、とても便利ですよね。
しかもスマホで操作できれば、
出先から簡単に更新することも可能
wixでGoogleカレンダーを導入する２つの方法
Wixサイトにgoogleカレンダーを導入するには『２つ』の方法があります。
- Wixアプリを使う
- HTML iframeを使う
以下の画像の左が『公式アプリ』、右が『HTML iframe』です。
どちらもメリット、デメリットがありますので、それぞれ説明します。
Wix公式アプリで導入
Wixにはカレンダーアプリがいくつかあり、
全てgoogleカレンダーと同期することができます。
有料、無料それぞれのアプリがありますが、
『せっかく無料で使えるgoogleカレンダーを、わざわざ有料アプリで表示するのはもったいない』
ということで無料で使えるWix公式アプリについて解説を致します。
Wix編集エディターのアプリでカレンダーを検索するといくつかのアプリが出てきます。
赤枠で囲んだアプリが無料で使えるWix公式アプリです。
設定からgoogleカレンダーと接続すれば、
スケジュールは全てリンクさせることができます。
Wixアプリ導入のメリット
・デザインを自由に変更でき、
サイトイメージに合わせたカレンダーにできる。
Wixアプリ導入のデメリット
同じ色で表示されてしまう。
月間スケジュールを一目で確認できない。
多くの予定を表示させたい方にとって、この２つのデメリットはかなり痛手です。
HTML iframe で導入
HTML iframeで導入する場合、
まずgoogleカレンダー側での設定が必要です。
設定からカレンダー名横のメニューを開き、
設定と共有をクリックします。
設定画面を下に進めるとアクセス権限の選択がありますので、
必ず『チェック』を入れてください。
チェックを入れたら更に下に進め、
カレンダーの統合のカスタマイズをクリックします。
カスタマイズではカレンダーをどのように表示するかを設定します
- 表示：必要な項目にチェックを入れます
- 高さ：表示サイズを設定します
- 背景色：ヘッダーの色を選択します
- 枠線：外枠を付けるか付けないかを選びます
- デフォルトのビュー：表示形式を切り替えます
- 週の開始日：左端の列を何曜日からにするか設定します
- 言語：表示言語を選びます
- タイムゾーン：予定を表示するタイムゾーンを選びます
- 表示するカレンダー：どのカレンダーを表示するか選び、表示したいものにチェックを入れます
- 表示されている埋め込みコードをコピーします
コードをコピーしたら、Wix編集エディターのHTML iframeに貼り付けて完成です。
HTML導入のメリット
・Googleカレンダーの表示のまま、
一目でわかる色分けでカレンダーを月分けられる
HTML導入のデメリット
・スマホ表示ではレスポンシブ対応になっていないためスクロールが必要
（レスポンシブにできるが、入力されている予定が小さくなり見えない）
レスポンシブ対応にしたい
レスポンシブ対応にしたい場合の方法も解説しておきます。
自動的にサイズを調整してくれることです。
Googleカレンダーの埋め込みコードの中に、
という表記があります。
これを、
その他のコンテンツでも同様に変更できますので、
覚えておくと便利です。
まとめ 【簡単】Wixでgoogleカレンダーを使いたい スマホ表示も解説します！
- WixでGoogleカレンダーを使う
- wixでGoogleカレンダーを導入する２つの方法
今回はWixサイトでgoogleカレンダーを使う２つの方法について解説しました。
WixアプリとHTML iframeどちらもメリット、デメリットがありますが、
私の場合、スマホ表示がどのようになるかを重視し、デザイン性よりも利便性でHTMLを選んでいます。
見る人がどう感じるかが大切だと思いますので、ご自身の使用用途に合わせて使い分けてください。
googleカレンダーを導入することにより、ホームページの利用法も幅が広がるかと思います。
ぜひご活用ください！
その他おすすめの記事
【超有料級】wixサイトにお知らせ欄を設置する方法を徹底解説！
【誰でも簡単】WixサイトにTwitterタイムラインを埋め込む