Movable Typeの改造vol.4 プルダウンメニューを組み込む

月別のアーカイブも1年分表示させていたら、サイドバーを下の方まで占拠してしまう形になるので、以前から、いろいろと検討していました。Movable Type ブログテンプレート&デザインガイドを読んでいて、毎月増える月別のアーカイブをプルダウンメニューとしてリンクするように変更しました。

これは、このブログから日付的な感覚を減らす効果も期待しています。

プルダウンのスクリプト

これは、インデックステンプレートを新規に追加で作成します。こちらにソースも記載しているので、興味のある方は、お試しくださいね。

名前→プルダウンメニュー

ファイル名→menu.js

内容

----ここから----

function menujs(){
var URL = document.menu.menuitem.options[document.menu.menuitem.selectedIndex].value;
if (URL != "none") {
window.location.href = URL
}
}

----ここまで----

ファイルを保存したら、このテンプレートを再構築します。

テンプレートへの記述

月別のアーカイブを表示させるテンプレートは、インデックス、月別テンプレ、個別ページの3カ所に設置し、それぞれの表示場所に既存の表示用タグを削除して、以下のソースと置き換えました。

----ここから----

<script type="text/javascript" src="<$MTBlogURL$>menu.js"></script>

<form id="menu" name="menu">
<select id="menuitem" name="menuitem" onChange="menujs()">
<option value="none">選択してください</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>

</select>
</form>

----ここまで----

<テンプレートを全部保存し終わったら、サイトの再構築を全てのテンプレートで行い、設置完了です。/p>

月別のアーカイブで、スペースを省略できるので、サイドバーの片側だけでメニュー関係を全て収めています。

ブログの場合、サイドバーのナビゲーション部分は、いろいろなものを置きたくなるので、こういったパーツを利用することで少しでもまとまればと思います。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)