So-net無料ブログ作成
検索選択

So-net blog リニューアルでHTML編集/月別表示の改造,他 [ソネットブログさん:仕様?]

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

主なところは、

月別表示

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

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

HTML:

<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>

CSS:

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 では文字が重なってしまうので中止。

*:
<% … %> に同じようなデータを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 製品は「定期的なユーザ情報の収集」(範囲が曖昧)があるのでインストールは止めておく。


nice!(2)  コメント(0)  トラックバック(0) 
共通テーマ:blog

nice! 2

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。