小粋空間: 月別アーカイブアーカイブ

Top ＞ Movable Type ＞カスタマイズ＞月別アーカイブ [全て開く]

2010年1月25日

月別アーカイブリストの年別表示（ダイナミックパブリッシング対応：年・月を昇順に表示）

January 25,2010 1:11 AM
Tag：[]
Permalink

Movable Type の「月別アーカイブリスト」のダイナミックパブリッシング対応版です。

「月別アーカイブリストの年別表示（ダイナミックパブリッシング対応）」では、年・月を降順に表示するパターンしか掲載していませんでしたが、今回は昇順に表示するパターンも作りました。

ダイナミックパブリッシング対応：年・月を昇順に表示

デフォルトテンプレート用の「月別アーカイブリスト」は次の通りです。

<mt:ifArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly" sort_order="ascend">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
  <div class="widget-content">
    <ul>
      <li><mt:ArchiveDate format="%Y年" />
        <ul>
    </mt:ArchiveListHeader>
    <mt:ArchiveDate format="%Y年" setvar="current_year" />
    <mt:if tag="ArchivePrevious">
        <mt:ArchivePrevious><mt:ArchiveDate format="%Y年" setvar="prev_year" /></mt:ArchivePrevious>
    </mt:if>
    <mt:if name="prev_year">
      <mt:if name="current_year" ne="$prev_year">
        </ul>
      </li>
      <li><mt:GetVar name="current_year" />
        <ul>
      </mt:if>
    </mt:if>
          <li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle regex_replace="/\d+&#24180;/",""$> (<$mt:ArchiveCount$>)</a></li>
    <mt:ArchiveListFooter>
        </ul>
      </li>
    </ul>
  </div>
</div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</mt:ifArchiveTypeEnabled>

Comments [0] | Trackbacks [0]

2010年1月19日

月別アーカイブリストの年別表示（ダイナミックパブリッシング対応）

January 19,2010 1:55 AM
Tag：[Customize, Monthly, MovableType]
Permalink

Movable Type 4 以降で、月別アーカイブリストの年別表示を行なうカスタマイズです。

以前エントリーした「月別アーカイブリストの年別表示」では、ダイナミックパブリッシングでは正常に動作しなかったため、サブテンプレートに修正を加えました。

デフォルトテンプレート用の月別アーカイブリストは次の通りです。

<mt:ifArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><mt:ArchiveTypeLabel /> <a href="<mt:Link template="archive_index" />">アーカイブ</a></h3>
  <div class="widget-content">
    <ul>
      <li><mt:ArchiveDate format="%Y&#24180;" />
        <ul>
      <mt:ArchiveDate format="%Y&#24180;" setvar="year" />
    </mt:ArchiveListHeader>
    <mt:if tag="archivePrevious">
        <mt:ArchivePrevious><mt:ArchiveDate format="%Y&#24180;" setvar="prev_year" /></mt:ArchivePrevious>
    </mt:if>
    <mt:ArchiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if tag="archiveNext">
        <mt:ArchiveNext><mt:ArchiveDate format="%Y&#24180;" setvar="next_year" /></mt:ArchiveNext>
    </mt:if>
 
    <mt:if name="next_year">
      <mt:if name="current_year" ne="$next_year">
        </ul>
      </li>
      <li><mt:GetVar name="current_year" />
        <ul>
      </mt:if>
    </mt:if>
          <li><a href="<mt:ArchiveLink />"><mt:ArchiveTitle regex_replace="/\d+&#24180;/","" /> (<mt:ArchiveCount />)</a></li>
    <mt:ArchiveListFooter>
        </ul>
      </li>
    </ul>
  </div>
</div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</mt:ifArchiveTypeEnabled>

参考サイトは下記です。ありがとうございました。

La Petite Note - MT4 月別アーカイブリストの年別表示: ダイナミック対応版

Comments [0] | Trackbacks [0]

2009年6月15日

月別アーカイブリストの年別表示（ツリー化＋折りたたみ）

June 15,2009 12:03 AM
Tag：[Customize, Folding, Monthly, MovableType, Tree]
Permalink

Movable Type の「月別アーカイブリストの年別表示」に、ツリー化および年別の折りたたみを加えるカスタマイズです。このカスタマイズにはプラグインを使いません。

公開テンプレート（変更前）

公開テンプレート（変更後・折りたたんだ状態）

公開テンプレート（変更後・開いた状態）

デフォルトテンプレート（変更前）

デフォルトテンプレート（変更後・折りたたんだ状態）

デフォルトテンプレート（変更後・開いた状態）

このエントリーは「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」を改良したものです。

このカスタマイズは、Movable Type 4.1以降で有効です。

以下、カスタマイズ手順を紹介します。

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

下記のリンクより menufolder.js をダウンロードしてください。

download

２．スクリプトのアップロード

menufolder.js を、ブログのメインページ（index.html）と同じディレクトリにアップロードします。

３．テンプレートモジュールの修正（script タグ追加）

テンプレートモジュールに下記の script 要素を追加します。利用しているテンプレートによって追加するテンプレートモジュールが次のように異なりますので注意してください。

公開テンプレート：「ヘッダー」テンプレートモジュールの</head> の直前
デフォルトテンプレート（4.1x）：「ヘッダー」テンプレートモジュールの </head> の直前
デフォルトテンプレート（4.2x）：「HTMLヘッダー」テンプレートモジュールの <$mt:CCLicenseRDF$> の直前

<script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script>

