長野市のWebサイト制作会社 デザインスタジオ・エルWeb事業部「ウルトラエル」

「超えるをつくる」ための、公私同一学びの記録。
Webディレクター・ハラヒロシのブログ

2012.12.14

レスポンシブなカレンダー「Calendario」試す

Advent Calendar in 信州松本(だけじゃなくてもいいよ) 」にお誘いいただいたので、14日目担当として1ネタ参加させていただきます。どんなネタがいいか悩みましたが、Advent Calendarを眺めていたらその名のごとくカレンダーに関することないかな…という短絡的な結論で、以前社内で話題になっていたレスポンシブ対応のJQueryプラグイン「Calendario」をいじってみることに。

url Calendario: A Flexible Calendar Plugin | Codrops

配布サイトでデータをダウンロードして、CSSをちょっとだけ変更して(背景変えたぐらい)アップしたのがこれ。簡単~!

カレンダーのデータはdata.jsというファイルにまとめて書かれている。なるほど。
書式はこんな感じ。

'12-14-2012' : '<a href="リンク先">ページタイトル</a>',

ここにCMSのタグを突っ込んで書き出してあげればブログカレンダーとして応用できそう。(ためしにやってみたけど、同一の日付に複数表示させたい場合はカンマ区切りで続けて入れる必要があるため、現状だとまだ未完成です。)


▼PCで通常表示
Calendario

▼ウィンドウ狭くするとレイアウト変わります
Calendario

Facebook twitter このエントリーをはてなブックマークに追加

電子書籍版 マンガ「Webクリエイター・ウルトラエル」マンガ「Webクリエイター・ウルトラエル」
ITが発展した下界に下りてきた忍者・ウルトラエルが持ち前の忍術・戦術・記憶術を駆使しながら、一人前のWebクリエイターを目指して奮闘します。
※Vol.01~Vol.10をまとめ読みできます(すべて無料です)
「ブクログのパブー」で公開していますので是非ごらんください。

Webディレクター・ハラヒロシ

ABOUT

デザインスタジオ・エルWeb事業部のWebディレクター・ハラヒロシの仕事の肥やしブログ。アンテナを360度張り巡らせて、なるべく年間360回更新します。
詳細プロフィールはこちら

twitter Feedly Facebook Instagram Pinterest Amazon

ARCHIVES

過去記事一覧

SEARCH


ウルトラエル