[Blogger]ラベル等を折り畳みに

こちらを参考にラベルを折り畳みにしました

• 【Blogger/QooQ】detailsとsummaryを使用してウィジェットを折りたたみ式に-勉強でもするか

テンプレートをLabel1とかで検索して

<b:widget id='Label1' locked='false' title='ラベル' type='Label' version='1'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>CLOUD</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

<details class='collapsible extendable'>

<b:if cond='data:title != &quot;&quot;'>
<summary><data:title/></summary>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

</details>

</b:includable>
</b:widget>

ここまで

---

<summary><data:title/></summary>
の部分は元は
<h2><data:title/></h2>
です

このままでも折り畳みになるのですが
必要に応じてサイドバーのCSSを装飾

うちのブログだと

.sidebar h2, .collapsible summary{margin: 0 0 10px 0; padding: 9px 0 9px 0px; color: #3ddc84; font-size: 20px; line-height: 25px; border-bottom: 1px solid #d2d2d2; font-family: 'Monda', sans-serif; font-weight: bold; text-decoration: none; text-transform: uppercase;}

カンマ(,)スペースの後に .collapsible summary を追加

ラベルの数がカラフルになりましたが、とりあえずはこれで

この方法で折り畳みにできるガジェット

「HTML/JavaScript」ガジェット, 「ブログリスト」ガジェット, 「フィード」ガジェット