「MovableTypeをおしゃれにカスタマイズ♪」～ NO.9 ～
■floatを使う：スタイルシート■
━━━━━━━━━━━━━━━━━━━━━━━━2006.5.27━━━
「MovableTypeをおしゃれにカスタマイズ♪」～ NO.9 ～
MovableTypeをデフォルトからのカスタマイズを実況中！
http://movabletype.gift-select.com/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんばんわ。今日は夜にお届けします♪
今、集中して作業しているのは、MTのタグ辞典の作成です。
早く公開できるようにかんばりますｐ(^-^)ｑ
■floatを使う：スタイルシート■
写真などを横に並べたいときにはどうしますか？
それが「表」なら「tableタグ」を使って並べる方法がありますね。
スタイルシートで並べるには「float」を使います。
floatでright、leftを指定すると後に続く要素が右、左に回りこみます。
では、実際に150px幅のボックス（
左寄せにする、下のサンプルのソースを使って、
試してみてくださいね(^^♪
幅（px）の数値はサンプルでは150pxにしましたが
使用する幅に変更して下さい。
【HTML】
ここにテキストor150px以下の画像など
【スタイルシート】
.float150{
float: left;
width: 150px;
overflow: hidden;
}
.clear{
clear: both;
}
スタイルシートの「overflow: hidden;」の部分は
「はみだした部分は表示しない」という指定です。
この指定がないと、はみ出した場合、スクロールバーが出たり、
ボックスからはみ出してページが崩れることがあります。
「clear: both;」でfloatを解除します。
私は、アフィリエイトサイトで商品画像などを頻繁にアップするような
ときは「float150」「float200」「float300」などと、画像の幅に合わ
せたスタイルシートを記述して、使いまわしています。
スタイルシートの記述は「.」や「;」を書き忘れただけで
スタイルシートの指定が反映されなかったり、表示が変になったりする
ので、あれれ？？？と思ったら、ソースを見直して見てくださいね。
MovableTypeのカスタマイズのお役にたてる
メルマガ＆サイトを目指してますｐ(^-^)ｑ
