てんぽ: スクリプト無しで月別アーカイブをドロップダウン化

前回の続き。

• ドロップダウン（プルダウン）メニューの長所・短所を考えると、月別アーカイブをドロップダウンメニューにするのはいいアイデアかもしれない。
• ただし、ページ移動をJavaScriptに依存するのはよくない。

以上2点を踏まえて、月別アーカイブをJavaScriptを使わないドロップダウンメニューにするカスタマイズです。

• ページ作成実践講座［９］　プルダウンメニューを使う

CGIを使いましょう

プルダウンメニューの隣に[GO]や[JUMP]や[移動]などといったボタンを置いておき、ボタンがクリックされると、選択項目に該当するURLがCGIに渡るようにしておきます。そうすれば、JavaScriptをOFFにしているユーザでも、プルダウンメニューを使って移動することができます。

しかし、FC2ブログではCGIをアップロードできません。ではどうするかというと……。ヒントはブログ内検索にありました。

ブログ内検索のHTML

<form action="./" method="get">
<p>
<input name="q" size="15" value="検索語を入力して下さい" type="text" />
<input value="検索" type="submit" />
</p>
</form>

name属性の値がqであるinput要素のvalueの値を送信すると、「?q=検索語」というクエリー文字列のついたURLの検索画面になります。

われわれ（誰？）は、かつて、月別アーカイブ画面のURLが現在の「blog-date-YYYYMM.html」ではなく、「?date=YYYYMM」だったことを知っています。そしてこのURLは現在でも有効です。

つまり、name属性にdateを、value属性にYYYYMMを使えば、月別アーカイブ画面に移行できるのでは？というわけです。

月別アーカイブのドロップダウンメニュー

<form action="./" method="get">
<p>
<select name="date">
<!--archive-->
<option value="<%archive_year><%archive_month>"><%archive_year>-<%archive_month>（<%archive_count>）</option>
<!--/archive-->
</select>
<input type="submit" value="Go" />
</p>
</form>

このように、name属性の値を「date」にして、「年月」とともに送信してやれば、その月の月別アーカイブ画面を返してくれるようです。 ただし、当然、URLはblog-date-YYYYMM.htmlではなく、?date=YYYYMM形式になります。

ページ移動するにはボタンを押さなければなりませんが、それが嫌なら JavaScriptが有効な環境ではボタンが必要でなくなるように、JavaScriptを使って書き換えてやればいいでしょう（誰かが作ってくれそうです）。

同様に、name属性を「cat」にしてカテゴリ番号を送信すれば、カテゴリ別アーカイブのドロップダウンメニュー化もできると思いますが、 残念ながらカテゴリ番号を取得する変数は今のところ用意されていません。まぁ、ドロップダウンメニューとの相性を考えれば、月別アーカイブだけで充分でしょう。