営業日や休日の案内、イベントやレッスンのスケジュールなど、カレンダーを掲載したい方いらっしゃいますか?
残念ながらJimdoにはカレンダー機能はありませんが、外部ツールを使えば、簡単に掲載することができます。
今回は、全て無料で使えるツールをご紹介。目的によって使用してみてはいかがでしょうか。
いずれも、Jimdoの「ウィジェット/HTML」にコードを貼り付け
ご紹介するツールのいずれも、
Jimdoで表示させる際、
「ウィジェット/HTML」を使用します。
コンテンツ追加から選べます。
このコンテンツは、外部で提供されているHTMLやJavaScriptのソースコードをコピー&ペーストすることができます。
今回紹介するカレンダーいずれも、各サービス内でソースコードを公開しており、それをコピーしJimdoにペーストすることで、簡単にカレンダー挿入が実現します。
参考)Jimdo公式サポートサイト「ウィジェット/HTML」
以下、紹介します。
☆休日表示なら、簡単・シンプル。表示幅も選べます♪
営業日・店休日・定休日
カレンダーの作成
http://calendar.syoukoukai.com/
画面上で直観的に操作できてシンプル簡単。
「カレンダーを作成する」をクリックすると“HTMLタグプレビュー”欄にソースが表示されるので、コピーし、Jimdo「ウィジット/HTML」に貼り付けて表示させます。
2016年5月 | ||||||
日 | 月 | 火 | 水 | 木 | 金 | 土 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
2016年5月 | ||||||
日 | 月 | 火 | 水 | 木 | 金 | 土 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
スマホでの表示は、横幅100%と設定することにより綺麗に表示されます。
つまり、カレンダー幅を「100%」に。但し、PCでは100%だと大きすぎてしまう場合があるので(サンプル1)、コンテンツ追加でカラムを使用して配置する(サンプル2)などしましょう。
☆イベント名も表示できる優れもの。表示バリエ豊富♪
こよみん
※簡単なユーザ登録要。「byこよみん」と広告が表示されます。
「カレンダーにレッスンやイベントを記載してページにリンクもしたい。」そんな願いを叶えてくれる、なかなかの優れもの。今日の日付も色を変えられます。
表示バリエーションも豊富なのも嬉しい。
ログインすると、左のようなメニューがあります。
貼り付けコードをクリックして、ソース(貼り付けコード)をコピーして使用します。
その他の詳細設定。
カスタマイズ・・・色などを設定
イベント・・・イベント名登録
スケジュール・・・該当日をクリックして文言やURL登録
こよみんは、100%サイズ指定ができない為、スマホ画面では横幅が切れる可能性があります。
選べる貼り付けコードの中で“カレンダー横幅サイズの指定”で250〜300px程度にすれば、スマホ画面でもなんとかいけそうです。(参考:サンプル3)
☆Google利用者多数。スマホから更新できるのも魅力
Googleカレンダー
https://support.google.com/calendar/
※Googleアカウント要。ログインが必要です。
イベントやレッスン日など予定を管理できるツール。表示させる内容は、
スマホやタブレットからも予定を入力可能。
マイカレンダーで、該当のカレンダー横の▼のクリック「カレンダー設定」を選択すると下記のような貼り付けコードが表示されますので、コピー。
Jimdo「ウィジェット/HTML」に貼り付けて使用します。
サイズや色もカスタマイズ可能。ページにあわせて工夫してみましょう。
1行目のHTMLソースの横幅「width:****px;」を「width:100%;」と打ち直します。(サンプル4)。PCの表示で横幅が広すぎる場合は、カラムを使って工夫(サンプル5)します。
ただ、スマホ画面では、カレンダーの「予定リスト」などの文言は、画面の幅によって溢れてしまうので、ある程度の許容範囲が必要です。
さて、お好みのカレンダーはありましたか?
設定方法詳細は、それぞれのウェブサイトでご確認ください。
以上、ご参考まで!