求人情報

しばらくお待ちください。

コンタクトレンズ通販

2010/09/16

Bloggerでの多段組ですが

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

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

次に]]></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%前後から徐々に調整ですね。

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


ぽちっとよろしくお願いします。m(_._)m

人気ブログランキングへブログランキング・にほんブログ村へにほんブログ村

関連記事:


0 件のコメント:

記事のラベル

  • Apache
  • BASP21
  • Blogger関連
  • CMS
  • CSS
  • Google
  • JavaScript
  • log4php
  • MYSQL
  • nmap
  • PHP
  • PowerEdgeT105
  • Rationall Clear Case
  • SMTP
  • SSL
  • VB.NET
  • WEB
  • Web API
  • xCore関連
  • XML-RPC送信ツール
  • ZenCart
  • アクセス解析
  • コーディング
  • サンプル
  • ストリーミング
  • その他
  • ツール関連
  • ディザスタリカバリ
  • ブログパーツ
  • 求人情報等
  • 書籍紹介
  • 小遣い稼ぎ
  • 日経SYSTEMS
  • 本日の作業
  • 無停電停止装置

関連IT用語 by e-Words

マイブログ リスト