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

当ページのリンクには広告が含まれています。
【簡単】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カレンダーを導入することにより、ホームページの利用法も幅が広がるかと思います。

        ぜひご活用ください!

        よかったらシェアしてね!
        • URLをコピーしました!
        • URLをコピーしました!

        コメント

        コメント一覧 (1件)

        【これを求めてた!】wixサイトにお知らせ欄を設置する方法をついに発見 へ返信する コメントをキャンセル

        CAPTCHA


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

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

        目次