過去ログをコンボボックス化

長くブログを続ければ縦長になってしまう過去ログ（月別アーカイブ）を
すっきりさせるコンボボックス（プルダウンメニュー）化のカスタマイズ。
Seesaa用と言って良いかも。

マイ・ブログ > デザイン > コンテンツ > 過去ログ、と進んで、
右上の「コンテンツHTML編集」に進む。

デフォルト

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<a href="/archives/<% archives.createstamp | date_format("%Y%m") %>.html"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ | echo('0') %>)<br />
<% /if -%>
<% /loop -%>
<% content.footer -%>
</div>

上のデフォルトから下のどちらかお好みのほうに変更。
まるまるコピペしたら良い。
両方同時に表示させることも可能だから
まず試してみるといい。
ボタンなしですぐ移動できるほうが便利かな？

GOボタンあり

<script type="text/javascript">
<!--
function ChangeArchive (sel) {
if (sel.options[sel.selectedIndex].value != "") {
location.href = sel.options[sel.selectedIndex].value;
}
}
-->
</script>
<div class="sidetitle"><% content.title %></div>
<div class="side">
<script type="text/javascript"><!--
function MonthGo(){
mySelect = document.myForm.MonthArchives.selectedIndex;
location.href = document.myForm.MonthArchives.options[mySelect].value;
}
// --></script>
<form method="get" action="?" name="myForm" id="myForm">
<select name="MonthArchives">
<option value="">--------</option>
<% content.header -%>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<option value="/archives/<% archives.createstamp | date_format("%Y%m") %>.html"><% archives.createstamp | date_format("%Y年%m月") %>(<% archives.count | __or__ | echo('0') %>)</option>
<% /if -%>
<% /loop -%>
</select>
<input type="button" value="GO!" onclick="MonthGo()" />
</form>
<% content.footer -%>
</div>

GOボタンなし

<script type="text/javascript">
<!--
function ChangeArchive (sel) {
if (sel.options[sel.selectedIndex].value != "") {
location.href = sel.options[sel.selectedIndex].value;
}
}
-->
</script>
<div class="sidetitle"><% content.title %></div>
<div class="side">
<form method="get" action="">
<select name="MonthArchive" onchange="ChangeArchive(this)" class="archiveselect">
<option value="">--------</option>
<% content.header -%>
<% loop:list_archives -%>
<% if:archives.article_count -%>
<option value="/archives/<% archives.createstamp | date_format("%Y%m") %>.html"><% archives.createstamp | date_format("%Y年%m月") %>(<% archives.count | __or__ | echo('0') %>)</option>
<% /if -%>
<% /loop -%>
</select>
</form>
<% content.footer -%>
</div>

JavaScript有効の場合の移動機能なので無効だと機能しない。
そういう人のために、ボタンあり・なしの一番下の
</form>
ここ
<% content.footer -%>
に以下を記述しておけば無効の人も移動できる。
（そこまでする必要も無いかもしれないけどね）

<noscript>
JavaScript無効の設定ですね<br />
<% loop:list_archives -%>
<% if:archives.article_count -%>
<a href="/archives/<% archives.createstamp | date_format("%Y%m") %>.html"><% archives.createstamp | date_format("%Y年%m月") %></a>(<% archives.count | __or__ | echo('0') %>)<br />
<% /if -%>
<% /loop -%>
</div>
</noscript>

当方知識は無いので無駄な記述があるかも。

なお、
<div class="sidetitle"><% content.title %></div>
<div class="side">
</div>
の部分のみを削除すれば枠の無いシンプルな表示になる。

☆

こちらミニカスタマイズ 第２段 - 弱小エンジニアの小言の
ライブドア用のカスタマイズを参考に色々いじって、
IEではうまくいくもののOperaではどうもうまくいかず、
さらにいじってうまくいった。
でも過去ログの数が表示されず、なんとか表示させる方法は
ないものかと検索した時に行き着いたのが…

こちら。
http://www.petancodamon.com/article/12019259.html 404
2人はPETANCO-ペタンコ-: 過去ログをプルダウン表示にする
おお！　一発でうまくいった！
そして
ありふれた生活: 過去ログをプルダウン表示
こちらが紹介の本家。
ともにボタンなしの一発移動の方法を紹介されてますが、
オレは出来ればボタンありのほうが良かったのでさらにいじってみた。
そしてここで紹介してみた。
少し改造してますよ。

「ありふれた生活」さんは他に
カテゴリ「カスタマイズ」にて、
キーワードマッチのアフィリエイトリンクの変更方法も書かれている。
2005年8月の記事だ。
うちが書いたのは2006年3月26日の記事だった。
遅いぞ、オレ！（笑）
いやぁ、カスタマイズに関してウェブ検索する時は
「○○ site:seesaa.net」でする癖がついてるからヒットしないよ。
でも「ありふれた〜」さんも「2人は〜」さんもSeesaaブログのようで、
どうやら独自ドメインってやつかな。
ま、検索語で「プルダウン」は思いつかず、
ひたすら「コンボボックス」で検索してたから
それもヒットしなかった理由だ。

でもコンボボックスとは、
ブラウザのアドレス欄のようにテキストボックス＋プルダウンのことを
指すようで、今回の記事タイトルは厳密には間違っているようだ。

あ、そうそう、
「弱小エンジニア」さんのところの別の記事で知ったことだけど、
コンボボックス化させた後で上下に無駄にスペースが開く場合は
スタイルシートに以下を記述するといい。

form {
margin:0px;
padding:0px;
}

これで、うちの「記事検索」の上下のスペースが無くなってラッキー！