エントリー関連のカテゴリやら月別やらをプルダウンメニューにしてみました。メニューの折りたたみを行ってサイドバーの冗長化は回避してるんですが、それじゃぁ、直感的にわかりにくいかと思いまして。

でググッて探してみたらありました。
Magic White さんのところの プルダウンメニュー というエントリー。(笑)
いつもお世話になっており、トラバっているのでたまには違う所で・・・と思ってたのに。
Magic White さん、すんません。(笑)

上記エントリー経由で、hwp blog さんの プルダウンメニュー というエントリーを参考にさせていただきました。ありがとうございました。

オリジナルとはほんの若干下記の通り変更して使ってます。

・スクリプトを外部ファイル化して呼び出ししてます。(鯖が使用できる環境の方のみ。自鯖が無い方はオリジナルの方法で。)

・月別、カテゴリ別記事一覧が出るようにしています。

・Master Archive Index をきちんと作りこんでいないので、全ての記録は割愛してあります。

以下、覚書としてメモメモ。


まずはスクリプトの外部ファイル化です。
適当なテキストエディタを開いて、下記スクリプトのソースをコピペ。

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location=’"+selObj.options[selObj.selectedIndex].value+"’");
if (restore) selObj.selectedIndex=0;
}

適当なファイル名(私の場合は pulldown.js としました)で保存し、自鯖にアップロードします。

次に、必要なテンプレートの<body>~</body>間にそいつを呼び出す記述を書き込みます。

<!– Pulldown開始 –>
<script type="text/javascript" src="http://自分がスクリプトをおいた場所/pulldown.js"></script>
<!– Pulldown終了 –>

これで外部スクリプトを読み込む設定ができました。

続いて、プルダウンメニュー化したいところに下記ソースを貼り付けます。
カテゴリ表示制御のプラグインを使用しているので、青字部分はオリジナルより追加してます。利用される方は適宜変更してください。

▽カテゴリ別記事

<!–Category –>
<form name="pulldown_category">
<select name="menu" onChange="MM_jumpMenu(‘parent’,this,0)">
<option value="自分のブログのurl"selected>【カテゴリー別記事】 </option>
<MTCategories show_empty="1">
<MTFilterCategories exclude="99.このブログについて。">
<option value="<$MTCategoryArchiveLink$>">
・<$MTCategoryLabel$>[<$MTCategoryCount$>]</option>
</MTFilterCategories>
</MTCategories>
</select>
</form>

▽最近の記事(※オリジナルには無いので作りました)

<– 最近の記事 –>
<form name="pulldown_entry">
<select name="menu" onChange="MM_jumpMenu(‘parent’,this,0)">
<option value="自分のブログのurl"selected>【最近の記事】 </option>
<MTCatEntries lastn="10" exclude="10.Weeklyヘビーローテ♪,11.読まずに死ねるか!,12.この人を見よ。,13.モブログ">
<option value="<$MTEntryPermalink$>">
・<$MTEntryTitle$></option>
</MTCatEntries>
</select>
</form>

▽月別記事

<!–Monthly –>
<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu(‘parent’,this,0)">
<option value="自分のブログのurl" selected>【月別記事】 </option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>">
・<$MTArchiveTitle$></option></MTArchiveList>
</select>
</form>

▽全ての記録

<!–Archives.html Link –>
<form name="pulldown_all">
<select name="menu"onChange="MM_jumpMenu(‘parent’,this,0)">
<option value="archives.html"selected>【すべての記録】 </option>
<option value="archives.html">すべての記録</option>
</select>
</form>

▽Category 及び、Date-Based Archive 表示時の記事一覧表示(オリジナルにはありません。)

<!–最近の記事 –>
<form name="pulldown_entry">
<select name="menu" onChange="MM_jumpMenu(‘parent’,this,0)">
<option value="自分のブログのurl"selected>【list of "<$MTArchiveTitle$>】 </option>
<MTEntries>
<option value="<$MTEntryPermalink$>">
・<$MTEntryTitle$></option>
</MTEntries>
</select>
</form>

以上。

追記:
CSSの設定書くの忘れてました。(笑)
こいつをやっとかないと、プルダウンボックスの幅がタイトルの一番長い幅で設定されてしまうので、サイドメニューからはみ出してしまいますよー。

form {
margin:0px;
padding-bottom:5px;
}

select {
width:100%;
font-family: Verdana, Arial, sans-serif, "Osaka", "ヒラギノ角ゴ Pro W3", "MS P ゴシック", ;
color:#666666;
font-size:10px;
}

んで、私の場合、MTPaginate プラグインを使用してメインインデックスのページ表示も出してるんですけど、どうもCSSに設定した form が効いてしまってページいっぱいいっぱいまでページ表示用のプルダウンが広がってしまいました。とりあえず、tebleタグを使用してそいつのレイアウトを設定しなおしました。
もっとうまいやり方があるんでしょうけど、まぁこれでも良いか。(苦笑)