So-net blog リニューアルでHTML編集／月別表示の改造，他

　リニューアルでサイドバーのHTMLを編集できるようになったらしいので、いろいろ編集してみた。

主なところは、

月別表示

<% … %> の仕様がよく分からないので、<% … %> に表を作成してもらい JavaScript で表示用に加工している(*)。

私のように１記事/月の場合は、手でリンクを追加しても良かったかもしれない（笑）。

ＨＴＭＬ：

<div class="sidebar" id="archive">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div id="alm_p_<% content.id %>" class="sidebar-body custom-body">
<% content.header -%>
<script type="text/javascript">

(function ()
{

var aaa = [
<% loop:list_archives -%><% if:archives.article_count -%>[<% archives.createstamp | date_format("%Y,'%m'") %>,<% archives.article_count | __or__ | echo('0') %>],
<% /if -%><% /loop -%>];

  if(! aaa.length) return;

  var dl = document.createElement('dl');
  dl.className = 'alm-c-dl';
  var dd;

  function flush() {
    var ori = 6;
    var i = dd.childNodes.length - 1;

    for( i -= (i%ori); i > 0; i -= ori) {
      var br = document.createElement('br');
      br.className = 'alm-c-br';
      dd.insertBefore(br, dd.childNodes[i]);
    }
    dl.appendChild(dd);
  }

  var oy = -1;

  for( var x in aaa) {

    var tx;
    var kako = aaa[x];

    var a = document.createElement('a');
    a.className = 'alm-c-a';
    a.href = '<% blog.page_url %>archive/'+kako[0]+kako[1]+'-1';
    a.title = '記事数 ' + kako[2]; 

    tx = document.createTextNode(Number(kako[1])+'月');
    a.appendChild(tx);

    if(kako[0]!=oy){
      oy=kako[0];

      if(dd) flush();

      tx = document.createTextNode(oy+'年');
      var dt = document.createElement('dt');
      dt.className = 'alm-c-dt';
      dt.appendChild(tx);
      dl.appendChild(dt);

      dd = document.createElement('dd');
      dd.className = 'alm-c-dd';
      dd.appendChild(a);

      continue;
    }

    dd.insertBefore(a, dd.firstChild);

  }
  flush();

  var doko = document.getElementById('alm_p_<% content.id %>');
  doko.appendChild(dl);

})();

</script>
<div class="alm-c-end"></div>
<noscript><ul>
<% loop:list_archives -%><% if:archives.article_count -%><li><a href="<% archives.page_url %>"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ | echo('0') %>)</li><% /if -%>
<% /loop -%></ul></noscript>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>

ＣＳＳ：

dl.alm-c-dl, dt.alm-c-dt, dd.alm-c-dd, a.alm-c-a{
  border-style:none;
  margin:0;
  padding:0;
  font-size:10px;
  line-height:13px
}

dl.alm-c-dl{
  margin-top:12px;
  margin-bottom:16px
}

dt.alm-c-dt{
  clear:both
}

dd.alm-c-dd{
  margin-top:.4px;
  margin-left:4px;
  margin-bottom:24px
}

br.alm-c-br{
  clear:both
}

a.alm-c-a{
  display:block;
  width:26px;
  float:left;
  text-align:right
}

div.alm-c-end{
  border-style:none;
  margin:0;
  padding:0;
  clear:both
}

最新記事一覧

「...」で省略されていても、リンクにカーソルを当てるとお題が表示されるように、

<li><a href="…"><%…%></a></li>

に、

<li><a href="…" title="<% article.subject | html %>"><%…%></a></li>

というふうに、 title 属性を追加した。

タグクラウド

空白を含むタグは、

a._tag[href*="%20"]:before { content: '「' }
a._tag[href*="%20"]:after { content: '」' }

で、「Turbo C++」というふうに 「 」 を付けて表示させようとしたら、IE7 では機能しないし、Firefox 2 では文字が重なってしまうので中止。

*:

<% … %> に同じようなデータを２回も作成してもらうのもアレなので、noscript の内容から加工しようとも思ったが、IE7 は noscript が空になっているので止めた。

---

　Y*uT*be で "Ox*gene *3" 関連が著作権侵害のクレームでバッサリ削除されていた。"Oxy*ene 1*" は仕方ないとして、"Trib*te T* Emin*nt (Oxyg*ne Rememb*ranca)" まで削除されているのは何か解せなかった。

---

3月19日：

Windows 用 Safari 3.1 が出たらしい。 Apple 製品は「定期的なユーザ情報の収集」（範囲が曖昧）があるのでインストールは止めておく。

タグ： カスタマイズ JavaScript Safari 月別表示 So-net blog