４．ツリー画像のダウンロード・アップロード

下記のツリー画像をダウンロードしてください。画像は、実線表示用（solid）・点線表示用（dotted）の2種類を用意していますので、お好きな方をダウンロードしてください。

実線表示用：tree_lst_solid.gif / tree_end_solid.gif

点線表示用：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ダウンロードした画像ファイルのファイル名をそれぞれ、

tree_lst.gif

tree_end.gif

に変更し、ブログのメインページ（index.html）と同じディレクトリにアップロードします。

５．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定

ブログ管理画面の「デザイン」→「ウィジェット」で「月別アーカイブ」を下記の内容に入れ替えてください。

５．１公開テンプレート

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">Monthly Archives</dt>
<dd class="side">
  <mt:archiveList archive_type="Monthly" sort_order="descend">
    <mt:archiveListHeader>
  <ul>
    <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:archiveDate format="%Y&#24180;" /></span></div>
      <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
    </mt:archiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
        <li class="tree tree_end"><mt:getVar name="month_title" /></li>
      </ul>
    </li>
    <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:getVar name="current_year" /></span></div>
      <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:setVarBlock name="monthly_fold_script" prepend="1">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
      </mt:setVarBlock>
    <mt:else>
      <mt:unless name="__first__">
        <li class="tree"><mt:getVar name="month_title" /></li>
      </mt:unless>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
    <mt:setVarBlock name="month_title">
      <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /></a> [<mt:archiveCount />]
    </mt:setVarBlock>
    <mt:archiveListFooter>
        <li class="tree tree_end"><mt:getVar name="month_title" /></li>
      </ul>
    </li>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>

５．２デフォルトテンプレート（MT4.1x）

<mt:IfArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
  <div class="widget-content">
    <ul class="widget-list">
      <li class="widget-list-item"><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:archiveDate format="%Y&#24180;" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="widget-list tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
          <li class="widget-list-item tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
      <li class="widget-list-item"><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:getVar name="current_year" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="widget-list tree">
      <mt:setVarBlock name="monthly_fold_script" prepend="1">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
      </mt:setVarBlock>
    <mt:else>
      <mt:unless name="__first__">
          <li class="widget-list-item tree"><mt:getVar name="month_title" /></li>
      </mt:unless>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
    <mt:setVarBlock name="month_title">
      <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /> (<mt:archiveCount />)</a>
    </mt:setVarBlock>
    <mt:ArchiveListFooter>
          <li class="widget-list-item tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
    </ul>
  </div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</mt:IfArchiveTypeEnabled>

５．３デフォルトテンプレート（MT4.2x）

<mt:IfArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
  <div class="widget-content">
    <ul>
      <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:archiveDate format="%Y&#24180;" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
          <li class="tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
      <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:getVar name="current_year" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:setVarBlock name="monthly_fold_script" prepend="1">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
      </mt:setVarBlock>
    <mt:else>
      <mt:unless name="__first__">
          <li class="tree"><mt:getVar name="month_title" /></li>
      </mt:unless>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
    <mt:setVarBlock name="month_title">
      <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /> (<mt:archiveCount />)</a>
    </mt:setVarBlock>
    <mt:ArchiveListFooter>
          <li class="tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
    </ul>
  </div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</mt:IfArchiveTypeEnabled>

６．CSS

スタイルシートに以下の内容を追加してください。

