先に述べたように、時刻表示をいじるやつくっちゃいました♪(AM/PM→24時間表示へ)で紹介されているスクリプトを導入済みの方は、まずそのスクリプトを削除してください。

時刻表示用のタグを次のように定義します。

<span class="time">{entry_time}</span>

いつものように</body>の直前(つまり、htmlテンプレートの最後の方になります)に以下のようなJavaScriptを挿入します。

<script type="text/javascript">
<!--
function GetElements(tagName, className) {
  var ret = [];
  var obj = this.document.getElementsByTagName(tagName);
  for (var i = 0; i < obj.length; i++)
    if (obj[i].className == className) ret[ret.length] = obj[i];
  return ret;
}
// reference from NYAN-NYAN-HANTEN (C) ALIMIKA SATOMI http://www.remus.dti.ne.jp/�~a-satomi/
// -->
</script>

これは「続きを読む＞＞」の表記を変えてみるや日付のフォーマットを変えてみるなどで紹介したスクリプトの汎用ライブラリ的なものと同一です。もしすでに挿入していたら必要ありません。

続いてJUGEMTIMESを実行する部分を挿入します。

<script type="text/javascript">
<!--
function JugemTimes() {
  var option = new settingJugemTimes();
  var blogMode = window.location.search;
  if (!document.body.innerHTML) return;
  if (blogMode.indexOf("eid=") > -1 || blogMode.indexOf("mode=comment") > -1) {
    if ( document.getElementById(option.times_id) ) document.getElementById(option.times_id).style.display = 'none';
    option.flag_disp = false;
  }
  var objTime = GetElements(option.time_tag,option.time_cls);
  var barTime = new Array();
  for (i=0;i<objTime.length;i++) {
    var objLink = objTime[i].getElementsByTagName('a')[0];
    var txtTime = objLink.innerHTML;
    if ( txtTime.match(/(�\d�\d):(�\d�\d) (�\w+)/i) ) {
      var dHour = RegExp.$1;
      var dMinu = RegExp.$2;
      var dMode = RegExp.$3;
      if ( dMode.indexOf('A') > -1 && dHour == 12) dHour = '00';
      if ( dMode.indexOf('P') > -1 && dHour < 12) dHour = Number(dHour) + 12;
      if (option.flag_disp) {
        var tmp = Math.floor( (Number(dHour) + ( Number(dMinu) / 60 ) ) * option.width / 24 );
        barTime[tmp] = (barTime[tmp]) ? barTime[tmp] + 1 : 1;
      }
      if (option.flag_text) txtTime = Array(dHour,':',dMinu).join('');
    }
    if (option.flag_link) objTime[i].innerHTML = txtTime;
    if (!option.flag_link) objLink.innerHTML = txtTime;
  }
  if (option.flag_disp) {
    document.write(option.header);
    for (i=0;i<option.width;i++) {
      var barImg = (barTime[i]) ? option.exist : option.none;
      document.write(Array('<img src="',barImg,'" height="',option.height,'" width="1" alt="" />').join(''));
    }
    document.write(option.footer);
  }
}
function settingJugemTimes() { // JUGEMTIMES設定
  // フラグ設定
  this.flag_link = true; /* リンク設定 true:時刻でリンクしない false:リンクはそのまま */
  this.flag_text = true; /* 時刻表示 true:24時間表記 false:そのまま */
  this.flag_disp = true; /* JUGEMTIMES表示 true:表示する false:表示しない */
  // 要素設定
  this.time_tag = 'span'; /* 時刻表示に利用しているタグ */
  this.time_cls = 'time'; /* 時刻表示に利用しているクラス名 */
  this.times_id = 'jugemtimes'; /* JUGEMTIMESを表示するid名 */
  // イメージ設定
  this.width = 200; /* JUGEMTIMESの幅 */
  this.height = 10; /* JUGEMTIMESの高さ */
  this.exist = 'http://simpleboxes.jugem.cc/?image=40'; /* 投稿時刻を表示するパーツ */
  this.none = 'http://simpleboxes.jugem.cc/?image=34'; /* 投稿がない時刻を表示するパーツ */
  this.header = '<img src="http://simpleboxes.jugem.cc/?image=39" alt="" width="200" height="10" /><br />'; /* ヘッダパーツ */
  this.footer = '<br /><img src="http://simpleboxes.jugem.cc/?image=36" alt="" width="200" height="8" />'; /* フッタパーツ */
  return this;
}
// -->
</script>
<div id="jugemtimes"><script type="text/javascript">
<!--
JugemTimes();
// -->
</script></div>

