小粋空間  -  a cheap joke and a play on words site

ドラッグ＆ドロップできるサイドメニューの折りたたみ（その2：ブログへの適用）

その1では Docking boxes の基本的な設定方法を紹介しましたが、今回は当サイトの公開テンプレート（Movable Type/FC2ブログ）および Movable Type のデフォルトテンプレートに適用してみます。 他のブログサービスでも利用可能ですが、HTMLが編集可能・CSSファイル／JavaScriptファイル／画像ファイルがアップロード可能・HTMLにあるサイドバーの各サイドメニューが独立して編集できること、が条件です。

Movable Type の公開テンプレートおよびデフォルトテンプレートを利用したサンプルを作成しましたので、動作をご確認ください。

• サンプル１：Movable Type 公開テンプレート
• サンプル２：Movable Type デフォルトテンプレート

以下、カスタマイズ方法です。あわてて書いたため考慮もれ等あるかもしれません。説明通りに設定して正常に動作しない場合は適宜ご質問ください。

１．スクリプトのダウンロード

「ドラッグ＆ドロップできるサイドメニューの折りたたみ」の１項を参照ください。
なお dbx.css / dbx-key.js は本記事の４項および５項で指定したものをお使いください。

ダウンロードしたファイルは、Movabe Type の場合はメインページと同じディレクトリに、FC2ブログの場合は何も考えずにアップロードしてください（dbx.css は後述の画像ファイルをインクルードする関係で内容の修正が必要な場合があります）。

２．link 要素と script 要素の設定

アップロードした dbx.css / dbx.js / dbx-key.js をインクルードするための設定です。以下、各ブログでの設定内容を示します。

２．１ Movable Type の場合

<link rel="stylesheet" href="<$MTBlogURL$>dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="<$MTBlogURL$>dbx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dbx-key.js"></script>

２．２ FC2 ブログの場合

<link rel="stylesheet" href="<%url>file/dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="<%url>file/dbx.js"></script>
<script type="text/javascript" src="<%url>file/dbx-key.js"></script>

３．HTML の設定

ここでは公開テンプレート（Movable Type / FC2 ブログ）および Movable Type デフォルトテンプレートを用いたサンプル（「最近のエントリー」と「最近のコメント」に Docking boxes を適用）を紹介します。
dbx-content 部分のタグ構造は ul - li を利用していますが、CSS（dbx.css）の設定で他のタグも利用可能と思います。ご自身で色々試してみてください。

３．１ 公開テンプレートの場合

３．１．１ Movable Type

<div id="left" class="dbx-group">
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Entries</div>
  <ul class="dbx-content">
    <MTEntries lastn="10">
      <li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
    </MTEntries>
  </ul>
</div><!-- /dbx-box -->
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Comments</div>
  <ul class="dbx-content">
    <MTEntries lastn="5" recently_commented_on="5">
      <li><a href="<$MTEntryLink$>"><MTEntryTitle></a>
        <ul>
        <MTComments lastn="5">
        <li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
        </MTComments>
        </ul>
      </li>
    </MTEntries>
  </ul>
</div><!-- /dbx-box -->
 
</div><!-- /dbx-group -->

３．１．２ FC2 ブログ

<div id="left" class="dbx-group">
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Entries</div>
  <ul class="dbx-content">
<!--recent-->
    <li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> <span class="new"><%recent_year>:<%recent_month>:<%recent_day>:<%recent_hour>:<%recent_minute>:<%recent_second></span></li>
<!--/recent-->
  </ul>
</div><!-- /dbx-box -->
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Comments</div>
  <ul class="dbx-content">
<!--rcomment-->
    <li><%rcomment_etitle><br />└<a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li>
<!--/rcomment-->
  </ul>
</div><!-- /dbx-box -->
 
</div><!-- /dbx-group -->

３．２ Movable Type デフォルトテンプレートの場合

デフォルトの2カラムレイアウトの適用部分をまとめて示します。

