Calendar for Blogger

Bloggerのガジェットにはカレンダー機能がないので皆さんどうしているのか調べてみたところまさにその為のサイト

https://www.tim.jp/BloggerCalendar/howtouse.html

があり、実際に使っているブログ

https://koredekaiketsu.blogspot.com/2015/07/blogger_15.html

もあったのですが、このカレンダーを実装するにはブログのアーカイブを日別に表示する必要があるため現行の月別表示を変更しなければならず、あきらめることにしました。このブログは日別表示にするほど更新頻度は高くないし今後も高くなる予定はないのでいまの月別表示をできれば変えたくありませんでした。

そこでさらに調べてみるとブログサービスでよく見かけるカレンダーを自動生成するJavaScriptが公開されているのを見つけました。

https://tkaige.blogspot.com/2015/09/blogger.html

日付形式や週始めの曜日を選択できるし簡単そうなので自分風にカスタマイズしようと思いました。しかし、例えば、前月翌月へのリンクが別ページに遷移して記事がないページに飛んでしまったり、必要のない翌月・翌年へのリンクが表示されたりするのでそれらを変更できないかとソースを見てみましたがとても自力ではできそうになかったので諦めました。

できれば jQuery で表示されるような前後の月のみを表示させるようなカレンダーがあればいいのになあとめげずに探していると

https://p--q.blogspot.com/2017/03/blogger12calendar5blogger.html

で紹介されているCalendar5_Bloggerモジュール

https://github.com/p--q/Calendar5_Blogger

という素晴らしいガジェットが公開されていました。開発者の方は６年近く前に既にBlogger用のカレンダーガジェットについて考え始めていらっしゃったようで

https://p--q.blogspot.com/2013/04/1_29.html

からの一連のエントリーで開発経緯を詳しく公開されています。

早速、上記のGitHubのページからCalendar5_Blogger.js をダウンロードして試行錯誤の末ようやく自分のブログへカスタマイズできました。右側上部にあるカレンダーの通りです。（ただし、モバイル対応はしていません！）主な変更点は

1. オリジナルでは前月、翌月のリンクがそれぞれ右、左にあったのですが、jQueryでよく目にするカレンダーとは逆になっていたため変更。
2. 公開日・更新日別のカレンダーであることをそれぞれ Published, Last updated と明示した。また、オリジナルより幅に余裕があったので英語の月名をフルスペルで表示した。
3. ブログ開始月をこのブログのもの（2018年7月）に変更、また読み込む最大記事数を2000とした。
4. エントリーのあった日をクリックすると記事タイトル（リンク付）と写真（あれば）がカレンダーの下に出てくるのですが、別の月に遷移したり更新日(or公開日)別のカレンダーに移動しても以前の記事が残っていたためそれらはクリック時点で消えるように変更。
5. エントリーがあった日の表示に不具合（該当週の下に30pxほどの空白が入る）があったので "post" となっていた className を "postari" とあまり使わなそうなものに変更したところ不具合解消。
6. カレンダーの高さを調整。オリジナルのコンパクトな表示を変更。縦方向を伸ばしました。

５番目の問題が一番大変でした。カレンダー自体の flexbox の設定やエントリーがあった日のテキストのスタイル設定など調整しましたが全くダメでお手上げでしたが、まさか className を変更したら解決するとは思いませんでした。オリジナルのサイトでは問題なかったので、自分のブログにあった他のJavaScriptと競合していたようです。

開発者のおかげで良いものが実装できてよかったです。p--qさん、ありがとうございました！公開日・更新日別の機能、URLにjpが含まれていたら日本語対応、さらに祝日の色分けなど他ではあまり見られない便利な機能も満載なので Blogger 使っている人にはお勧めです。最後に参考までに私が使ったスクリプトはこちらです。

ブロガー管理画面の「レイアウト」で「HTML/JavaScriptガジェット」を選び上記のスクリプトをカスタマイズして貼り付ければOKです。カスタマイズに際しては

• 58行目の読み込む最大記事数の設定
• 180行目の祝日設定（2018年から2030年までは登録済み）
• 397, 398行目のブログ開始月の設定

を行えば大丈夫なはずです。もし不具合があるようでしたら上記のように className を書き換えるなどしてみてください。よろしくお願いします。