【簡単3分】StudioでGoogleカレンダーを埋め込む方法！

サイト上にGoogleカレンダーを反映できるようになれば、お店の予約状況などを可視化できて便利です。

ですが「難しそうなのでやっていない！」という方は多く、非常にもったいないです。

なぜならStudioでGoogleカレンダーを実装するのは超簡単だからです。

そこで今回は、StudioでGoogleカレンダーを埋め込む方法について、9枚の画像を用いて解説していきます。

ぜひ参考にしてみてください！

StudioでGoogleカレンダーを埋め込む方法

Googleカレンダーを埋め込む手順は、下記のとおりです。

9枚の画像を用いて、具体的に説明します。

①：Googleカレンダーのコードをコピーする

まずはパソコンでGoogleカレンダーを開きます。

Googleカレンダーを開けたら、右上にある設定アイコン→「設定」をクリックします。

表示したいカレンダーをクリックします。

「カレンダーの統合」をクリックします。

埋め込みコードをコピーします。

②：コードボックスを配置する

手順②以降は、すべてStudio側で操作していきます。

まず、Googleカレンダーを反映したいプロジェクトを開きます。

左メニュー欄にある右矢印ボタンをクリックします。

「基本」→「Blank」をクリックします。下記のように、グレー色のボックスが追加されるはずです。

③：コードを入力してGoogleカレンダーを反映させる

グレー色のボックスを選択した状態で、右パネルを開きます。そして「エディタを開く」をクリックします。

埋め込みコードに入力されている内容を、一度すべて削除します。

そして手順①でコピーしたコードを、埋め込みコードの欄に貼り付けます。

プレビューを確認して問題なければ、「保存」をクリックします。

Studioのサイト制作は「Terace」にお任せ！