2005年12月25日

メニューのプルダウン化（MovableType）

今回は、MovableTypeのメニューをプルダウンにするカスタマイズ方法について説明します。

ブログを長期間運営しますと、月別アーカイブやカテゴリなどが増えてきます。特に、月別アーカイブをサイドバーに表示させている場合は、月が替わるごとに縦長になっていきますね。

そこで、縦長に表示されている月別アーカイブやカテゴリのメニューをプルダウンにして、すっきりさせる方法を説明します。当ブログでも月別アーカイブは、サイドメニューでプルダウン化していますので、実物を見て参考にしてくださいね。

カスタマイズ方法（MovableType編）

■ HTMLの編集

１． javascriptを追加
まず、<head>～</head>内に下記のスクリプトを追加します。
※スクリプトの追加は、<body>内でも構いませんが、呼び出し部分よりも前に追加します。

※ javascriptの外部ファイル化
javascriptを多用される方は、外部ファイル化しておくと便利です。

１．javascriptファイルの作成
テキストエディタで下記の内容をコピーし、「script.js」というファイル名で保存します。
※ファイル名はjs拡張子以外の部分は別名でも構いません。（xxx.js）

//プルダウンメニュー
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

2．javascriptファイルのアップロード
「script.js」をftpソフト等でサーバーにアップロードします。

3．htmlの編集
<head>～</head>内に下記を追加します。

※スクリプトURLは、「script.js」をアップロードしたURLを絶対パスで記載します。

2． formタグの追加
次に、プルダウン化したい部分に、下記のようにformタグを追加します。

<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option selected>【年月を選択】</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>">
<$MTArchiveTitle$> (<$MTArchiveCount$>)</option></MTArchiveList>
</select>
</form>

<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,0)">
<option selected>【カテゴリを選択】</option>
<MTCategories show_empty="1">
<option value="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>[<$MTCategoryCount$>]</option>
</MTCategories>
</select>
</form>

■ CSS（スタイルシート）の編集
プルダウン化した部分をカスタマイズするには、スタイルシートを編集します。

form {
margin:xxpx;
padding:xxpx;
}

select {
width:xxpx;
font-size:xxpx;
}

xx部分に数値を入れて、調整してください。

以上、「メニューのプルダウン化」について説明しました。

参考になりましたら、応援お願いします。