f:id:bulldra:20141117061858j:plain

はてなブログのカレンダーモジュール改修案

・枠線の事を考えると最終日からその行全体を「.calendar-day」で埋めてほしい
・1桁の日付は0埋めをしてもらえると、◯囲みとかのスタイルも書きやすい
・aタグの有無でしかエントリの存在が判別できないからスタイルを分けてほしい
・月のセレクトボックスの隣にカテゴリーを選ぶ機能があると嬉しいな

<a href="http://bulldra.hatenablog.com/entry/calender-css">はてなブログのカレンダーモジュールをオシャレにするCSSを作ってみた - 太陽がまぶしかったから</a>

　上記エントリではCSSで見た目だけを直してみたのですが、内部構造を見るとCSSだけなんとかするのは無理があるという事がわかりましたので、スクリプトによって出力要素を改変します。またサムネイル画像の表示や月別アーカイブへの移動機能を追加します*1。

エントリ更新日に手書き風の赤丸*2
エントリ更新日をマウスオーバーするとズームしてサムネイル画像表示
選択している月のエントリ一覧へ移動するボタンの追加
カレンダーヘッダの曜日を色分け
1桁日付の場合に0詰め
枠線の全面適用（前回の通り、CSSだけでは最終週の線が描画されない問題があった）
タイトルに一覧画面への導線文言を追加

https://vine.co/v/O5TeqgWeuWm

プラグイン設置方法

　デザイン画面のフッタに以下のスクリプトを追加します。

f:id:bulldra:20141025180523j:plain

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/calendar.js" charset="utf-8"></script>

　CSSに以下の記述を追加します。各自のスタイルにあわせて適宜修正を行ってください。

.hatena-module .calendar-day a {
   text-decoration:none;
}

.hatena-module .calendar-day a:hover {
  opacity: 1;
}

.hatena-module .calendar-day {
   border:1px solid #999;
   padding: 6px;
}


.hatena-module .calendar-saturday {
  color: #00f;
}

.hatena-module .calendar-sunday {
  color: #f00;
}

.hatena-module .calendar-weekday {
  color: #333;
}

.hatena-module .calendar-saturday, .hatena-module .calendar-sunday,.hatena-module .calendar-weekday {
  font-weight: bold;
  border:1px solid #999;
  background-color:#ccc;
}

.archive-module-calendar {
    padding:5px;
}

.hatena-module .calendar-day-entry {
  background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/b/bulldra/20141114/20141114071203.png') no-repeat 0,0;
  background-position: center;
  background-size: contain;
}

.hatena-module .calendar-day-entry:hover {
  -webkit-transform: scale(1.3);  
  -moz-transform: scale(1.3);
}

.hatena-module-archive .hatena-module-title a:after {
    content: ">>一覧を見る";
    font-size: 90%;
    position: absolute;
    right: 10px;
    color: #fff;
}

制限事項

サムネイル画像の初回表示は「Not Captured」と表示されます
テーマによってはうまく表示できない可能性があります
アーカイブモジュール複数利用には対応してません
はてな側の仕様変更によって動かなくなる可能性があります

コードを参考にしました

<a href="http://psn.hatenablog.jp/entry/2014/11/14/211001">コード投げる文化 - すなばいじり</a>

まとめ

　以上の手順を行うことで、カレンダーモジュールに機能追加を行うことができます。エントリがある日付専用のスタイルや、最終週の枠組みが途中で終わる部分については公式で対応してほしいのですが、暫定的にはこのような形で対応します。

　手帳やカレンダーの日付に何かをするごとに赤丸を付けていくのってなんか好きなんですよね。例えばランニングをした日にだけ赤丸を付けている人もいるのですが、カレンダーの更新日にだけを赤丸を付ける事で自分の中の「偏り」が可視化されるような気分にもなります。特に月次の振り返り記事に使っていくとよいかも。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。