[Blogger] 日付をカレンダー風に表示する

【お知らせ】覚醒する @CDiP のテーマが変わりました。 | 覚醒する @CDiP
これを見て

@donpy さんの使われているこのテーマを見て、日付のカレンダー風表示がいいなぁと思いました。 2011年5月のことなんですね。

でも Blogger だとできないよなぁと思って諦めていましたが、 ちょっと挑戦してみて以下のようにできました。

JavaScript で HTML を生成してしまえ

はじめに、Blogger の設定で、日付の形式を「YYYY-MM-DD」に変更します。 後述する JavaScript がこの形式を前提にしているためです。

次に、Blogger のテンプレートの head 要素内に以下の JavaScript を追加します。

    <script type="text/javascript">
    function getMonth(mon) {
      switch (Number(mon)) {
      case 1: return 'Jan';
      case 2: return 'Feb';
      case 3: return 'Mar';
      case 4: return 'Apr';
      case 5: return 'May';
      case 6: return 'Jun';
      case 7: return 'Jul';
      case 8: return 'Aug';
      case 9: return 'Sep';
      case 10: return 'Oct';
      case 11: return 'Nov';
      case 12: return 'Dec';
      default: return mon;
      }
    }

    function makeTimestamp(tm) {
      var dateAr = tm.split('-');
      var cal = document.createElement('div');
      cal.setAttribute('style', '\
float:left;\
width:48px;\
margin-right:10px;\
border:solid 1px #777;\
-webkit-border-radius:10px 10px 10px 10px;\
-moz-border-radius:10px 10px 10px 10px;\
border-radius:10px 10px 10px 10px;\
-webkit-box-shadow:0px 1px 1px 0px #777;\
-moz-box-shadow:0px 1px 1px 0px #777;\
box-shadow:0px 1px 1px 0px #777;\
text-align:center;\
');
      var month = document.createElement('div');
      month.setAttribute('style', '\
color:white;\
background:-webkit-gradient(linear, left top, left bottom, from(#F09899), to(#D23331));\
background:-moz-linear-gradient(top, #F09899, #D23331);\
-webkit-border-top-right-radius:10px;\
-webkit-border-top-left-radius:10px;\
-moz-border-radius-topright:10px;\
-moz-border-radius-topleft:10px;\
-webkit-box-shadow:0px 2px 2px 0px #777;\
-moz-box-shadow:0px 2px 2px 0px #777;\
box-shadow:0px 2px 2px 0px #777;\
margin-bottom:2px;\
');
      month.appendChild(document.createTextNode(getMonth(dateAr[1])));
      var day = document.createElement('div');
      day.setAttribute('style', '\
font-size:26px;\
color:#444;\
font-weight:bold;\
line-height:0.8;\
margin-top:6px;\
');
      day.appendChild(document.createTextNode(dateAr[2]));
      var year = document.createElement('div');
      year.setAttribute('style', '\
font-size:12px;\
font-weight:normal;\
');
      year.appendChild(document.createTextNode(dateAr[0]));
      cal.appendChild(month);
      cal.appendChild(day);
      cal.appendChild(year);
      var dummy = document.createElement('div');
      dummy.appendChild(cal);
      return dummy.innerHTML;
    }
    </script>

最後に、テンプレートで日付を出力している部分を以下のように書き換えます。 モバイルテンプレートでも dateHeader を出力していると思いますが、 モバイルテンプレートには対応していませんのでご注意ください。

<h2 class='date-header'>
  <script>
    document.write(makeTimestamp(&quot;<data:post.dateHeader/>&quot;))
</script>
</h2>

あとがき

見た目を変えたい場合は style 属性の値を変更してください。 あ、スタイルは CSS で定義した方がよかったですね(^o^;

関連記事

loading..