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

 

という疑問を解決します。

 

 

 

WixサイトへのGoogleカレンダー導入でお困りの方はぜひ最後までご覧ください。

Wixでgoogleカレンダーを使う

 

ホームぺージの活用方法について、例えばスケジュールの連絡ツールとして利用する場合、

 

 

なんてできたらわざわざメールをうつ必要もなく、自分でも管理がしやすくなり、とても便利ですよね。

しかもスマホで操作できれば、出先から簡単に更新することも可能

 

wixでGoogleカレンダーを導入する２つの方法

 

Wixサイトにgoogleカレンダーを導入するには『２つ』の方法があります。

 

 

以下の画像の左が『公式アプリ』、右が『HTML　iframe』です。

 

 

どちらもメリット、デメリットがありますので、それぞれ説明します。

Wix公式アプリで導入

 

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

有料、無料それぞれのアプリがありますが、

 

『せっかく無料で使えるgoogleカレンダーを、わざわざ有料アプリで表示するのはもったいない』

 

ということで無料で使えるWix公式アプリについて解説を致します。

Wix編集エディターのアプリでカレンダーを検索するといくつかのアプリが出てきます。

 

 

赤枠で囲んだアプリが無料で使えるWix公式アプリです。

設定からgoogleカレンダーと接続すれば、スケジュールは全てリンクさせることができます。

 

 

Wixアプリ導入のメリット

 

デザインを自由に変更でき、サイトイメージに合わせたカレンダーにできる

 

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

 

Googleカレンダーで色分けしているのに、同じ色で表示されてしまう
スマホではモバイル専用表示となり、月間スケジュールを一目で確認できない

 

 

多くの予定を表示させたい方にとって、この２つのデメリットはかなり痛手です。

HTML　iframe で導入

 

HTML　iframeで導入する場合、まずgoogleカレンダー側での設定が必要です。

設定からカレンダー名横のメニューを開き、設定と共有をクリックします。

 

 

設定画面を下に進めるとアクセス権限の選択がありますので、必ず『チェック』を入れてください。

 

 

チェックを入れたら更に下に進め、カレンダーの統合のカスタマイズをクリックします。

 

カスタマイズではカレンダーをどのように表示するかを設定します

 

 

 

コードをコピーしたら、Wix編集エディターのHTML iframeに貼り付けて完成です。

 

 

HTML導入のメリット

 

Googleカレンダーの表示のまま、一目でわかる色分けでカレンダーを月分けられる

 

HTML導入のデメリット

 

スマホ表示ではレスポンシブ対応になっていないためスクロールが必要
（レスポンシブにできるが、入力されている予定が小さくなり見えない）

 

 

レスポンシブ対応にしたい

 

レスポンシブ対応にしたい場合の方法も解説しておきます。

 

 

 

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

 

 

という表記があります。これを、

 

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