March 18, 2010

Bloggerのラベル(タグ)を2列表示にする簡単な方法

Bloggerのラベルを2列表示にするのにDaliceさんのitFun.jpで紹介されている方法を導入している方が多い様なので僕も試してみたのですが、(僕の知識不足の為か)このブログにはなぜかうまく導入出来ませんでした。
そこで海外のfree blogger helpというサイトで見つけた方法でラベルを二列表示にしてみました。ちなみに3列以上にする事も可能です。


手順:

事前にテンプレートのバックアップを取る事をお勧めします。

1. Bloggerにログイン後、「レイアウト」→「HTMLの編集」へ行き、「ウィジェットのテンプレートを展開」にチェックを入れる

2. id='Label と書かれた部分を探し、(CTRL + Fキー で検索すると楽です。) id='Label1と書かれているかid='Label2かを確認する。

3. ]]></b:skin>と書かれた部分を探し、その直前に以下のどちらかのコードを追加する。

id='Label1だった場合:
#Label1 ul li{
float: left;
width: 45%;
}

id='Label2だった場合:

#Label2 ul li{
float: left;
width: 45%;
}


これで終わりです。「プレビュー」をクリックすれば保存前に確認可能です。

上記の例では幅を45%としていますが、この値はプレビューを見ながら適宜調整して下さい。2行にするなら45%~50%、3行にするなら30%~33%位にすると良いと思います。

1行の幅が狭くてラベル名がはみ出してしまう場合には、width: 45%;の下に font-size: 90%; と追加し、ラベル名のフォントサイズを縮小してしまうのが一番簡単な解決策かと思います。(パーセンテージの値を変更するとフォントサイズの拡大・縮小が出来ます。)

  

2 comments:

  1. Hey Hayden! Wow! I really missed this great place of yours! Btw, nice new layout u got here! I love it! It's been a while...I know. I've been very busy lately with works. How are you? :)

    ReplyDelete
  2. Thanks Didz! It's still not as good as yours though:)
    I was busy, too. And that's actually why I changed the layout. I needed to do something for a change!

    ReplyDelete