Googleカレンダーは誰でも無料で作れて、インターフェースも分かりやすいので使っている人も多いと思います。私はWebサイトでカレンダーを表示させるときにもよく使っています。
今回はお店のWebサイトを作る前提でお店の定休日とイベントの2種類のカレンダーを作ってWebサイトに埋め込む方法を試してみました。
Googleカレンダーで定休日とイベントカレンダーを作る
定休日とイベントで2種類のカレンダーを作ります。
Googleカレンダーに入って、
右側にある歯車のマークをクリックし 設定 をクリック
カレンダー タブをクリック
ページの中程にある 新しいカレンダーを作成 をクリック
カレンダー名に 定休日 と入力し、このカレンダーを一般公開する にチェックを入れて、カレンダーを作成 をクリック
このように警告が出るので はい をクリック
変更を保存しました と表示され、
マイカレンダーに 定休日 が追加されました。同じ手順で、
イベントカレンダーも追加しておきます。
カレンダーに予定を入れる
今作った定休日カレンダーとイベントカレンダーに予定を入れてみます。
繰り返し予定を入れる
定休日カレンダーに予定を入れたいと思います。定休日は毎週日曜日と月曜日ということにしてみます。これを入れるには、
まず、月 をクリックして月間カレンダー表示にします。
そしてカレンダーに表示されている、最初の日曜日をクリック
こんな感じの入力欄が表示されますので、
タイトルに 定休日 と入力して、カレンダーは 定休日 を選んで、編集 をクリック
このように表示されています。
繰り返し のチェックボックスをクリック
この画面がポップアップされます。
月曜日にもチェックを入れて、完了をクリック
保存 をクリックします。
このように日曜日と月曜日に 定休日 という予定が入りました。
繰り返しなので、
先のカレンダーでも定休日となっています。
1回限りの予定を入れる
イベントカレンダーに予定を入れようと思います。例として2月20日(土)の午後1時から3時まで木工ワークショップ、があるとします。
週をクリックして週表示にします。
予定を入れたい2月20日の午後1時あたりのセルをクリック
午後3時となるまで下にドラッグして、
マウスを放すとこの入力欄がポップアップされるので、
タイトルに 木工ワークショップ と入力して、カレンダーはイベントを選択し 予定を作成 をクリック
* もし時間がうまく選択できなくても、この画面の編集をクリックした画面で時間を修正することができます
このようにイベント予定が入りました。
作ったカレンダーをWebサイトに貼り付けてみる
作ったカレンダーをWebサイトに貼り付けたいと思います。
歯車のマークをクリックし 設定 をクリック
カレンダー タブをクリック
定休日 をクリック
色やサイズなどをカスタマイズします をクリック
このように埋め込みのイメージが表示されます。今回はWebサイトの右ブロックに表示したいと思いますので横280、縦300ピクセルぐらいの大きさにします。
幅と高さを入力して、表示のチェックを外したりして、こういう感じのカレンダーとしました。
ページの左下に、
表示するカレンダーの一覧があります。
日本の祝日とイベントにチェックを入れてみると、
このようにカレンダーの表示が変わって複数のカレンダーの内容が表示されるようになりました。
表示されているコードを全選択してコピーします。
WordPressのウィジェットに貼り付けてみる
追加したいwebサイトの
ダッシュボード 外観＞ウィジェット をクリック
利用できるウィジェット で テキストをクリックして、追加したいウィジェット サイドバーウィジェット を選び ウィジェットを追加 をクリック
* これまでずっとドラッグする方法しか知らなかったんですが(^_^;、この方法は簡単ですね。
入力欄が開くので先ほどコピーしたカレンダーのコードを
貼り付けて 保存 をクリック
今追加した テキスト をウィジェットエリアの好きな位置に移動します。
これで表画面を見てみると、WebサイトにGoogleカレンダーが追加されました(^^)/
時間しか表示されていないイベントの予定もクリックするとこのように詳細を見ることができます。
固定ページに貼り付けて大きなカレンダーを表示することもできます
このカレンダーですが固定ページに貼り付けて大きなカレンダーとして表示することもできます。先ほどと同じ手順で、
色やサイズなどをカスタマイズします をクリックしたページに行きます。ページの左下で、
日本の祝日とイベントにチェックを入れます。この状態で
コードをコピーします。
貼り付けたいサイトの 固定ページ＞新規追加 をして
テキスト タブにコードを貼り付けて 公開 します。
そうすると固定ページに大きなカレンダーが表示されました。イベント名もちょっと見えるのでより分かりやすいですね。
幅を狭くした場合でも
このようにはみ出すことはありませんでした(使っているテーマはSimplicity)。
まとめ:枠の色が変えられない問題について(^_^;
Googleカレンダーのカスタマイズで色やサイズなどをカスタマイズします とあるので枠の色などが変えられるのかと思ったのですが、色に関するオプションは、
背景色のみでした。クリックすると、
確かに背景色は変わるのですが、枠の色が変えられません。たとえばこのサイトの場合は茶色っぽいテーマなので、サイトの色合いに合わせて枠の色茶色に合うように変えたいのですが。。。
ということでいろいろ検索した結果、枠の色を変える方法を見つけました。それについてはまた次回書きたいと思います(^^)/
[amazon_searchlink search=”WordPressデザイン”]
コメント