Bloggerテーマの基礎知識 - 「ラベル」ガジェットについて知ろう

Bloggerでは「レイアウト」メニューからガジェットを追加できます。
追加されたガジェットがどのような構造を持っているかは「テーマ」の「HTML編集」から確認できます。

「ラベル」ガジェットの構造について確認してみましょう。

「ラベル」ガジェットとは

「ラベル」ガジェットは投稿に付けたラベルの一覧を表示する為のガジェットです。

「ラベル」が出力する構造

「ページヘッダー」ガジェットは「編集」ボタンから表示方法を選択できますが、その選択によって出力の内容が変わります。

「リスト」の場合

※ラベルは<ul><li>タグを使って出力されます

「クラウド」の場合

※ラベルは<span>タグを使って並べられます

スタイルシートの設定

上記の構造を見ると指定すべきスタイルシートの項目が見えてきます。
取り合ずこの辺↓を設定すれば良さそうですね。

.Label{
}
.Label h3{
}
.Label ul{
}
.Label li{
}
.Label li a{
}
.Label li a:hover{
}
.list-label-widget-content{
}
.cloud-label-widget-content{
}
.label-name{
}
.label-count{
}
.label-count:before{
}
.label-count:after{
}

「ラベル」ガジェットのソース

<b:widget id='Label1' locked='false' title='LABEL' type='Label' visible='true'>
  <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'>true</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main' var='this'>
    <b:include name='widget-title'/>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <div class='widget-content'>
      <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
      <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
      <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
    </div>
  </b:includable>
  <b:includable id='list'>
    <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <a class='label-name' expr:href='data:label.url'>
            <data:label.name/>
            <b:if cond='data:this.showFreqNumbers'>
              <span class='label-count'><data:label.count/></span>
            </b:if>
          </a>
        </li>
      </b:loop>
    </ul>
  </b:includable>
  <b:includable id='cloud'>
    <b:loop values='data:labels' var='label'>
      <span class='label-size'>
        <b:class expr:name='&quot;label-size-&quot; + data:label.cssSize'/>
        <a class='label-name' expr:href='data:label.url'>
          <data:label.name/>
          <b:if cond='data:this.showFreqNumbers'>
            <span class='label-count'><data:label.count/></span>
          </b:if>
        </a>
      </span>
    </b:loop>
  </b:includable>
</b:widget>

Ararami Studio