中小企業・個人事業の簡単ホームページ作成ソフトならとりあえずHP

ご利用実績11000人突破!

ユーザー向け使い方サイトとりあえずHPNAVI

  • 30日無料体験のお申し込み
  • はじめて訪問された方とりあえずHP公式サイト
  • ユーザー向け使い方ガイドとりあえずHPナビサイト

とりあえずHPの使い方

上級編

目次に戻る

Googleカレンダーを記事に埋め込もう  埋め込み用Googleカレンダータグを作成する

このページは上級編となります。まずは初級編・中級編をマスターしてからご覧頂くことをおすすめいたします。焦らずじっくりと取り組んでいこう!

とりあえずHPではGoogleカレンダーを記事ボックスに埋め込むことができます。

Googleカレンダーにアクセスし、Googleアカウントでログインをします

https://www.google.com/calendar/

※Googleアカウントをお持ちでない方は、新規で取得しましょう。

gc1
「カレンダー埋め込み支援ツール」を利用します

▼Google「カレンダー埋め込み支援ツール」
https://calendar.google.com/calendar/embedhelper

埋め込むカレンダーを選択します

「表示するカレンダー」の中から、「とりあえずHP」に埋め込みたいカレンダーをチェック選択します。

GoogleカレンダーのHTMLコードをコピーして、一度、「メモ帳」などのテキストエディタに貼りつけておきます

上部にある「下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます」という文字の下のボックスに表示されたHTMLコードをコピーします。
GoogleカレンダーのHTMLコードをそのまま貼り付けるのではなく、多少文字を追記して使うため、一度、「メモ帳」などのテキストエディタに貼りつけて保存しておきます。

※Googleカレンダーは横に長いため、ホームページを閲覧するスマートフォンの画面の大きさによっては、カレンダーが途中で切れてしまうということもあるようです。 その場合は必要に応じて、「印刷アイコン・タブ・カレンダーリスト」等を非表示にしてお使いください。

GoogleカレンダーのHTMLコードを囲むように、指定のコードを追記します。

下記のコードから、<div class=”cal_wrapper”><div class=”tzcal”> の部分と
</div></div> の部分をそれぞれコピーして、
手順6で「メモ帳」に保存しておいた、GoogleカレンダーのHTMLコードの前後に貼りつけます。

<div class=”cal_wrapper”><div class=”tzcal”> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div></div>

※「XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX」の部分に、GoogleカレンダーのHTMLコードが入るような形になります。

以上で、埋め込み用タグの準備は完了です。

以上の作業で、Googleカレンダーの埋め込み用タグは完成です。
実際に埋め込むタグは、以下のように、GoogleカレンダーのHTMLコードを
<div class=”cal_wrapper”><div class=”tzcal”> と </div></div> で囲むような形になります。

<div class=”cal_wrapper”><div class=”tzcal”> <iframe src=”https://〜” width=”800″ height=”600″ frameborder=”0″></iframe> </div></div>

次に、作成したタグを記事ボックスに埋め込む方法は下記をご覧ください。
記事にGoogleカレンダーのタグを埋め込む

※上記は必ず「メモ帳」などのテキストエディタ上で行ってください!
例えば、このページからコピーして、「とりあえずHP」の記事ボックスなどに直接貼りつけてしまいますと、書式情報などの余計なタグが入り、正しく表示できない場合がございます。

※GoogleカレンダーはGoogle社のサービスです。そのためGoogleアカウントの作成や、Googleカレンダーでの具体的な作り方などは「とりあえずHP」のサポート外となっております。あらかじめご了承ください。

↑このページのTOP
  • ユーザー向け使い方サイトとりあえずHPNAVI
  • これってどうやるの?と思ったら使い方サポート
  • 問い合わせ前に必ずチェック!よくあるご質問
  • ユーザー同士でスピード解決!助け合い掲示板