このままですと、JUGEMTIMESはページの最後に表示されます。

そこで好きな場所に表示するためにスタイルシートの方で表示位置を調整します。当ページでは次のように指定しています。

div#jugemtimes {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 200px;
  margin: 0px;
  padding: 0px;
}

スタイルシートで絶対配置させています。top: 10px;とright: 20px;を修正することで位置を調節できます。

ここでは右側に表示するようにしていますが、左側がよければ、right: 20px;をleft: 20px;のように変更してください。

表示位置に関しては例えば、サイドナビゲーションに含めたいなどのより柔軟なカスタマイズも可能です。ただ、スクリプトの挿入位置などに気を使う必要があって、上記手順よりも設置が面倒になります。

JUGEMTIMESは利用する画像パーツなどを柔軟にカスタマイズできるようにしています。JUGEMTIMESで利用されている画像は4点です。

• 「JUGEMTIMES」とタイトルが表示されているヘッダパーツ(幅200ピクセル、高さ10ピクセル)
• 「0〜12〜0」と時刻が表示されているフッタパーツ(幅200ピクセル、高さ8ピクセル)
• ブログが投稿された時刻を表示するパーツ(幅1ピクセル、高さ10ピクセル)
• ブログが投稿されていない時刻を表示するパーツ(幅1ピクセル、高さ10ピクセル)

このうち、ヘッダパーツとフッタパーツはイメージタグ(と改行タグ)も含めて記述、本体パーツはイメージのURLだけ記述します。

実際に当ページで利用しているパーツを個別に表示すると、以下の通りです。

• (ヘッダパーツ)
• (フッタパーツ)
• (本体1)
• (本体2)

ブログが投稿された時刻を表示するパーツ(本体1)は何もないように見えると思いますが、これは透明なgifファイルを利用しています。

JUGEMTIMES本体の幅を200ピクセルとしているので、ヘッダパーツもフッタパーツも200ピクセルのものを用意しています。200ピクセルよりも大きな幅や小さな幅にすることも可能です。

  this.width = 200; /* JUGEMTIMESの幅 */
  this.height = 10; /* JUGEMTIMESの高さ */

が本体部分の幅と高さになりますので、用意されたイメージに応じて変更してください。

なお、ここで紹介しているJUGEMTIMES用のイメージファイルはご自由にお使いいただいて結構です。

ちなみにJUGEMTIMESの各種設定は

function settingJugemTimes() { // JUGEMTIMES設定
  // フラグ設定
  this.flag_link = true; /* リンク設定 true:時刻でリンクしない false:リンクはそのまま */
  this.flag_text = true; /* 時刻表示 true:24時間表記 false:そのまま */
  this.flag_disp = true; /* JUGEMTIMES表示 true:表示する false:表示しない */
  // 要素設定
  this.time_tag = 'span'; /* 時刻表示に利用しているタグ */
  this.time_cls = 'time'; /* 時刻表示に利用しているクラス名 */
  this.times_id = 'jugemtimes'; /* JUGEMTIMESを表示するid名 */
  // イメージ設定
  this.width = 200; /* JUGEMTIMESの幅 */
  this.height = 10; /* JUGEMTIMESの高さ */
  this.exist = 'http://simpleboxes.jugem.cc/?image=40'; /* 投稿時刻を表示するパーツ */
  this.none = 'http://simpleboxes.jugem.cc/?image=34'; /* 投稿がない時刻を表示するパーツ */
  this.header = '<img src="http://simpleboxes.jugem.cc/?image=39" alt="" width="200" height="10" /><br />'; /* ヘッダパーツ */
  this.footer = '<br /><img src="http://simpleboxes.jugem.cc/?image=36" alt="" width="200" height="8" />'; /* フッタパーツ */
  return this;
}

で行っています。各設定の横にコメントしておきましたので、それを参考にして、お使いの環境に合わせて適時設定してください。

以上でJUGEMTIMESの説明は終わりです。設置難易度は若干高めになるかと思います。しかも面倒な割りにはあまり大きな意味があるとも思えない部分がちょっと困り者です。

以下、余談。

ご覧いただければ一目瞭然だと思うのですが、本体部分は小さい画像を敷き詰めるようにして表示しているだけです。上記スクリプトだと幅が200ピクセルなので200個のイメージを敷き詰めています。

本当は連続した部分はイメージ幅を変えるようにして表示させたかったのですが、試しに表示させてみたら想像以上に軽かったので、そのままにしちゃいました。