【Blogger/QooQ】detailsとsummaryを使用してウィジェットを折りたたみ式に

日付:
以前投稿したHTML便利機能の<details>と<summary>を使い、Bloggerのウィジェットを折りたたみ式に変更してみました。




ラベル ウィジェットを折りたたみ式に

Bloggerでラベル ウィジェットを設置している方も多いと思います。
ブログが成長するとラベルの種類も増え、沢山のラベルが表示される為、ページスクロールも増えてしまったり、ゴチャゴチャして全体のスタイルが崩れてしまう可能性もあります。

そこで、<details>と<summary>タグを使い、ラベル一覧を普段は折りたたんで、クリックした時だけ一覧が表示されるようにウィジェットを変更してみました。

今回はテーマQooQのサイドバーに配置したラベルウィジェットを変更してみましたが、他のBloggerテーマや他のウィジェットでも使用出来ると思います。

今回はQooQの変更

HTMLとcssを変更します。
テーマ（テンプレート）のバックアップを取り、cssを変更していきます。

Bloggerの管理画面より　テーマ＞＞HTMLの編集と進みテーマを変更します。
尚、変更については自己責任でお願いします。

HTMLの変更

  • Labal1へ移動します。
  • <b:includable id='main'>の直下に<details class='collapsible'>と</details>を以下の通り追加します。
  • <h2><data:title/></h2>の箇所を以下の通り、<summary><data:title/></summary>に変更します。
      <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'>LIST</b:widget-setting>
          <b:widget-setting name='selectedLabelsList'/>
          <b:widget-setting name='showType'>ALL</b:widget-setting>
          <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
<details class='collapsible'>
  <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>


cssの変更

QooQのサイドバーに設置した他のウィジェットと同じスタイルに統一する為、cssの「サイドバー」と「個別アイテム」の箇所に下記青文字を追加します。

/****************************************
        サイドバー
*****************************************/
#sub-content a{
color: $(font.link);
}
#sub-content .widget, .collapsible summary {
background: $(other.back);
border-radius: 2px;
}
#sub-content .widget-content, .collapsible summary  {
padding: .5em;
}
#sub-content .widget h2, .collapsible summary  {
padding: .4em;
background: $(brand.color);
color: $(brand.font);
}
#sub-content .detail {
background:white;
}


/****************************************
        個別アイテム
*****************************************/
/* タグクラウド */
.label-size{
padding: .5em;
border-radius: 3px;
margin: .25em 0;
background: $(brand.subcolor);
color: $(brand.subfont);
}
.label-size a{
color: inherit !important;
}
.widget h2, .collapsible summary {
font-size: 110%;
}
.widget h2, .collapsible summary, 
.widget-content {
font-weight: bold;
}

以下略


DEMOを用意しています。
以下ブログのサイドバーに配置している「ラベル」が折り畳み式になっています。

DEMOの部屋　プゥの間


他のテーマでも変更は可能だと思いますが、スタイル（css）はご使用のテーマに依存すると思います。

以上


コメント

コメントを投稿