この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
Opera / Safari / Chrome でこの表現が可能です。
CSSの無限の可能性;p
ご不明な点がございましたら、コメントなどでご指摘下さい。