Bloggerのすべての記事に日付を付ける Home 関連記事 過去記事

ちょっとがんばって１日に複数記事を公開すると、２番目以降には日付が付かない。記事の鮮度は視線を動かさずに確認したいものなので、なんとかしてみる。
ちなみに当ブログでは、SimpleIIテンプレートを使っている。

例によって、Google Chromeで日付の付近の「要素の検証」をしてみる。と、date-haederというクラス名が見つかる。
テンプレートのHTMLの中からそれを探し出すと、以下のあたりになる。レイアウトなどによって構造が変わるので、ポイントのみ抜粋。

  <div id='outer-wrapper'>
    <b:section class='main' id='main' showaddelement='yes'>
      <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
        <b:includable id='main' var='top'>
           :
           :
           :
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
           :
           :
           :

b:loopで記事数分繰り返し、b:ifで何かの条件判断をしていて、<data:post.dateHeader/>が日付の実体だろうということは想像できる。
条件が「１記事目だったら」という意味なら、if文を消してしまえば解決するはず。

<!--      <b:if cond='data:post.dateHeader'> -->
        <h2 class='date-header'><data:post.dateHeader/></h2>
<!--      </b:if> -->

ところが、変化なし。
困ったときは先生に尋ねる。……と、すでに解決しているページがヒットした。「某氏の猫空」では２つの解決方法が紹介されている。
これによると、２つ目以降の記事では日付データ自体が返らないらしい。本当かどうか確認してみた。

<!--      <b:if cond='data:post.dateHeader'> -->
        <h2 class='date-header'>主君の<data:post.dateHeader/>太陽</h2>
<!--      </b:if> -->

変化がない！？

データが返るかの確認

変化が無いのではなく、そもそも日付データが返ってないのが判る。
件のサイトに倣うと、無事すべての記事に日付が表示された。


それだけでは芸がないので、少し機能を追加しておく。

日付が年月日のみなので、記事の中で、週末、週明けなどの表現が使いづらかった。曜日が表示される設定もあるが、フォーマットが気に食わない。
JavaScriptには、日付から曜日を得る機能があるので、それで表示させてみる。曜日なので、土日には色も着ける。

件のサイトの例では、冗長と思われる部分があったので、表示はすべてスクリプトで行うなど整理した。機能は増えたが、行数は少し減っている。以下のスクリプトを、上記でいじっている３行と、そっくり置き換える。
ちなみにこのスクリプトを使うには、日付フォーマットは「yyyy/mm/dd」の形式に設定しておく。

      <b:if cond='data:post.dateHeader'>
        <script type='text/javascript'>
          var dateHeaderTemp = "<data:post.dateHeader/>";
        </script>
      </b:if>
      <h2 class='date-header'>
        <script type='text/javascript'>
          var wNam = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
          var wNum = new Date(dateHeaderTemp).getDay();
          var wCol = ["red","black","black","black","black","black","blue"];
          document.write(dateHeaderTemp+"<span style='color:"+wCol[wNum]+";'> "+wNam[wNum]+"</span>");
        </script>
      </h2>

色付き曜日が表示できるなら、祝祭日も認識させたい。

独自に判定関数を作ることもできるが面倒くさい。法律が変わる毎にメンテナンスも要る。
餅は餅屋に任せて、そこからデータを貰いたい。調べると、Googleカレンダーあたりがよさそう。祝日の名前なども得られ、JSONPで貰い受けることができる。ユーザも多いので、間違いも少ないことが期待できる。

……が、まだ完成せず。
非同期の読み込み（？）の対策に手間取ったが、ローカルで動作させるまではできた。ところが、テンプレートに埋め込んでみると動かない。
今後の宿題とし、ここではちょっと飾り付けをすることで、お茶を濁しておく。

      <b:if cond='data:post.dateHeader'>
        <script type='text/javascript'>
          var dateHeaderTemp = "<data:post.dateHeader/>";
        </script>
      </b:if>
      <h2 class='date-header'>
        <script type='text/javascript'>
          var wNam = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
          var wNum = new Date(dateHeaderTemp).getDay();
          var wCol = ["ffe0d0","d0e0d0","d0e0d0","d0e0d0","d0e0d0","d0e0d0","d0e0ff"];
          var wSty1 = "<div style='position:relative; text-align:right; width:8.5em;'>" +
                      "<span style='font-weight:normal; font-family:impact,fantasy; font-size:220%; color:#";
          var wSty2 = ";'>__ ";
          var wSty3 = "</span>";
          var dSty = "<div style='position:absolute; left:0px; top:0.5em;'>";
          var sDiv = "</div>";
          document.write(wSty1+wCol[wNum]+wSty2+wNam[wNum]+wSty3 + dSty+dateHeaderTemp+sDiv+sDiv);
        </script>
      </h2>

曜日を追加した

曜日を飾ってみた

後者が現在の表示になる。

飾るついでに、最優先フォントにメイリオ（Meiryo）を追加しておいた。ぬるぬるして見易い。
WinXPのサポートが終わったこともあり、後継WinVista以降のフォントでも問題ない、という意味もある。他のOSついてはよく知らない。
headタグ内のb:skinタグを開くと、Variableというタグがいくつかある。そのうちのname="bodyfont"を含むタグの、valueにフォント名を追加する。スペースを含むフォント名も、そのまま書いてよいらしい。

SimpleIIテンプレートでは、￥が＼になり、三点リーダが３連ピリオド様になってしまう。
三点リーダ対策にSimpleテンプレートのフォントを追加、￥記号対策にＭＳ系のフォントを追加、さらに今回メイリオを追加、と節操ない状態になっている。

   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 98% Meiryo, MS UI Gothic, ＭＳ Ｐゴシック, ＭＳ ゴシック, Arial, Tahoma, Helvetica, FreeSans, sans-serif, Verdana, sans-serif">