6月12日の勉強会

 Section 30  Googleカレンダーを表示しよう

 1⃣ Googleカレンダーを指定する

  1. 「ホーム」のサブページ「イベント」に大見出し「イベントカレンダー」を追加
  2. 追加するコンテンツ項目で「Googleカレンダー」を選ぶ
  3. Googleカレンダーへ遷移する

 2⃣ Googleカレンダーを表示する準備をする

  1. Googleアカウントでカレンダーにログイン
  2. 公開するカレンダー「山の家J」の作成
  3. 一般公開の設定

 3⃣ Googleカレンダーを表示する

  1. 公開するカレンダーを指定する
    • 山の家J
    • 日本の休日
  2. 「カレンダーの統合」をし、埋め込みコードを選択・コピーする
  3. ジンドゥの編集画面に切り換え、Googleカレンダーの下の枠内にコードを貼り付ける

 4⃣ カレンダーの表示を確認する

  1. プレビュー表示に切り替える
  2. カレンダーに予定が表示されるのを確認する
  3. 予定を追加する
    1. カレンダー右下角にある「Googleカレンダー」をクリックする
    2. Googleカレンダーのホームページが開く
    3. 予定を追加する
    • 追加するカレンダー「山の家J」を選び
    • 予定タイトルと日時の入力
    • 予定内容入力
    • 「保存」
    • 「繰り返し予定」の入力

設置されたカレンダーをページの中央に表示する

設置されたカレンダーは、ページの左寄りに表示されている。これを中央に表示するよう変更する・

  1. 編集モードで、埋め込まれたカレンダーをクリックして、カレンダーコードを表示する
  2. カレンダーのオリジナルコードの前後に、2行追加する
    • 1行目は、ここから始まる領域(div)は、"横幅800pxのコンテンツ(カレンダー)を、左右の余白(margin)を同じ値にして表示する"と指示する。
    • 最後に追加された2行目は、1行目と対になり、指定する領域の下端を定義している。
calender02:カレンダーを中央揃えにするコードの追加
calender02:カレンダーを中央揃えにするコードの追加
  1. 「保存」する

calender01
calender01