メモの整理: Bloggerでの多段組ですが

2010/09/16

Bloggerでの多段組ですが

書き忘れていたので書いておきます。
Bloggerでのウィジットへの多段組の方法ですが、これが一番応用が効くと思います。

管理画面のデザイン > HTMLの編集タブをクリック。テンプレートを編集します。
このときにウィジットを展開するにチェックをいれておいてください。
段組に変更したいウィジットの名前を検索します。
そしてそのウィジットのIDを確認してください。

次に]]></b:skin>という文字列を検索してください。
その手前にウィジット毎の設定を追記するイメージです。

私のブログの場合にはこんな感じの設定を追加しました。
対象は記事のラベル、最新の記事、人気の投稿等のリスト等です。

view plain print ?

#Label1 ul li{
float: left;
margin-right:1px;
width: 33%;
}
#HTML1 ul li{
float: left;
width: 25%;
}
#Feed4 ul li{
float: left;
margin-right:2em;
width: 40%;
font-size: 90%;
}
#PopularPosts1
ul li{
float: left;
margin-right:2em;
width: 40%;
font-size: 90%;
}
#LinkList1 ul li{
float: left;
margin-right:2em;
width: 40%;
}
#Feed3 ul li{
float: left;
margin-right:2em;
width: 40%;
}
]]></b:skin>

#Label1 ul li{
float: left;
margin-right:1px;
width: 33%;
}

#HTML1 ul li{
float: left;
width: 25%;
}

#Feed4 ul li{
float: left;
margin-right:2em;
width: 40%;
font-size: 90%;
}

#PopularPosts1
 ul li{
float: left;
margin-right:2em;
width: 40%;
font-size: 90%;
}

#LinkList1 ul li{
float: left;
margin-right:2em;
width: 40%;
}

#Feed3 ul li{
float: left;
margin-right:2em;
width: 40%;
}
]]></b:skin>

私の場合はリスト系を多段組に追い出したかったのでulとliを対象にしていますが、他の要素でももちろん構いません。
適宜変更してください。

floatで右への回り込み、widthで1カラムあたりの幅、margin-rightでカラムとカラムの間隔を設定しています。
幅がきつい場合には更にfont-sizeでフォントを縮小しています。
実際には現物合わせで調整しながらwidthを調整していくと思います。
2段組なら40%前後から、3段組なら30%前後から徐々に調整ですね。

まずはラベルの多段化からでしょうね。