2006/05/28
【MovableTypeをおしゃれにカスタマイズ♪】NO.9 ■floatを使う：スタイルシート
━━━━━━━━━━━━━━━━━━━━━━━━2006.5.27━━━ 「MovableTypeをおしゃれにカスタマイズ♪」〜 NO.9 〜 MovableTypeをデフォルトからのカスタマイズを実況中！ http://movabletype.gift-select.com/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ こんばんわ。今日は夜にお届けします♪ 今、集中して作業しているのは、MTのタグ辞典の作成です。 早く公開できるようにかんばりますｐ(^-^)ｑ ■floatを使う：スタイルシート■ 写真などを横に並べたいときにはどうしますか？ それが「表」なら「tableタグ」を使って並べる方法がありますね。 スタイルシートで並べるには「float」を使います。 floatでright、leftを指定すると後に続く要素が右、左に回りこみます。 では、実際に150px幅のボックス（<div>〜</div>で囲んだ部分）を 左寄せにする、下のサンプルのソースを使って、 試してみてくださいね(^^♪ 幅（px）の数値はサンプルでは150pxにしましたが 使用する幅に変更して下さい。 <div>〜</div>の中のテキストも変更して下さいね。 【HTML】 <div class="float150px"> ここにテキストor150px以下の画像など </div> <div> ここにテキストor画像など </div> <div class="clear"> ここで回り込みが解除されます </div> 【スタイルシート】 .float150{ float: left; width: 150px; overflow: hidden; } .clear{ clear: both; } スタイルシートの「overflow: hidden;」の部分は 「はみだした部分は表示しない」という指定です。 この指定がないと、はみ出した場合、スクロールバーが出たり、 ボックスからはみ出してページが崩れることがあります。 「clear: both;」でfloatを解除します。 私は、アフィリエイトサイトで商品画像などを頻繁にアップするような ときは「float150」「float200」「float300」などと、画像の幅に合わ せたスタイルシートを記述して、使いまわしています。 スタイルシートの記述は「.」や「;」を書き忘れただけで スタイルシートの指定が反映されなかったり、表示が変になったりする ので、あれれ？？？と思ったら、ソースを見直して見てくださいね。 MovableTypeのカスタマイズのお役にたてる メルマガ＆サイトを目指してますｐ(^-^)ｑ ご意見・ご要望・ご感想・質問・リクエストなど info@gift-select.comまでどうぞ(*^^) お待ちしています♪ ■今日の小技 <$MTBlogURL$>の使い方■ <$MTBlogURL$>はサイトのURLを表示させる変数タグです。 それ以外にも、たとえばサーバーに「images」というフォルダに画像 （sample.gif）をアップロードしてあったとして、その画像のURLを記 述したいなら <$MTBlogURL$>images/sample.gif というように記述できます。 また、スタイルシートで背景（background）に画像を指定する場合でも サイトのURLの部分に<$MTBlogURL$>と記述することができます。 つまり「サイトのURL ＝ <$MTBlogURL$>」と 置き換えることができるということです。 URLそのものを表示させるだけでなく、続くアドレスを記述したりする と、以外と使い道があるかも？！ 最後まで読んでいただいて、ありがとうございました♪ わかりづらいところもあると思いますので、メルマガやブログの内容で 意味不明の部分がありましたら質問してくださいね。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MovableTypeをおしゃれにカスタマイズ♪ http://movabletype.gift-select.com 発行者：YU info@gift-select.com 発行システム：『まぐまぐ！』 http://www.mag2.com/ 配信中止はこちら http://www.mag2.com/m/0000194715.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
