Movable Type 備忘録

アーカイブリストをプルダウンにしてみる

Mar012006
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, MovableType, Sidebar

Next Page: TypeKeyを使ったコメント・スパム対策
Prev Page: 新規エントリに「NEW」イメージを期間表示させる

いろんなブログで、月別アーカイブなどをプルダウンにしているのを見たことあると思いますが、省スペースで多数のリストを取り込むことができるので便利ですよね。

今回はアーカイブリストをプルダウン化してみたいと思います。

アーカイブリストをプルダウンにするには、JAVAスクリプトを使用します。

カスタマイズ方法

とりあえず、ここでは月別アーカイブリストのプルダウン化を例にして説明します。

まず、以下のJAVAスクリプトをコピペして、directURL.js というファイル名で保存してください。

function directURL(URL){
  if(URL!=""){
    window.location.href=URL;
  }
}

保存しましたら、サーバーにアップロードします。アップロード先は自分の環境に合わせて好きなとこに保存してください。

次に、月別アーカイブを表示しているコードを以下のように変更します。

変更前
<MTArchiveList archive_type="Monthly">
   <MTArchiveListHeader><ul></MTArchiveListHeader>
      <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
   <MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
変更後
<script type="text/javascript" src="<$MTBlogURL$>directURL.js" charset="<$MTPublishCharset$>"></script>
<form name="Monthly" action="">
    <select onchange="directURL(this.options[this.selectedIndex].value)">
      <option value="" selected="selected">月別アーカイブ</option>
<MTArchiveList archive_type="Monthly">
        <option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
      </MTArchiveList>
</select>
</form>

青い字の部分は、先ほどアップロードしたJAVAスクリプトの場所を指定します。自分の環境に合わせて変更してください。

以上で月別アーカイブリストのプルダウン化ができました。
ちなみに、赤い字の部分を差し替えることで他のアーカイブリストもプルダウン化することができます。