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

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

Wixでgoogleカレンダーを使いたいんだけどどうやるの?
ころにぃ
ころにぃ

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

 

本記事の内容
 WixでGoogleカレンダーを使う

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

 

ろにぃ
ろにぃ

こんにちは、ロニー(@ronnie_2020)です。

これまでWixサイトを多数作り、
時々、制作代行、サイト修正などのお仕事を頂いています。

今回は 『WixサイトでGoogleカレンダーを表示する方法』 について解説していきます。

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


Wixでgoogleカレンダーを使う

Wixでgoogleカレンダーを使う

 

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

 

『予定は載せてあるので確認しておいてください』

 

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

 

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

 

googleカレンダーをWixサイトに導入することで、上記のことができるようになります。


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

2つの導入方法で比較

 

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

 

  •  Wixアプリを使う
  •  HTML iframeを使う

 

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

 

googleカレンダー比較

 

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


Wix公式アプリで導入

Wix公式アプリで導入

 

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

 

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

 

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

 

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

 

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

 

Wix公式アプリで導入2

 

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

 

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

 

Wix公式アプリで導入3

 

 Wixアプリ導入のメリット

 

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

 

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

 

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

 

Wix公式アプリで導入4

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


HTML iframe で導入

 HTML iframe で導入

 

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

 

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

 

 HTML iframe で導入2

 

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

 

 HTML iframe で導入3

 

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

googleカレンダー html

 

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

 

html

 

  1.  表示:必要な項目にチェックを入れます
  2.  高さ:表示サイズを設定します
  3.  背景色:ヘッダーの色を選択します
  4.  枠線:外枠を付けるか付けないかを選びます
  5.  デフォルトのビュー:表示形式を切り替えます
  6.  週の開始日:左端の列を何曜日からにするか設定します
  7.  言語:表示言語を選びます
  8.  タイムゾーン:予定を表示するタイムゾーンを選びます
  9.  表示するカレンダー:どのカレンダーを表示するか選び、表示したいものにチェックを入れます
  10.  表示されている埋め込みコードをコピーします

 

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

 

 HTML iframe で導入6

 

 HTML導入のメリット

 

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

 

HTML導入のデメリット

 

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

HTML導入のデメリット

 

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

 

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

 

レスポンシブとは閲覧する端末のサイズによって、
自動的にサイズを調整してくれることです。

 

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

 

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

 

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

 

width=”100%” height=”100%”
 
に変更することでレスポンシブ対応になります。
 
カレンダーではあまり使えませんが、
その他のコンテンツでも同様に変更できますので、
覚えておくと便利です。


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

まとめ

 

  •  WixでGoogleカレンダーを使う
  •  wixでGoogleカレンダーを導入する2つの方法

 

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

 

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

 

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

 

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

 

 その他おすすめの記事

 

【超有料級】wixサイトにお知らせ欄を設置する方法を徹底解説!

【誰でも簡単】WixサイトにTwitterタイムラインを埋め込む

【簡単】Wixで誰でもできるホームページ作成

【簡単】Wixでgoogleカレンダーを使いたい スマホ表示も解説します!
最新情報をチェックしよう!