ちなみに当ブログでは、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">
0 件のコメント:
コメントを投稿
.