MT 月別アーカイブリスト プルダウン式のテンプレート

MT 月別アーカイブリスト プルダウン式のテンプレート

小粋空間さんで「月別アーカイブリストの年別表示(ツリー化+折りたたみ)」で年別の折りたたみを加えるカスタマイズ方法が紹介されていたので、それを元にCSSでの装飾を3パターン作ってみました。

サンプルをダウンロードして貰ったら後はコピペだけで自分のサイトに使えるようになっているので、月別アーカイブリストを上記の様に変更してみたい場合は使ってみて下さい。

…ここからが続き

月別アーカイブリスト パターン1

月別アーカイブリスト パターン1

MT テンプレートタグ

<mt:IfArchiveTypeEnabled archive_type="Monthly">
 <mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveListHeader>
   <h3>月別アーカイブ</h3>
   <dl class="archives">
    <dt><mt:archiveDate format="%Y年" /></dt>

    <dd><ul>
     <mt:archiveDate format="%Y年" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
           FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
  </mt:ArchiveListHeader>

   <mt:archiveDate format="%Y年" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
	   <li><mt:getVar name="month_title" /></li>
    </ul></dd>

   <dt><mt:getVar name="current_year" /></dt>

   <dd><ul>
    <mt:setVarBlock name="monthly_fold_script" prepend="1">
         FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
    </mt:setVarBlock>
    <mt:else>
     <mt:unless name="__first__">
          <li><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="/%Y+\d+年/","" /></a> [<mt:archiveCount />]
     </mt:setVarBlock>
    <mt:ArchiveListFooter>
         <li><mt:getVar name="month_title" /></li>
    </ul></dd>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</dl>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</mt:IfArchiveTypeEnabled>

テンプレート元「小粋空間

CSS

h3	{
	border-bottom: 2px solid #CCC;
	padding: 5px;
	margin: 0;
	font-size: 116.6%;
}
.archives,.archives dt,.archives dd,.archives ul	{ margin:0; padding:0; }
.archives li	{ list-style-type: none; }
.archives	{ padding: 5px; }
.archives dt	{ padding: 3px 0; }
.archives dd	{ padding: 0 0 5px 10px; }

demo page

月別アーカイブリスト パターン2

月別アーカイブリスト パターン2

MT テンプレートタグ

<mt:IfArchiveTypeEnabled archive_type="Monthly">
 <mt:ArchiveList archive_type="Monthly">
  <mt:ArchiveListHeader>
   <h3>月別アーカイブ</h3>
   <dl class="archives">
    <dt><mt:archiveDate format="%Y年" /></dt>

    <dd><ul>
     <mt:archiveDate format="%Y年" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
           FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
  </mt:ArchiveListHeader>

   <mt:archiveDate format="%Y年" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
	   <li><mt:getVar name="month_title" /></li>
    </ul></dd>

   <dt><mt:getVar name="current_year" /></dt>

   <dd><ul>
    <mt:setVarBlock name="monthly_fold_script" prepend="1">
         FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
    </mt:setVarBlock>
    <mt:else>
     <mt:unless name="__first__">
          <li><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+年/","" /></a> [<mt:archiveCount />]
     </mt:setVarBlock>
    <mt:ArchiveListFooter>
         <li><mt:getVar name="month_title" /></li>
    </ul></dd>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</dl>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</mt:IfArchiveTypeEnabled>

テンプレート元「小粋空間

CSS

h3	{
	border-bottom: 2px solid #CCC;
	padding: 5px;
	margin: 0;
	font-size: 116.6%;
}
.archives,.archives dt,.archives dd,.archives ul	{ margin:0; padding:0; }
.archives li	{ list-style-type: none; }
.archives	{ padding: 5px; }
.archives dt	{ padding: 3px 0; }
.archives dd	{ padding: 0 0 5px 10px; }

demo page

月別アーカイブリスト パターン3

月別アーカイブリスト パターン3

MT テンプレートタグ

パターン2 と同じです。

CSS

h3	{
	border-bottom: 2px solid #CCC;
	padding: 5px;
	margin: 0;
	font-size: 116.6%;
}
.archives,.archives dt,.archives dd,.archives ul	{ margin:0; padding:0; }
.archives li	{ list-style-type: none; }
.archives	{ padding: 5px; }
.archives dt	{ padding: 3px 0; }
.archives dd	{ padding: 0 0 5px 10px; }
.archives ul	{ width: 130px; }
.archives li	{
	width: 60px;
	float: left;
	margin-right: 5px;
}
.archives ul:after
{ height:0;	visibility: hidden;	content: ".";	display: block;	clear: both; }

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article