　　　：
<div id="beta">
   <div id="beta-inner" class="pkg">
      <div class="module-search module">
         <h2 class="module-header">検索</h2>
         <div class="module-content">
            <form method="get" action="http://10.133.83.54/blog/MT-3.32-ja/mt-search.cgi">
               <input type="hidden" name="IncludeBlogs" value="1" />
               <label for="search" accesskey="4">ブログを検索: </label><br />
               <input id="search" name="search" size="20" />
               <input type="submit" value="検索" />
            </form>
         </div>
      </div>
      
   <div id="right" class="dbx-group">
      <div class="dbx-box">
         <div class="module-archives module">
            <div class="dbx-handle"><h2 class="module-header">最近のエントリー</h2></div>
            <ul class="dbx-content">
            <MTEntries lastn="10">
               <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
            </MTEntries>
            <li style="margin-left:-17px;list-style-type:none;"><a href="http://10.133.83.54/blog/MT-3.32-ja/atom.xml">このブログのフィードを取得</a><br />
            [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]</li>
            </ul>
         </div>
      </div><!-- /dbx-box -->
 
      <MTIfArchiveTypeEnabled archive_type="Category">
      <div class="dbx-box">
         <div class="module-categories module">
            <div class="dbx-handle"><h2 class="module-header">カテゴリー</h2></div>
            <MTTopLevelCategories>
            <MTSubCatIsFirst><ul class="dbx-content"></MTSubCatIsFirst>
               <MTIfNonZero tag="MTCategoryCount">
               <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
               <MTElse>
               <li class="module-list-item"><MTCategoryLabel>
               </MTElse>
               </MTIfNonZero>
                  <MTSubCatsRecurse>
               </li>
            <MTSubCatIsLast></ul></MTSubCatIsLast>
            </MTTopLevelCategories>
         </div>
      </div><!-- /dbx-box -->
      </MTIfArchiveTypeEnabled>
 
      <MTIfArchiveTypeEnabled archive_type="Monthly">
      <div class="dbx-box">
         <div class="module-archives module">
            <div class="dbx-handle"><h2 class="module-header"><a href="http://10.133.83.54/blog/MT-3.32-ja/archives.html">アーカイブ</a></h2></div>
               <MTArchiveList archive_type="Monthly">
                  <MTArchiveListHeader><ul class="dbx-content"></MTArchiveListHeader>
                     <li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
                  <MTArchiveListFooter></ul></MTArchiveListFooter>
               </MTArchiveList>
            </div>
         </div>
      </div><!-- /dbx-box -->
      </MTIfArchiveTypeEnabled>
   </div><!-- /dbx-group -->
　　　：

４．CSS の設定

下記のリンクよりそれぞれの dbx.css をダウンロードしてお使いください。

• Movable Type デフォルトテンプレート用
• 公開テンプレート用

公開テンプレートは styles-site.css の下記の部分を変更しています（赤色を削除・青色を追加）。

/* 順序なしリスト */
ul, ol {
    padding-left: 16px;
}
ul li {
    list-style-type: none;
    padding-left: 10px;
    background: url(images/lmark.gif) no-repeat 1px 0.5em;
}

５．JavaScript の設定

下記のリンクよりそれぞれの dbx-key.js をダウンロードしてお使いください。

• Movable Type デフォルトテンプレート用
• 公開テンプレート用

基本的に配布サイトの dbx-key.js でも構いませんが、コンテナIDの部分が３項で設定したHTMLタグの id 属性値と一致するようにしてください（詳細は「その1」の５項参照）。

６．折りたたみマークの設定

サンプルで使っているものを配布しますので、よければご利用ください。
下記の折りたたみマーク画像を右クリックして「名前をつけて画像を保存」を選択するとダウンロードできます。

デフォルトテンプレート用

公開テンプレート用

ダウンロードした画像ファイルは適宜アップロードしてください。サンプルでは Movable Type のディレクトリを想定して、mt-static/images 配下にアップロードしています。FC2はファイルのアップロード機能を利用してください。

アップロードしたパスは、 dbx.css の a.dbx-toggle セレクタの background 属性（青色）

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
    display:block;
    width:20px;
    height:20px;
    overflow:hidden;
    background:url(mt-static/images/toggle.gif) no-repeat;
    position:absolute;
    top:0px;
    right:0;
    text-indent:-50px;
    text-decoration:none;
    }

に反映する必要があります。

パスはアップロードするディレクトリによって適宜変更してください。また上記の設定例では dbx.css と異なるディレクトリに配置されているページからは画像を表示することができませんので、パスは URL で指定してください。
FC2ブログの場合も同様です。