since 2007.8 by K-ichi

ちょっとがんばって1日に複数記事を公開すると、2番目以降には日付が付かない。記事の鮮度は視線を動かさずに確認したいものなので、なんとかしてみる。
ちなみに当ブログでは、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/>が日付の実体だろうということは想像できる。
条件が「1記事目だったら」という意味なら、if文を消してしまえば解決するはず。
<!--      <b:if cond='data:post.dateHeader'> -->
        <h2 class='date-header'><data:post.dateHeader/></h2>
<!--      </b:if> -->
ところが、変化なし。
困ったときは先生に尋ねる。……と、すでに解決しているページがヒットした。「某氏の猫空」では2つの解決方法が紹介されている。
これによると、2つ目以降の記事では日付データ自体が返らないらしい。本当かどうか確認してみた。
<!--      <b:if cond='data:post.dateHeader'> -->
        <h2 class='date-header'>主君の<data:post.dateHeader/>太陽</h2>
<!--      </b:if> -->

変化がない!?

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


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

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

件のサイトの例では、冗長と思われる部分があったので、表示はすべてスクリプトで行うなど整理した。機能は増えたが、行数は少し減っている。以下のスクリプトを、上記でいじっている3行と、そっくり置き換える。
ちなみにこのスクリプトを使うには、日付フォーマットは「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テンプレートでは、¥が\になり、三点リーダが3連ピリオド様になってしまう。
三点リーダ対策にSimpleテンプレートのフォントを追加、¥記号対策にMS系のフォントを追加、さらに今回メイリオを追加、と節操ない状態になっている。
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 98% Meiryo, MS UI Gothic, MS Pゴシック, MS ゴシック, Arial, Tahoma, Helvetica, FreeSans, sans-serif, Verdana, sans-serif">

0 件のコメント:

コメントを投稿

※ コメントは管理者の確認後に表示されます

関連記事


この記事へのリンク by 関連記事、被リンク記事をリストアップする」記事
Related Posts Plugin for WordPress, Blogger...

ブログ アーカイブ