2009/01/10

Blogger のラベル(タグ)を2列で表示させる

WS000019  WS000022

このBlogでも行っているラベル(タグ)を2列で並べていますが、それを簡単に行う方法です。
基本CSSです。

テンプレートその物を修正するので、バックアップは忘れずに。

 

まずテンプレートの部分
ウィジットのテンプレートを展開 のチェックを入れます。

<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <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>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

この部分を探し出します。

この中の<ul>の部分に

<ul id="tags">

id="tags" を追加します。

これともう1点。

<span dir='ltr'>(<data:label.count/>)</span>

を削除します。
その代わりに <data:label.name/> の後ろに

<data:label.name/> (<data:label.count/>)

(<data:label.count/>)を追加します。これはそのラベル(タグ)に関連している記事の総数を表示するものです。必要が無い場合は追加しなくても問題ありません。

 

次にCSSです。

.sidebar #tags li {
  float:left;
  width:70px;
}

これをお使いのCSSに追加します。
これで、上の画像の様に2列で表示されます。
実際に以上の指定のみをしたサンプルはこちらです → カテゴリーサンプル

 

width:70px が指定されていますが、これはお使いのサイドバーの横幅に合わせて下さい。
itFun.jpではサイドバーの横幅が300pxなので、この部分では150pxを指定しています。

なお、今回のは本当に最低限度のサンプルになっています。
後はCSSでこのblogのようにマウスオーバー時の処理や、交互に色分けしたりなどの表現が可能です。
このBlogのCSSで良ければご自由にお使い下さい;p

WS000023

Opera / Safari / Chrome でこの表現が可能です。
CSSの無限の可能性;p

 

ご不明な点がございましたら、コメントなどでご指摘下さい。