前の関連記事：Blogger:カレンダー(1)基本ガジェットにカレンダーがない
カレンダー表示の整形にはflexboxを利用
カレンダーの形へ整形する方法はBlogger:ページ番号付ページナビ(10)ボタンの折り返し表示をやめるで知ったflexboxを使ってできました。
Date.prototype.getDay()で曜日を得ると日曜日に0、土曜日に6に返ってくるので、同じ数だけflexアイテムを日の前に追加しました。
flexコンテナをwrapにして、flexアイテムはflexBasisを14%、flexGrowを1にするとflexアイテムが7個で折り返されます。
その結果一行は日曜日から始まり土曜日で終わります。
日が終わった後も空のflexアイテムを7で割り切れる数になるまでflexアイテムを追加します。
そうしないと、最後の行のflexアイテムが拡大してしまいます。
曜日の判定はあとはflexアイテムの数を7で割ったあまりである剰余(式と演算子)を求めれば判定できます。
title属性ではリンクを表示ができない
今度はカレンダーに各投稿へのリンクを表示させます。
日付の上にマウスポインタをもってくるとその日の投稿のツールチップが出現してそこからその投稿へ飛べるようにしようと思いました。
その月の投稿タイトルとURLはフィードから得ることができました。
それを表示する方法で一苦労しました。
まずtitle属性で表示させてみました。
Calendar_Blogger/Calendar_Blogger.js at a99f1a4950da31dc28df547f2ff15451b7171b4d · p--q/Calendar_Blogger
マウスポインタを投稿がある日（つまりflexアイテム）の上に持ってくるとその日の投稿タイトルがツールチップに出ます。
しかしこのtitle属性のツールチップにその投稿へのリンクをつけることはできませんでした。
この方法のもうひとつの問題点はタッチデバイスではtitle属性が表示されないことです。
0 件のコメント:
コメントを投稿