読者です 読者をやめる 読者になる 読者になる

太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログのカレンダーモジュールをオシャレにするCSSを作ってみた

プログラミング プログラミング-はてなブログカスタマイズ

カレンダーモジュールがリリース

 カレンダーモジュールがリリースされました。リスト形式のアーカイブは縦幅が広すぎて使いづらかったのですが、カレンダー+セレクトボックスであれば一定のスペースに詰め込めるので捗ります。使用するのにあたってCSSを書いてみたのでシェアします。

/* エントリがある時はアンダーライン */
.hatena-module .calendar-day a {
   text-decoration:underline;
}

/* 半透明処理解除(普通はいらない) */
.hatena-module .calendar-day a:hover {
  opacity: 1;
}

/* 枠線 */
.hatena-module .calendar-day {
   border:1px solid #999;
}

/* マウスオーバーでおっきくなる */
.calendar-day:hover {
  -webkit-transform: scale(1.3);  
  -moz-transform: scale(1.3);
}

/* 土曜ヘッダ */
.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;
}

要望

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

 なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

2015カレンダー 艦隊これくしょん-艦これ-

2015カレンダー 艦隊これくしょん-艦これ-