Blogger 用の無料テンプレート Vaster2 はとても良いのですが、ブログアーカイブの表示にバグがあるようで、メニューの開閉が効きません。
Blogger のレイアウトメニューで一度ブログアーカイブを削除し、再度追加すると一応直るのですが、Blogger のデフォルト表示になってしまうのと、毎回これを手動でやるのは面倒なので、テンプレート自体を修正します。
修正コードについてですが、上記の方法で一度ブログアーカイブのウィジェットをデフォルトに戻した後、Vaster2 での変更箇所を取り入れる形で作成しました。
以下に変更箇所の変更前と変更後のコードを載せておきます。
直す箇所がブログアーカイブのウィジェット全体となるので変更量が多く見えますが、実際 Blogger のデフォルトから見れば修正箇所は以下の２箇所のみです。
<data:title/>がh2からh4に変更されている<div id='ArchiveList'>にclass='archive-list'が追加されている
変更前(Vaster2 のコード)
<b:widget id='BlogArchive1' locked='false' title='ブログアーカイブ' type='BlogArchive' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title'>
<h4>
<data:title/>
</h4>
</b:if>
<div class='widget-content'>
<div class='archive-list'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'>
<data:i.name/>
</a>
(
<data:i.post-count/>
)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'>
<data:i.name/>
</a>
<span class='post-count' dir='ltr'>
(
<data:i.post-count/>
)
</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''>
<data:title/>
</option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'>
<data:i.name/>
(
<data:i.post-count/>
)
</option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li>
<a expr:href='data:i.url'>
<data:i.title/>
</a>
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
</b:widget>
変更後(Blogger のデフォルト＋ Vaster2 の変更分)
<b:widget id='BlogArchive1' locked='false' title='ブログアーカイブ' type='BlogArchive' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h4><data:title/></h4>
</b:if>
<div class='widget-content'>
<div id='ArchiveList' class='archive-list'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:include cond='data:style == "HIERARCHY"' data='data' name='interval'/>
<b:include cond='data:style == "FLAT"' data='data' name='flat'/>
<b:include cond='data:style == "MENU"' data='data' name='menu'/>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='interval'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:interval.expclass'>
<b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
<a class='post-count-link' expr:href='data:interval.url'>
<data:interval.name/>
</a>
<span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
<b:include cond='data:interval.data' data='interval.data' name='interval'/>
<b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<a class='toggle' href='javascript:void(0)'>
<span expr:class='"zippy" + (data:interval.expclass == "expanded" ? " toggle-open" : "")'>
<b:if cond='data:interval.expclass == "expanded"'>
▼
<b:elseif cond='data:blog.languageDirection == "rtl"'/>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:includable>
</b:widget>
