SAMPLE IMAGE この画像は差し替えてご利用ください

063 カレンダーを表示する

063-1 Google カレンダーを表示する

カレンダーをサイトに追加することでイベントなどの情報を知らせることができます。

いろいろな外部カレンダーをJimdoページに挿入して表示できますが、ここではあなたの Google アカウントに関連付けられた Google カレンダーを、サイトに追加する方法を紹介します。

➊ 練習用の Google アカウントでカレンダーを作成する

1)練習用の Google アカウントを用意し、Google カレンダーにログインします。もし既存の Google アカウントに Google カレンダーを作成していない場合はそのまま既存の Google アカウントを使います。

 

  🔰 新しいGoogleカレンダーへようこそ画面が表示される場合がある。

スマホなどモバイル用のアプリが新しくなったとのことなので、何も押さないで[OK]をクリックする。

 

2)カレンダーを作成します。

本人が日常使用しているカレンダーをホームページで公開するのは好ましくない場合も、公開用のカレンダーを新しく作成します。

 

① 左側ナビに表示される「他のカレンダー」の[+]から「新しいカレンダーを作成」をクリックする。

jdg027_15:新しいカレンダーの作成
jdg027_15:新しいカレンダーの作成

「新しいカレンダーの作成」画面になるので、「カレンダー名」「説明」を入力します。ここではカレンダー名は、Jimdo としております。

「タイムゾーン」と「オーナー」欄を確認します。

 

「カレンダーを作成」ボタンを押すと、新しいカレンダーが作成される

jdg027_16:新しいカレンダーの作成
jdg027_16:新しいカレンダーの作成

④ 新しいカレンダーが追加・登録されたのを確認する。「カレンダーを作成」を閉じる。

jdg027_42:新しいカレンダーが作成され登録される
jdg027_42:新しいカレンダーが作成され登録される

3)カレンダーに予定を入力します。

予定を入力する日をクリックします。

予定名を入力します。ここでは「HP」と入力します。(*予定名は短くします。これは、このあと挿入するサイドバーでは横幅を広くとれない為です)

「編集」をクリックします。

jdg027_17:予定の入力
jdg027_17:予定の入力

4)予定の編集

「終日」に入っているチェックを外します。

「開始時間」と、「終了時間」、さらに「場所」も入力します。

「予定の色」を選びます。ここでは午前中なので「緑」を選んでいます。

 最後に、上部にある「保存」をクリックすると、予定が入力されます。

jdg027_18:予定の編集
jdg027_18:予定の編集

5)他の月の予定も入力し、カレンダーを完成します。

jdg027_19:全ての予定を入力する
jdg027_19:全ての予定を入力する

➋ カレンダーを公開に設定する

1)Google カレンダーにログインします。

2)カレンダーを公開します

① 画面左側のカレンダーから、サイトに埋め込むカレンダー()の右側にある[▼]をクリックし、「このカレンダーを共有」()をクリックします。

jdg027_20:カレンダーの共有を設定する
jdg027_20:カレンダーの共有を設定する

次に、「このカレンダーを一般公開する」()にチェックを入れ「保存」()をクリックします。

jdg027_21:一般公開するチェックを入れる
jdg027_21:一般公開するチェックを入れる

「カレンダーに戻る」()をクリックしカレンダーに戻ります。

➌ 埋め込むカレンダーの設定を行い、コードを取得する

1)画面左側のカレンダーから、サイトに埋め込みたいカレンダー()の右側にある「▼」()から「カレンダー設定」()をクリックします。

jdg027_22:カレンダー設定
jdg027_22:カレンダー設定

2)「このカレンダーを埋め込む」項目の「色やサイズなどをカスタマイズします」()をクリックします。

 

jdg027_23:色やサイズなどをカストマイズする
jdg027_23:色やサイズなどをカストマイズする

3)「Google カレンダー埋め込み支援ツール」で図のようにカスタマイズする。

「表示」グループで、表示する項目をチェックする

「幅」を「100%」、「高さ」を「360」ピクセルと入力する

「表示するカレンダー」グループで「日本の祝日」を追加する。

jdg027_24:カレンダーをカスタマイズする
jdg027_24:カレンダーをカスタマイズする

4) カレンダーの表示が決まったら、ボックス内のコード()をコピーします。

jdg027_25:コードをコピーする
jdg027_25:コードをコピーする

コピーしたコードを、サイドバー内で「+コンテンツを追加」 > 「・・・その他のコンテンツ&アドオン」 > 「アドオン」 > 「Googleカレンダー」を選びます。

❹ 取得したコードを Jimdo サイトのサイドバーに貼り付ける

jdg027_26:「+コンテンツを追加」から「Googleカレンダー」を選ぶ
jdg027_26:「+コンテンツを追加」から「Google カレンダー」を選ぶ

「Google カレンダー」編集パネルが表示されるので、 コピーしたソースを貼り付け、「保存」します。

jdg027_27:ソースを貼り付ける
jdg027_27:ソースを貼り付ける

カレンダーが表示されます。

jdg027_28:カレンダーが表示される
jdg027_28:カレンダーが表示される

カレンダーの更新

このあと Google カレンダーを更新すると、サイドバーに表示されるカレンダーにも更新が反映されます。

063-2 ネットショップ向けカレンダー

「ネットショップ向けカレンダージェネレーター」という、無料の Web サービスを使います。

営業日と休日の一覧をカレンダー形式で表示できます。

➊ カレンダーを作成するサービスにアクセスし、休業日などを指定する

①「ネットショップ向けカレンダージェネレーター」にアクセスします。

http://netshop.japanesecalendar.net/

② 休業日などの任意の日付にチェックを入れます。

画面下にあるプレビューで、チェックした日付の背景に色がつくのを確認します。

➋ カレンダーのソースコードをコピーする

① HTML ソースの欄で、ソースコードを全て選択し、マウスを右クリックしてコピーします。

➌ Jimdo にカレンダーを挿入する

① Jimdo の編集画面で、[+コンテンツを追加] > […その他コンテンツ] > [ウィジェット/HTML]を選択します。

②先ほどコピーしておいたカレンダーのソースコードを貼り付け、「保存」します。

カレンダーが挿入されます。