AMS使い方マニュアル

簡単ホームページ作成ツール「AMS」のマニュアルサイト

ホーム ≫ ページ内にGoogleカレンダーを埋め込みたい ≫

[ケーススタディ]
ページ内にGoogleカレンダーを埋め込む

ケーススタディ

Googleカレンダーをページ内に埋め込みたい。

事前準備

GoogleカレンダーはGoogleアカウント(Gmail)をお持ちであれば、どなたでも利用することが可能です。お持ちでない方は外部サイトとなりますが、こちらから作成することができます。

参考サイト:Google アカウントの作成
https://support.google.com/accounts/answer/27441?hl=ja
※外部サイトになりますのでサポート対象外となりますので、その旨、何卒、ご了承ください。

1.AMSにログインし、スクリプト使用許諾を確認する

スクリプト使用許諾にチェックが入っていないと、Googleカレンダーを埋め込むことができませんので、ご確認のほどお願いいたします。

※制作代行をご利用のお客様は、チェックは入っています。

確認方法

サイト設定ガイド有り
AMSにログインし、ページ左上の「設定」の歯車から「サイト設定」をクリックします。
スクリプト許諾ガイド有り
少しスクロースさせて、「スクリプトタグの設定(上級者向け)」の「 スクリプト使用許諾 」欄にある「スクリプト使用許諾」が同意済みか確認します。

チェックが入っていないようであれば「チェック」を入れて、一番下の「サイト設定を更新」をクリックし、右上の「公開」ボタンをクリックしてください。
 

2.Googleカレンダーにアクセスする

1カレンダー

Googleカレンダーにアクセスし、「歯車のアイコン」をクリックします。

3.カレンダーの設定をする

2設定ボタンガイド有り

設定」をクリックします。

3アカウントをクリックガイド有り
「カレンダーに使用したいアカウント」をクリックします。

予定のアクセス権限をクリックします。

公開範囲の設定をします。
一般公開して誰でも利用できるようにするにチェックします。

これが一般公開して誰でも見れるようにするに設定されていないとせっかくカレンダーをページ内に埋め込んでも閲覧者は権限がないため予定を閲覧することができません。

予定の表示も「時間枠のみ、詳細は非表示」にしておきます。
閲覧者に予定の詳細まで見られてしまうことになります。 この設定を省くとカレンダーの詳細にお客様の情報を入れていた場合その内容も見られてしまうので要注意です。

4カレンダーの統合ガイド有り
カレンダーの統合」をクリックします。
5カスタマイズガイド有り
カスタマイズ」をクリックします。
6設定をカスタマイズガイド有り

デザイン」や「表示」を変更したい場合この画面でカスタマイズできます。

・「カレンダーのタイトル」を入力すると、カレンダーの左上に表示されるタイトルが変更できます。
(何も入力しない場合は、Googleアカウント名、Gmailアドレスなどの表示になります)

・カレンダーが複数ある場合は、「表示するカレンダー」で不要なカレンダーのチェックをはずします。
(オープンにしたくないカレンダーは忘れずにチェックをはずしましょう)

4.埋め込みコードをコピーする

7埋め込みコードをコピーガイド有り_
赤枠のボタンをクリックし埋め込みコードをコピーします。

ここまでで「Googleカレンダー」のURLを取得することができましたので、
AMSにログインして記事に埋め込みます。

4.記事を追加する

ページ記事追加01_コピー

AMSの編集画面にログインし、Googleカレンダーを埋め込みたいページを開きます。
記事の一番上にカーソルを持っていき「記事一覧を編集」とポップアップが表示される状態で背景が黄緑色になったらクリックします。

8記事追加ガイド有り

記事を追加」ボタンをクリックします。

Youtube動画を埋め込む09

本文」に記載のある「ソース」ボタンをクリックします。

5.GoogleMap埋め込みコードを入力する

Youtube動画を埋め込む10

テキストエリア内をクリックします。

iframeを埋め込む

続けて、テキストエリア内を右クリックし、表示されるメニューから「貼り付け」を選択します。
もしくは、「Ctrl+V」で貼り付けます。

9ソースを貼り付けるガイド有り
Googleカレンダーの埋め込みコードが記載されました。

6.埋め込みコードの値を編集する

10widthを変えるガイド有り
width(カレンダーの横幅)の初期値は800ですが、これを100%に変更します。
height(カレンダーの縦幅)の初期値は600ですが、これを450に変更します。
11100%に変わったガイド有り

widthを「100%」に、heightを「450」に変更したら、埋め込み作業は完了です。
編集画面左下の「登録」ボタンを押します。

続けて、記事一覧編集画面の左下にある「登録」ボタンを押します。

7.編集画面で確認する

12オブジェクトスペース

編集画面を確認すると、「オブジェクトスペース」と表示されます。
編集画面上にカレンダーは表示されませんので、確認は右上の「プレビュー」をクリックしてご覧ください

8.プレビューで確認する

12カレンダー

画面右上の「プレビュー」ボタンを押します。

「Googleカレンダー」を埋め込んだページにカレンダーが表示されていれば埋め込み完了です。

編集画面27_コピー

最後に「公開」ボタンをクリックすると、ホームページが更新されます。

otukaresamadesita

こちらのページも見られています