月別アーカイブのプラグインを年ごとに開閉表示する [livedoor Blog カスタマイズ]

共通テーマ：

ライブドアブログのカスタマイズ テーマに参加中！

Bloggerのブログを見ていたら、サイドバーの月別アーカイブが年ごとに開閉できて、月ごとに記事タイトル一覧も開閉できるようになっていました。

livedoorでは月別アーカイブ・プラグインに記事タイトルは出てこないので、年ごとの開閉だけでもlivedoor Blogで実現してみようと思います。

長く続けているブログで「縦長になってしまったプラグインをスッキリさせたいけど、プルダウンメニューは嫌」という方におすすめです。

ソースコード

JavaScriptのソースコードです。

<script type="text/javascript">
//<![CDATA[
(function() {
  var pluginName = 'Archives';  /* ←月別アーカイブのプラグイン名に変更してください */
  var el = document.getElementsByTagName('div');
  for(var i = 0; i < el.length; i++) {
    if(el[i].className == 'sidetitle') {
      if(el[i].firstChild.nodeValue == pluginName) {
        var elTa = el[i + 2];
        var elA = elTa.getElementsByTagName('a');
        var elUl = document.createElement('ul');
        var year, mon, yfg = {}, elLi, elUc, elAc, elSc, t;
        elUl.className = 'archive-year-ul';
        for(var j = 0; j < elA.length; j++) {
          t = elA[j].firstChild;
          year = t.nodeValue.match(/\d{4}/);
          mon = t.nodeValue.match(/\w+/);
          t.nodeValue = mon;
          if(!yfg[year]) {
            yfg[year] = true;
            elUl.appendChild(elLi = document.createElement('li'));
            elLi.appendChild(elAc = document.createElement('a'));
            elLi.appendChild(elSc = document.createElement('span'));
            elSc.appendChild(document.createTextNode(year));
            elLi.appendChild(elUc = document.createElement('ul'));
            elAc.name = year;
            elAc.onclick = tog;
            elAc.className = 'toggle-button button-open';
//          elAc.href = 'javascript:void(0)';
            elLi.className = 'archive-year-li';
            elUc.className = 'archive-month-ul display-none';
          }
          var elLc = document.createElement('li');
          elLc.className = 'archive-month-li';
          elLc.appendChild(elA[j].cloneNode(true));
          elUc.appendChild(elLc);
        }
        elTa.innerHTML = '';
        elTa.appendChild(elUl);
        break;
      }
    }
  }

  function tog() {
    var el = this.nextSibling.nextSibling;
    this.className = this.className.replace(/button-(\w+)/, function(a, b) {
      var c;
      if(b == 'open') {
        c = 'close';
        el.className = el.className.replace('display-none', '');
      } else {
        c = 'open'
        el.className += ' display-none';
      }
      return 'button-' + c; 
    });
  }
})();
//]]>
</script>

「elAc.href = 'javascript:void(0)';」の行がコメントアウトになっています。このままだとIE6ではボタンのマウスオーバーで色が変わりません（aタグにhref属性がないとCSSでIE6のhoverが効かないことに由来します）。コメントアウトを外すと効くようになります。IE6だけだし、たかだかマウスオーバーで色を変えるだけだし、そのためだけにvoid(0)を入れるのも癪なのでこうしました。お好みで変えてください。

CSS

CSSの一例です。開閉ボタンの背景画像は直リンクでも構いませんが、DLして自分のブログにアップして背景指定のURLを変更した方が確実です。ボタンの色を変えたい場合もDLして、自分で編集した後、ブログにアップ、背景指定のURLを変更してください。

<style type="text/css">
/*<![CDATA[*/
div.side .toggle-button {
	display: block;
	margin: 0.3em 0.4em 0 0;
	float: left;
	height: 12px;
	width: 12px;
	padding: 0;
	overflow: hidden;
	background: url(http://livedoor.blogimg.jp/eeu/imgs/e/c/ecf1fe03.gif) 0 12px;
	cursor: pointer;
}
div.side a.button-open {
	background-position: 12px 0;
}
div.side a.button-open:hover {
	background-position: 12px 12px;
}
div.side a.button-close {
	background-position: 0 0;
}
div.side a.button-close:hover {
	background-position: 0 12px;
}
.display-none {
	display: none;
}
div.side ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
div.side ul.archive-year-ul {
	line-height: 1.4em;
	text-align: left;
}
div.side ul.archive-month-ul {
	margin-left: 2.5em;
	list-style-type: disc;
}
div.side li.archive-year-li {
	margin: 0.5em 0;
}
div.side li.archive-month-li {
}
/*]]>*/
</style>

設置のしかた

• まず月別アーカイブが「プルダウン形式」になっている場合は、「テキストリンク形式」に変更してください。
• 次にソースコード(JavaScriptとCSS)をフリーエリアに貼り付けます。
• 上の方に『月別アーカイブのタイトルに変更してください』と書いてある行がありますが、ここはプラグインのタイトルを各ブログで独自に設定している場合にのみ同名のものへ変更してください。プラグインの設定ページで確認してタイトルが空欄なら変更の必要はありません
• 改行を<br />に変換しない設定にして保存すると設置完了です。

その他雑文

なんとなくDOMで作りましたが、そこはさすがにDOMで結構冗長なコードになってしまいました。

こういうときはjQueryで作るとスッキリする思ってそっちでも作ってみたものの、以前のエントリー「月別アーカイブを開閉式にするテスト」と組み合わせてみたいという欲が出てきたので、今回は保留にしました。要望があれば今のまま公開します。