今まで月別アーカイブはリストタイプを使用していたのですが
・記事を投稿していない日をブログ画面からも一目で分かるようにする
・ただ単にカレンダーとして使う
・間延びした感じのリスト式に飽きた
ということでカレンダータイプに変えました。
リンクのデザイン
投稿記事のある日にちにリンクが貼られているわけですが
・リンクに下線をつける
・リンクの背景に画像を入れる
・リンクの背景に色をつける
などなど。
（カーソルをもっていった時のデザインも含めると、もっともっとありますが･･･）
リンクに下線をつける
まずやってみたのが、リンクに下線をつけるというもの。
下の画像のようになりました。
ブログ全体のリンクはあまり目立たない色に設定してあるので、カレンダーのリンクだけ色も変えました。
/ カレンダー エントリがある時はアンダーライン /
.hatena-module .calendar-day a {
color:#da006e;
text-decoration:underline;
}
リンクの背景に画像をもってくる
とても小さい素材を幾つか使ってやってみたのですが、パシッと決まるものがなく、止めました。
画像を挿入する場合に使ったコードの一部（↓）
/ カレンダー エントリがある時の画像挿入/
.hatena-module .calendar-day a {
background-image:url( 画像のURL );
background-repeat: no-repeat;
}
本当はリンク背景を色付きの丸にしたい
実は、もともとやりたかったのがこれで、リンクの背景を色のついたサークルにしたいというもの。
あちこちのサイトさんを参考にして、あーでもないこーでもないとやっていて、やっと見つけました。 ほとんど諦めていたので、本当に感謝です。
そして、「やっと見つけたー」と思いきや、やっぱりサルワカさんのサイトだったのでした。
上記サイトの「円形（丸）」のシンプルというコードを使わせて頂きました。
コードをそのまま使うと円形のサイズが大きいので、サイズ、背景色、テキストの色を変更しました。
/ カレンダー エントリがある時は円形背景 /
.hatena-module .calendar-day a {
display: inline-block;
text-decoration: none;
background: #ffecf5;
color: #da006e;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
transition: .4s;
}
/ カレンダー 土曜ヘッダ /
.hatena-module .calendar-saturday {
color: #00f;
}
/ カレンダー 日曜ヘッダ /
.hatena-module .calendar-sunday {
color: #f00;
}
上記コードを「デザインCSS」に貼り付けて出来上がりです。
実際に出来上がったカレンダーがこちら（↓）
今回のカスタマイズは我ながら結構気に入った結果になりました。
こちらのサイトさん（↓）も参考になると思います。
www.du-soleil.com
