GoogleカレンダーのWebページ埋め込み方法!デザインのカスタマイズも解説

スケジュールや講座予定、お店の営業日などを公開したい時は、Googleカレンダーを活用しましょう。Googleカレンダーなら簡単に埋め込みができ、予定の管理から公開までを一括して行えます。
埋め込み方法・レスポンシブ対応・デザイン変更方法など、解説します。

目次

  1. 1Googleカレンダーの埋め込み前の準備
  2. 公開用カレンダーを作成
  3. 2GoogleカレンダーのWebページ埋め込み方法
  4. 埋め込み手順
  5. 3Googleカレンダーの埋め込みをカスタマイズ〜大きさ〜
  6. Googleカレンダーの大きさを変更する方法
  7. 4Googleカレンダーの埋め込みをカスタマイズ〜レシポンシブ対応〜
  8. 埋め込みコードを編集してレスポンシブ対応する
  9. 5Googleカレンダーの埋め込みをカスタマイズ〜デザイン〜
  10. 埋め込みコードを編集してデザインを変更する
  11. 6Googleカレンダーの埋め込みで訪問者に予定を保存してもらう方法
  12. 訪問者のカレンダーに予定を保存できるようにする設定方法
  13. 合わせて読みたい!アプリに関する記事一覧

Googleカレンダーの埋め込み前の準備

GoogleカレンダーをWebページに埋め込む前に、まずは埋め込むカレンダーを作成しましょう。作成したGoogleカレンダーは一般公開するように設定します。

公開用カレンダーを作成

Webページに埋め込む、公開用カレンダーの作成手順を詳しく見ていきましょう。まずはGoogleカレンダーのWebページを開きます

Google カレンダー

Googleカレンダーには、こちらのURLからアクセスします。または次のように、Googleトップページからもアクセスできます。

Googleトップ画面から右上のタイルアイコンをクリックします。

メニュー画面が開くので、カレンダーを選択します。

Googleカレンダーのページが開いたら、「カレンダーを追加」を選択します。

「新しいカレンダーを作成」を選択します。

Googleカレンダーの作成画面が開きます。名前の欄にカレンダーのタイトルを入力します。

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

新しいGoogleカレンダーが作成されました。つづいて画面下に表示されたポップアップから「設定」を選択して、カレンダーの公開設定をしましょう

設定画面が開きます。左のメニューより「アクセス権限」を選択します。

「一般公開して誰にでも利用できるようにする」にチェックを入れます。

”カレンダーの内容を誰でも見られるようになる”と警告がでます。問題ないので「OK」をクリックします。

これで埋め込み用のGoogleカレンダー作成が完了しました。Webページに表示するGoogleカレンダーは誰でもアクセスできる状態です。

Gmailの予定をGoogleカレンダーに連携して追加/登録する方法
仕事やプライベートでGmailやGoogleカレンダーを使用されている方も多いと思います。同...

GoogleカレンダーのWebページ埋め込み方法

関連するまとめ

関連するキーワード

この記事のライター
macoto

人気の記事

新着まとめ