ラベルを２列に

Last Update : 12/May/09
サイドバーのラベル表示を２列にしてみました。

下記のページを参考にさせて頂きましたが、サイドバーの幅が違うので少し変更しました。

・itFun.jpさんのページ
http://itfun.jp/2009/01/blogger-2.html

また、上記サイトで紹介されている方法ではIE6から印刷しようとするとエラーが出てしまいますが、ウィジェットの「ul id="tags"」とCSSの「＃tags li{」の部分の「tags」が原因の様ですので、「tags2」に書き換えたら印刷出来る様になりました。

【スタイルシートの変更例】

スタイルシートの下記赤字部分を書き換えました。

<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 id='tags2'>　
    <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>
      </li>
    </b:loop>
    </ul>

合わせて、スタイルシートの下記部分も書き換えます。

赤字部分が追加した部分です。

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
 }

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}

.sidebar #tags2 li {
  float:left;
  width:95px;
}

.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

以上