ul.tree {
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0 0 0 10px;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 11px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

すべてを再構築をすれば、月別アーカイブのツリー化と折りたたみが行なえます。

７．ツリー化のみ行いたい場合

１～３項の作業を取り消してください。

８．折りたたみのみ行いたい場合

６項の作業を取り消してください。

Comments [8] | Trackbacks [1]

2009年6月 1日

月別アーカイブリストの年別表示

June 1,2009 1:55 AM
Tag：[Customize, Monthly, MovableType]
Permalink

Movable Type 4.1 以降で、ネイティブタグを使って月別アーカイブリストを年別に表示するカスタマイズです。

これまで、月別アーカイブリストを年別に分割して表示させるために、ArchiveDateHeader プラグインと ArchiveDateFooter プラグインを使った方法を紹介してきましたが、MT4.1 以降ではネイティブタグのみで表示することが可能になっています。

公開テンプレート（変更前）
月別アーカイブの年別表示（変更前）

公開テンプレート（変更後）
月別アーカイブの年別表示（変更後）

デフォルトテンプレート（変更前）
月別アーカイブの年別表示（変更前）

デフォルトテンプレート（変更後）
月別アーカイブの年別表示（変更後）

ここでは公開テンプレートとデフォルトテンプレートでのサブテンプレートを紹介します。ツリー化や折りたたみなどの付加機能は別エントリーしたいと思います。

１．公開テンプレート

ブログ管理画面の「デザイン」→「ウィジェット」で「月別アーカイブ」を下記の内容に入れ替えてください。

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">Monthly Archives</dt>
<dd class="side">
  <mt:archiveList archive_type="Monthly">
    <mt:archiveListHeader>
  <ul>
    <li><mt:archiveDate format="%Y&#24180;" />
      <ul>
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
    </mt:archiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
      </ul>
    </li>
    <li><mt:getVar name="current_year" />
      <ul>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
        <li><a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /></a> [<mt:archiveCount />]</li>
    <mt:archiveListFooter>
      </ul>
    </li>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
</mt:ifArchiveTypeEnabled>

２．デフォルトテンプレート（MT4.1）

ブログ管理画面の「デザイン」→「ウィジェット」で「月別アーカイブ」を下記の内容に入れ替えてください。

<mt:IfArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
  <div class="widget-content">
    <ul class="widget-list">
      <li class="widget-list-item"><mt:archiveDate format="%Y&#24180;" />
        <ul class="widget-list">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
        </ul>
      </li>
      <li class="widget-list-item"><mt:getVar name="current_year" />
        <ul class="widget-list">
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
          <li class="widget-list-item"><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle regex_replace="/\d+&#24180;/",""$> (<$mt:ArchiveCount$>)</a></li>
    <mt:ArchiveListFooter>
        </ul>
      </li>
    </ul>
  </div>
</div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</mt:IfArchiveTypeEnabled>

３．デフォルトテンプレート（MT4.2～）

ブログ管理画面の「デザイン」→「ウィジェット」で「月別アーカイブ」を下記の内容に入れ替えてください。

<mt:IfArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
  <div class="widget-content">
    <ul>
      <li><mt:archiveDate format="%Y&#24180;" />
        <ul>
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
        </ul>
      </li>
      <li><mt:getVar name="current_year" />
        <ul>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
          <li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle regex_replace="/\d+&#24180;/",""$> (<$mt:ArchiveCount$>)</a></li>
    <mt:ArchiveListFooter>
        </ul>
      </li>
    </ul>
  </div>
</div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</mt:IfArchiveTypeEnabled>

サブテンプレートの詳細については、「Movalbe Type 4.2 パーフェクトガイド」の「6.28 月別アーカイブ一覧に年別の見出しを表示する」をご覧ください。

Movable Type 4.2 パーフェクトガイド
荒木勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 1457

Amazonで詳しく見る by G-Tools

Comments [0] | Trackbacks [1]

2008年9月14日

年別アーカイブを利用した月別アーカイブの年別表示

September 14,2008 2:55 AM
Tag：[Customize, Monthly, MovableType, Yearly]
Permalink

Movable Type の年別アーカイブを利用した「月別アーカイブの年別表示」を紹介します。

月別アーカイブの年別表示

当ブログで紹介してきた「月別アーカイブの年別表示」では月別アーカイブ（とプラグイン）を利用したものに執着していましたが、年別アーカイブと月別アーカイブを組み合わせれば同様の表示が実現できます。

この方法のメリットは、プラグインを利用する必要がないことですが、デメリットとして、アーカイブテンプレートに対して、年別アーカイブのアーカイブマッピングの追加が必要です。年別アーカイブをアーカイブページとして使用しない場合は、再構築オプションの「公開」を手動にしておくと良いでしょう。

月別アーカイブの年別表示

１．基本形

次のサブテンプレートをサイドバーまたはウィジェットとして作成します。ここでは配布テンプレート用にアレンジしています。

MTArchiveList タグを入れ子にすることで、外側の MTArchiveList タグは年表示、内側の MTArchiveList タグは外側の MTArchiveList タグのコンテキストとなるため、特定の月のみを表示します。

<mt:ifArchiveTypeEnabled archive_type="Yearly">
<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
  <mt:archiveList archive_type="Yearly">
    <mt:archiveListHeader>
  <ul>
    </mt:archiveListHeader>
    <li><mt:archiveTitle />
    <mt:archiveList archive_type="Monthly">
      <mt:archiveListHeader>
      <ul>
      </mt:archiveListHeader>
        <li><a href="<mt:archiveLink />"><mt:archiveDate format="%B" cat="月" /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
      </ul>
      </mt:archiveListFooter>
    </mt:archiveList>
    </li>
    <mt:archiveListFooter>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
</mt:ifArchiveTypeEnabled>
</mt:ifArchiveTypeEnabled>

２．ツリー化 + 折りたたみ

１項のサブテンプレートにツリー化用の class 属性と年別用折りたたみのマークアップを追加したものです。

下記のサブテンプレートは「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」と組み合わせてお使いください。

<mt:ifArchiveTypeEnabled archive_type="Yearly">
<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
  <mt:archiveList archive_type="Yearly">
  <div id="archive<mt:archiveDate format="%Y" />name">
    <span><mt:archiveTitle /></span>
  </div>
    <mt:archiveList archive_type="Monthly">
      <mt:archiveListHeader>
  <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      </mt:archiveListHeader>
    <li class="tree<mt:archiveListFooter>_end</mt:archiveListFooter>"><a href="<mt:archiveLink />"><mt:archiveDate format="%B" cat="月" /></a> [<mt:archiveCount />]</li>
      <mt:archiveListFooter>
  </ul>
      </mt:archiveListFooter>
    </mt:archiveList>
  </mt:archiveList>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
<mt:archiveList archive_type="Yearly">
FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
</mt:archiveList>
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>
</mt:ifArchiveTypeEnabled>

３．参考・関連記事

この記事は下記のサイトを参考にさせていただきました。ありがとうございました。

４．その他

余談ですが、「Movable Type 4.2 パーフェクトガイド」では、プラグインや年別アーカイブを使わずに、「月別アーカイブの年別表示」を実現するカスタマイズを豊富に紹介しています。

Movable Type 4.2 パーフェクトガイド
荒木勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 7256

Amazonで詳しく見る by G-Tools

Comments [3] | Trackbacks [0]

2007年12月 3日

Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法

December 3,2007 12:38 AM
Tag：[Category, Customize, Monthly, MovableType]
Permalink

2日ほど前に、このブログに「月別カテゴリーアーカイブ」を追加しました。カテゴリー・アーカイブの右下に表示されている「Category Monthly Archives」から辿れます。

「月別カテゴリーアーカイブ」

追加した目的は2つあり、ひとつはカテゴリーアーカイブのナビゲーションを増やしたかったこと、もうひとつは Google 検索の「小粋空間」の検索で、どの程度のページ増加があるのかを確認したかったためです。

ページ増加の結果については最後に記すことにして、ここでは、Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法を紹介します。

１．日付+カテゴリー（ユーザ）アーカイブについて

カテゴリーアーカイブやユーザアーカイブは、日付アーカイブ（年別・月別等）と異なり、記事数が増加することで1ページのファイルサイズが無限に増えていきます。

Movable Type 3 まではページ分割のカスタマイズでこの問題を回避していましたが、Movable Type 4 では、カテゴリーアーカイブとユーザアーカイブをさらに日付と組み合わせたアーカイブを作成することができるようになったので、例えば、あるカテゴリーアーカイブのトップには一定の記事数を表示し、過去の記事については「日付+アーカイブ」のページへリンクすれば、ページ分割として利用することができ、カテゴリーアーカイブ／ユーザアーカイブのトップページのファイルサイズを抑えることができます。

２．月別カテゴリーアーカイブの作成

Movable Type 4 の新規インストールでは「月別カテゴリーアーカイブ」がデフォルトで用意されているので、ここでは Movable Type 3 のアップグレードで Movable Type 4 運用のケースで「月別カテゴリーアーカイブ」を追加する場合について簡単に説明します。

２．１アーカイブテンプレートの追加

既存のカテゴリー・アーカイブを利用する場合と、アーカイブを新規作成する場合で若干手順が異なります。

２．１．１既存のカテゴリー・アーカイブを利用する場合

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「カテゴリー・アーカイブ」を選択。

「カテゴリー・アーカイブ」を選択

２．１．２新規で作成する場合

「デザイン」→「テンプレート」→「アーカイブテンプレート」で、「アーカイブテンプレートを作成」の右にある「ブログ記事リスト」をクリック。

ブログ記事を新規作成

タイトルに「月別カテゴリー」を入力し（名前は何でもいいです）、編集画面の内容にカテゴリー・アーカイブと同じ内容を設定。

２．２アーカイブマッピングを追加

ページ下にある「アーカイブマッピング」の「新しいアーカイブマッピングを作成」をクリック。

新しいアーカイブマッピングを作成

セレクトボックスで「カテゴリー - 月別」を選択し、「追加」をクリック。

「カテゴリー - 月別」を選択

これで、再構築をすれば「月別カテゴリーアーカイブ」が生成されます。

３．月別カテゴリーアーカイブリストへのリンクを追加

カテゴリーアーカイブのサイドバーに、月別カテゴリーアーカイブリストへのリンクを追加します。下は MT3 のデフォルトテンプレートに合わせたスタイルにしています。

<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<div class="module-archives module">
   <h2 class="module-header"><$MTArchiveTitle$>:月別アーカイブ</h2>
   <div class="module-content">
   <MTArchiveList archive_type="Category-Monthly">
      <MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
         <li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
      <MTArchiveListFooter></ul></MTArchiveListFooter>
   </MTArchiveList>
   </div>
</div>
</MTIfArchiveTypeEnabled>
</MTIf>

４．完成例

トップページにある「趣味」というカテゴリーページへのリンクをクリックすると、

カテゴリーリストのリンク

「趣味」カテゴリーのサイドバーに「趣味：月別アーカイブ」というリンクが表示されます。

月別カテゴリーリストのリンク

５．検索結果ページ数増加について

「月別カテゴリーアーカイブ」追加による増加ページ数は、約800ページです。

で、「小粋空間」というキーワードで Google 検索すると、ここ最近は160 万件位で頭打ち状態だったのですが、今日調べてみると、260 万件まで増加していました（もう少し日が経つと減少するかもしれません）。

Google 検索結果

ちなみに、著名なブログでも検索結果ページ数は当ブログより少ないケースが少なくないのですが、ここまで検索結果ページ数が稼げているのは、テンプレート利用者のサイトに設定しているクレジットバナーのおかげだと感謝しています。

Comments [0] | Trackbacks [0]

2007年9月21日

月別アーカイブリストのタイトル表示の不具合を解消する

September 21,2007 2:25 AM
Tag：[MovableType, MTSetVarBlock, MTVar, regex_replace]
Permalink

Movable Type 4 のデフォルトテンプレートで、月別カテゴリーアーカイブを表示した時、サイドバーにある月別アーカイブリストのタイトル表示を改善するカスタマイズです。

１．概要

月別カテゴリーアーカイブを表示した時、サイドバーにある「月別アーカイブリスト」は、表示されているカテゴリーだけの月別アーカイブリストが表示される仕組みになっています。
この新しい「月別カテゴリー」の出現により、カテゴリーアーカイブをプラグインでページ分割する必要がなくなります（決まった件数で分割したい場合や、カテゴリーアーカイブ自体を分割したい場合はプラグインを利用しましょう）。

そして、月別カテゴリーアーカイブのサイドバーにある、「月別アーカイブリスト」のタイトルは、

[カテゴリー名]: 月別アーカイブ

となります。

月別アーカイブ

２．問題点

そこまではいいのですが、月別カテゴリーアーカイブの「月別アーカイブリスト」のリンクをクリックすると、遷移したページにある「月別アーカイブリスト」のタイトルが

[カテゴリー名]: [年月]: 月別アーカイブ

となってしまい、「月別アーカイブリスト」なのにタイトルに特定の月が表示されるという、妙な状態になってしまっています。

月別アーカイブ

３．対処方法

月別カテゴリーアーカイブに表示されている月別アーカイブリストのリンクをクリックしても、常に

[カテゴリー名]: 月別アーカイブ

が表示されるようにするには、「テンプレートモジュール」の「サイドバー(2カラム)」または「サイドバー(3カラム)」の下記の部分を修正します。

変更前（赤色を削除）

　　　　：
<MTIf name="module_category-monthly_archives">
    <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
        <div class="widget-categories widget">
            <h3 class="widget-header"><$MTArchiveTitle$>: 月別アーカイブ</h3>
            <div class="widget-content">
        <MTArchiveList archive_type="Category-Monthly">
            <MTArchiveListHeader>
                <ul class="widget-list">
            </MTArchiveListHeader>
                    <li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
            <MTArchiveListFooter>
                </ul>
            </MTArchiveListFooter>
        </MTArchiveList>
            </div>
        </div>
    </MTIfArchiveTypeEnabled>
</MTIf>
　　　　：

変更後（青色を追加）

　　　　：
<MTIf name="module_category-monthly_archives">
    <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
        <div class="widget-categories widget">
            <MTSetVarBlock name="archivetitle"><$MTArchiveTitle$></MTSetVarBlock>
            <h3 class="widget-header"><MTVar name="archivetitle" regex_replace="/\: .*/","">: 月別アーカイブ</h3>
            <div class="widget-content">
        <MTArchiveList archive_type="Category-Monthly">
            <MTArchiveListHeader>
                <ul class="widget-list">
            </MTArchiveListHeader>
                    <li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
            <MTArchiveListFooter>
                </ul>
            </MTArchiveListFooter>
        </MTArchiveList>
            </div>
        </div>
    </MTIfArchiveTypeEnabled>
</MTIf>
　　　　：

４．注意事項

カテゴリーに「: 」が含まれていると期待した表示になりません。もう少し良い正規表現、あるいは改善策がありましたらご教示ください。

Comments [2] | Trackbacks [0]

2007年3月26日

Movable Type の月別アーカイブリストを簡略表示する

March 26,2007 2:25 AM
Tag：[Archive, Customize, MovableType]
Permalink

月別アーカイブリストの簡略表示月別アーカイブリストをスクリーンショットのように簡略表示にするカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。
調べてみたところ、このような表示は俗に「monthchunks」と呼ばれているようです。

１．プラグインのダウンロード・アップロード

下記のリンクよりプラグインをそれぞれダウンロードしてください。

ArchiveDateHeader プラグイン

ArchiveDateFooter プラグイン

ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします（詳細はそれぞれのエントリーを参照ください）。
管理メニューの

メイン・メニュー > システム・メニュー > プラグイン

で、それぞれのプラグイン名が表示されればOKです。

２．月別アーカイブリストタグの設定

月別アーカイブリストを、表示させたいテンプレートのサイドバー部分に貼り付けます。

デフォルトテンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
   <h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>
   <div class="module-content">
   <MTArchiveList archive_type="Monthly">
      <MTArchiveDateHeader>
      <dl class="module-list module-mc-archive">
      <dt class="module-mc">
         <$MTArchiveDate format="%Y年"$>
      </dt>
      </MTArchiveDateHeader>
      <dd class="module-mc-item">
         <a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B"$></a>
      </dd>
      <MTArchiveDateFooter>
      </dl>
      </MTArchiveDateFooter>
   </MTArchiveList>
   </div>
</div>
</MTIfArchiveTypeEnabled>

公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
   <MTArchiveList archive_type="Monthly">
      <MTArchiveDateHeader>
      <dl class="module-list module-mc-archive">
      <dt class="module-mc">
         <$MTArchiveDate format="%Y年"$>
      </dt>
      </MTArchiveDateHeader>
      <dd class="module-mc-item">
         <a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B"$></a>
      </dd>
      <MTArchiveDateFooter>
      </dl>
      </MTArchiveDateFooter>
   </MTArchiveList>
</div>
</MTIfArchiveTypeEnabled>

３．CSS の設定

下記の CSS をスタイルシートに追加します。

デフォルトテンプレートの場合

.module-mc-archive {
    margin:0 0 8px;
    padding:0;
}
.module-mc {
    margin:0;
    padding:0;
}
.module-mc-item {
    display: inline;
    margin:0 0 0 4px;
    padding:0;
}

公開テンプレートの場合

.module-mc-archive {
    margin:0 0 5px;
    padding:0;
}
.module-mc {
    margin:0;
    padding:0;
}
.module-mc-item {
    display: inline;
    margin:0 0 0 1px;
    padding:0;
}

Comments [2] | Trackbacks [0]

2007年1月30日

月別アーカイブの折りたたみで年表示に折りたたみのリンクを与える

January 30,2007 1:08 AM
Tag：[Archives, Customize, MovableType]
Permalink

月別の折りたたみで年に折りたたみ用のリンクを与える月別アーカイブリストの年別の折りたたみで、年表示に折りたたみ用のリンクを与えるカスタマイズです。

これまで紹介してきた「月別アーカイブリストの年別折りたたみ」では、年表示の横に折りたたみマークを表示していましたが、「年表示にリンクを設定できないでしょうか」というご質問を頂きました。たしかに月別アーカイブでは年表示部分に他のアーカイブにジャンプするリンクがある訳ではないのでごもっとです。
ということで本エントリーにてカスタマイズ方法をご紹介致します。

スクリーンショットは完成例です。ご覧の通り、年表示部分に折りたたみのリンクが表示されます。

１．「月別アーカイブリストの年別の折りたたみ」を行っていない場合

まず、月別アーカイブリストの折りたたみを設定していない方は、「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」を参照して、カスタマイズを行ってください。
設定後、２項をスキップして３項の設定を行ってください

２．「月別アーカイブリストの年別の折りたたみ」をすでに行っている場合

下記のリンクより menufolder.js（6.03 以上）をダウンロードして、３項に進んでください。

download

３．年表示に折りたたみのリンクを与える

ダウンロードした menufolder.js を任意のエディタで開き、アーカイブリストマーク表示の設定項目にある、下記の赤色部分

　　　　　：
// アーカイブリスト用折りたたみマーク使用
// 折りたたみマークを使用しない場合は年表示にリンクを設定
// 使用する：true
// 使用しない：false
var displayArchivesMark = true;
　　　　　：

を「false」に変更してください。

　　　　　：
// アーカイブリスト用折りたたみマーク使用
// 折りたたみマークを使用しない場合は年表示にリンクを設定
// 使用する：true
// 使用しない：false
var displayArchivesMark = false;
　　　　　：

折りたたみマークを表示したい場合は「true」のままで OK です。

あとは修正した menufolder.js をサーバにアップロードします。これで年表示にリンクが付与されます。

Comments [0] | Trackbacks [0]

2006年12月18日

JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ

December 18,2006 12:39 AM
Tag：[Customize, MovableType, Tree]
Permalink

JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ月別アーカイブのリスト表示は、Movable Type のデフォルト機能では全ての年月を連続で表示することしかできませんが、プラグインを利用することで年毎の表示が可能になり、これを利用して、以前「月別アーカイブリストのツリー化 for Movable Type」を紹介致しました。

さらに、年毎のツリー化リストに折りたたみマークを与えるために「月別アーカイブリストの年毎の折りたたみ for Movable Type」もエントリーしました。この複合技が左のスクリーンショットになります。

上記とは別に、ツリー化をより簡単に実現するテクニックとして、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」をエントリーしました。
ですが、これまでの「月別アーカイブのツリー化+折りたたみ」に「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を適用する場合のタグの構成が不明になっておりました。記事を跨って参照すれば不可能ではありませんが、やや分かりにくいです。

ということで、本エントリーで、月別アーカイブリストの

年別ツリー化
年別折りたたみ
全体の折りたたみ

について、まとめてカスタマイズする手順を紹介致します。

以前、ご質問を頂いていた回答ですが、公開が遅くなり申し訳ございませんでした。この場をお借りしてお詫び申し上げます。

１．プラグインのダウンロード・アップロード

下記のリンクよりプラグインをそれぞれダウンロードしてください。

ArchiveDateHeader プラグイン

ArchiveDateFooter プラグイン

メイン・メニュー > システム・メニュー > プラグイン

で、それぞれのプラグイン名が表示されればOKです。

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

下記のリンクより menufolder.js をダウンロードしてください。

download

３．スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を必要に応じて適宜変更してください。デフォルトの状態では各年の最後尾に折りたたみマークが表示される設定になっています。

// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives  = '▼';
var closeMarkForArchives = '▲';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

リスト3.1 menufolder.js の修正箇所

４．スクリプトのアップロード

menufolder.js を index.html のあるディレクトリにアップロードします。

５．テンプレートの修正（script タグ追加）

月別アーカイブリストを表示したいテンプレートに、 </head> の直前にリスト5.1 のタグを追加します（すでに他の折りたたみで設定済の方はこの項をスキップしてください）。

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

リスト5.1 script タグの追加

６．ツリー画像のダウンロード・アップロード

下記のツリー画像をダウンロードしてください。画像は、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

ダウンロードした画像ファイルのファイル名をそれぞれ

tree_lst.gif

tree_end.gif

に変更して、サーバにアップロードします。アップロード先は任意ですが、ここでは index.html と同じディレクトリにアップロードしてください。

７．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定

月別アーカイブの年別ツリー化表示＋折りたたみができるタグ（リスト7.1）を、表示させたいテンプレートのサイドバー部分に貼り付けます。div 要素は当サイトで公開しているテンプレートに合わせたものですので、設定は任意です。お好みに応じて修正してください。

リスト7.1-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（div要素を利用）

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>

リスト7.1-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（dl/dt/dd要素を利用）

<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
</dd>

メニューリスト全体を折りたたみたい場合は、リスト7.1-1 または7.1-2 に、下記の青色部分 *1 を追加してください。

リスト7.2-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（div要素を利用）

<div class="sidetitle" id="monthlyname">
Monthly Archives
</div>
 
<div class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>

リスト7.2-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（dl/dt/dd要素を利用）

<dt class="sidetitle" id="monthlyname">
Monthly Archives
</dt>
 
<dd class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>
</dd>

８．CSS

リスト8.1 をスタイルシートに追加してください。

ul.tree {
    margin: 0 0 0 15px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0 0 0 10px;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 11px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

リスト8.1 CSS

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Comments [36] | Trackbacks [5]

2006年11月28日

サイドメニューの一部を折りたたむ

November 28,2006 2:36 AM
Tag：[Customize, MovableType]
Permalink

ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。

本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。

下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。

折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。

このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。

１．Counter プラグインの設定

Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。

２．スクリプトの追加

「追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ? </head> の間（できれば </head> の直前）に設定します。または前後の script 要素を削除して、外部ファイル（showhide.js とか）にしても構いません。

お詫び：リスト 2.1 が正常に表示されておりませんでしたので、修正致しました。

すでに「追記文章の折りたたみ」のカスタマイズを行っている場合は本項をスキップしてください。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

リスト 2.1　追記文章の折りたたみ用スクリプト

３．部分折りたたみ用メニューを設定する

部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ?リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については５項をご覧ください。

３．１最近のエントリー

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.1　「最近のエントリー」用MTタグ

３．２最近のコメント

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="30" recently_commented_on="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkComment">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Comment','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextComment" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Comment',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<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>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.2　「最近のコメント」用MTタグ

３．３最近のトラックバック

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTPings lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkTrackback">
<a href="javascript:void(0)" name="<$MTPingID pad="1"$>" onclick="showHide('Trackback','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextTrackback" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Trackback',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.3　「最近のトラックバック」用MTタグ

３．４月別アーカイブリスト

月別アーカイブリストは表示月数を制御することができないため、サイト運営が長くなるにしたがってリストが長大になります。そのためリスト全体の折りたたみや、年毎の折りたたみ等を行う訳ですが、この技を使えば「最新×ヶ月分だけを表示」というコンパクトな表示が可能になります。
月が替わり、新しい月でエントリー投稿があった場合、表示月が更新されます。

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTArchiveList archive_type="Monthly">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkMonthly">
<a href="javascript:void(0)" onclick="showHide('Monthly','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>

リスト 3.4　「月別アーカイブリスト」用MTタグ

４．CSS設定

「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。

.list_more {
   margin:5px 0;
}

リスト 4.1　CSS

５．表示数を変更する

リスト 5.1 の下記の赤色部分を変更してください。

　　　　　　：
<MTCounterIfEqual value="6">
　　　　　　：
　　　　　（略）
　　　　　　：
<MTCounterIfMore value="5"></div></MTCounterIfMore>
　　　　　　：

リスト 5.1　表示数を変更する場合の変更箇所

「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。

Comments [12] | Trackbacks [1]

2006年7月10日

月別アーカイブリストの年毎の折りたたみ for Movable Type

July 10,2006 8:03 AM
Tag：[Customize, MovableType]
Permalink

月別アーカイブリストの年毎の折りたたみアーカイブリストを年毎に折りたたむカスタマイズです。
アーカイブリストはカテゴリーリストと異なり、エントリーの増加に比例して増えていきますが、このカスタマイズを行うことでアーカイブリストをコンパクトに表示することができます。

ここではスクリーンショットのように、月別アーカイブリストで年毎に折りたたみマークを付与する方法をご紹介します。当サイトの右サイドバーに設定していますので、動作をご確認ください。

なおアーカイブリストのツリー化については「月別アーカイブリストのツリー化 for Movable Type」のカスタマイズを行ってください（本記事と内容が一部重複しています）。

折りたたみとツリー化を同時に行ないたい場合は「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」をご覧ください。

１．事前準備

このカスタマイズを行うには下記のプラグインをインストールし、MTArchiveDateHeader および MTArchiveDateFooter タグが動作するようにしてください。

ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン

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

下記のリンクより menufolder.js をダウンロードしてください。今回のアーカイブリスト折りたたみ用にバージョンアップしていますので、すでに menufolder.js をお使いの方も再度ダウンロードしてください。

download

３．スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を適宜修正してください。デフォルトの状態では各年の後方に折りたたみマークが表示されるようになっていますので、そのままでもお使いになれます。

// アーカイブリストフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする：true
// 無効にする：false
var archives = true;
 
// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives  = '▼';
var closeMarkForArchives = '▲';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

４．スクリプトのアップロード

menufolder.js を index.html のあるディレクトリにアップロードします。

５．テンプレートの修正（script タグ追加）

アーカイブリストを表示したいテンプレートの <head> ? </head> の間に下記のタグを追加します（すでに設定済の方はこの項をスキップしてください）。

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

６．テンプレートの修正（折りたたみつき月別アーカイブリスト追加）

月別アーカイブリストを表示したいテンプレートに下記のタグを設定します。サンプルは公開テンプレートに設定したものです。

青色で示した部分が月別アーカイブリストの表示で使用するタグになります。タグの構造がお分かりでない場合はこの部分に修正を加えたり改行を挿入しないでください。
その他の部分はご自身のテンプレートに併せて適宜修正してください。

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div  id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>

*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください（アクセシビリティ向上のため、1年ほど前からこの機能を提供していましたが、パフォーマンスの関係で停止していました）。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Comments [35] | Trackbacks [4]

2006年6月20日

月別アーカイブリストのツリー化 for Movable Type

June 20,2006 12:55 AM
Tag：[Customize, MovableType, Tree]
Permalink

ArchiveDateHeader プラグインおよび、昨日公開した ArchiveDateFooter プラグインを利用した、月別アーカイブリストのツリー化カスタマイズを紹介します。

ツリー化にあたっては、公開テンプレートをサンプルに用いて

各年の月をツリー化
年と各年の月をツリー化

の2通りの方法を説明しています。いずれかお好きな方を選択してください。またデフォルトテンプレート等、他のテンプレートでも利用可能ですが、ツリー表示についてはスタイルシートの設定を適宜修正して調整してください。

なおツリー化の基本的なカスタマイズについてはサイドメニューのツリー化スクリプト（改）を参照してください。ここでは差分のみを記し、スクリプトおよびツリー画像の設定等については割愛しています。

さらにツリー表示を年毎に折りたたむこともできます。その場合は「月別アーカイブリストの年毎の折りたたみ for Movable Type」をご覧ください。

１．各年の月をツリー化

１項では、左のスクリーンショットのように各年の月をツリー化する方法を紹介します。

１．１テンプレートの修正

月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。

<div class="side" id="archives">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><span><$MTArchiveDate format="%Y年"$></span><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
<!--
generateNormalTree('archives');
//-->
</script>

１．２スタイルシートの修正

下記のスタイルを styles-site.css に追加します。

ul.tree {
    margin: 0 0 0 15px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
    margin-left: 10px!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 11px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

２．年と各年の月をツリー化

２項は各年の月のツリー化だけでなく、年表示部分もツリー化する方法を紹介します。

２．１テンプレートの修正

月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。

<div class="side" id="archives">
<ul>
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><li><$MTArchiveDate format="%Y年"$><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></li></MTArchiveDateFooter>
</MTArchiveList>
</ul>
</div>
<script type="text/javascript">
<!--
generateTreeForTreeStructure('archives');
//-->
</script>

２．２スタイルシートの修正

下記のスタイルを styles-site.css に追加します。

ul.tree {
    margin: 0 0 0 5px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
    margin-left: 10px!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 11px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

３．その他

すでに他でツリーの設定を行っている場合は、同じ設定を利用するか、

#archives ul.tree {
　　　　　：

という具合に、スタイルシートの該当部分に id 属性を追加して、他の設定と干渉しないようにしてください。

Comments [25] | Trackbacks [4]

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

月別アーカイブリストの年別表示（ダイナミックパブリッシング対応：年・月を昇順に表示）

月別アーカイブリストの年別表示（ダイナミックパブリッシング対応）

月別アーカイブリストの年別表示（ツリー化＋折りたたみ）

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

２．スクリプトのアップロード

３．テンプレートモジュールの修正（script タグ追加）

４．ツリー画像のダウンロード・アップロード

５．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定

５．１ 公開テンプレート

５．２ デフォルトテンプレート（MT4.1x）

５．３ デフォルトテンプレート（MT4.2x）

６．CSS

７．ツリー化のみ行いたい場合

８．折りたたみのみ行いたい場合

月別アーカイブリストの年別表示

１．公開テンプレート

２．デフォルトテンプレート（MT4.1）

３．デフォルトテンプレート（MT4.2～）

年別アーカイブを利用した月別アーカイブの年別表示

１．基本形

２．ツリー化 + 折りたたみ

３．参考・関連記事

４．その他

Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法

１．日付+カテゴリー（ユーザ）アーカイブについて

２．月別カテゴリーアーカイブの作成

２．１ アーカイブテンプレートの追加

２．１．１ 既存のカテゴリー・アーカイブを利用する場合

２．１．２ 新規で作成する場合

２．２ アーカイブマッピングを追加

３．月別カテゴリーアーカイブリストへのリンクを追加

４．完成例

５．検索結果ページ数増加について

月別アーカイブリストのタイトル表示の不具合を解消する

１．概要

２．問題点

３．対処方法

４．注意事項

Movable Type の月別アーカイブリストを簡略表示する

１．プラグインのダウンロード・アップロード

２．月別アーカイブリストタグの設定

デフォルトテンプレートの場合

公開テンプレートの場合

３．CSS の設定

デフォルトテンプレートの場合

公開テンプレートの場合

月別アーカイブの折りたたみで年表示に折りたたみのリンクを与える

１．「月別アーカイブリストの年別の折りたたみ」を行っていない場合

２．「月別アーカイブリストの年別の折りたたみ」をすでに行っている場合

３．年表示に折りたたみのリンクを与える

JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ

１．プラグインのダウンロード・アップロード

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

３．スクリプトの修正

４．スクリプトのアップロード

５．テンプレートの修正（script タグ追加）

６．ツリー画像のダウンロード・アップロード

７．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定

リスト7.1-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（div要素を利用）

リスト7.1-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ（dl/dt/dd要素を利用）

リスト7.2-1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（div要素を利用）

リスト7.2-2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2（dl/dt/dd要素を利用）

８．CSS

サイドメニューの一部を折りたたむ

１．Counter プラグインの設定

２．スクリプトの追加

３．部分折りたたみ用メニューを設定する

３．１ 最近のエントリー

３．２ 最近のコメント

３．３ 最近のトラックバック

３．４ 月別アーカイブリスト

４．CSS設定

５．表示数を変更する

月別アーカイブリストの年毎の折りたたみ for Movable Type

１．事前準備

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

３．スクリプトの修正

４．スクリプトのアップロード

５．テンプレートの修正（script タグ追加）

５．１公開テンプレート

５．２デフォルトテンプレート（MT4.1x）

５．３デフォルトテンプレート（MT4.2x）

２．１アーカイブテンプレートの追加

２．１．１既存のカテゴリー・アーカイブを利用する場合

２．１．２新規で作成する場合

２．２アーカイブマッピングを追加

３．１最近のエントリー

３．２最近のコメント

３．３最近のトラックバック

３．４月別アーカイブリスト

１．１テンプレートの修正

１．２スタイルシートの修正

２．１テンプレートの修正

２．２スタイルシートの修正