CSS float 回り込み
floatの使い方です
・・・・・う～っ、うまく説明できないっす m(_ _)m
私もですが・・・
皆さん記事を書くときに画像、写真を貼り付けながら記事を書いておられると思います
floatを使うには全部記事を書いてしまってから画像、写真を配置した方がわかりやすいです
慣れてきたら貼り付けながら記事を書く等、自由に出来ると思いますが・・・・
まずは・・・・
記事を書いてしまいます・・・・
後、画像、写真を貼り付ける位置にカーソルをあてクリックしてから画像の配置をクリックする
画像フォルダを開いたとき・・・
「使用する画像の設定」が開いてなければ
クリックして開いておく →
配置で画像を右に置くか左に置くかきめて
チェックを入れてから画像を選択します
※指定なし、中央は回りこみ出来ません
するとこうなります →
次の画像、写真を貼り付ける位置にカーソルをあてクリックしてから画像の配置をクリックする
配置で画像を右に置くか左に置くかきめて
チェックを入れてから画像を選択します →
←するとこうなります
※floatで回り込みを指定したら、必ずclearで解除する必要があります
※続けて右か左で画像を配置したときには<img style="CLEAR: both; FLOAT: left; ・・・
と、配置の前にCLEAR: both; されていますので不要です
文章の途中で回り込みを解除するには
文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。 
文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。終、
↑ここで回り込みを解除するには
<br clear="all" /> で改行にclear="all"を指定するか
次の文章のはじめに <p style="clear: both"> で
clear: bothをスタイルに指定するかです
始、文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。
回り込みを解除するにはHTMLで赤字部分を入れます
・・・・・文章を画像の周りに回りこませるfloatのやりかた。終、<br clear="all" /></p>
<p>始、文章を画像の周りに回りこませるfloa・・・・
または
・・・・・文章を画像の周りに回りこませるfloatのやりかた。終、</p>
<p style="clear: both">始、文章を画像の周りに回りこませるfloa・・・・
<span style="clear: both"> や <div style="clear: both"> などでも可能です
記事にしていて我ながらなんて説明が下手なんだろって思います
要は、配置で右か左かを選ぶことと
clearで解除することだけです
CSS floatってご存知ですか？
CSSでfloatって調べると
「回り込み」って言葉が使われています
自分で普通のサイトを作成するとき
CSSで３カラムとか段組を作るのに必ず使うのがfloatです
なので、自分的には「回り込み」というよりは「寄せる」って言った方がイメージできるんですが・・・・
で、コレ（float）が皆さんのブログに何の関係があるの？
画像とか写真の周りに文章が回りこむ・・・・
ほらっ出てきた「回り込む」
私はわかっていて使いませんが・・・・
と、いうか配置するような画像も文章もありませんので・・
ココのサイトにペタしていただいている皆さんのブログを見てもほとんど使われている方がおられませんでした・・・
わかっていて使わないのか？もしかして知らない方もおられるんじゃないか？
と、いうことで余計なお世話ですが使い方の説明をしたいと思います・・・・・
本当は・・・・
カスタマイズ・・・
次に何をやったらいいか思いつかないだけなんですが・・・
リクしてくださいな・・・・m(_ _)m↑ 上の状態はfloatを使って文章を写真の周りに回りこませています ↑
使い方はカンタンですので次回に説明します
オリジナルスキンCSSの編集 サイドメニュータイトル3
メニューごとに違う画像を使用したり、
文字の書体を特別なものにしたり、
タイトルを英文にしたりするには
メニューそれぞれ別の画像を作りCSSで設定していきます
（画像サイズは、ばらばらでも可能です・・横幅はサイドの幅以下にしてください）
お気に入りブログ162px×60px 最近の記事162px×60px プロフィール162px×60px
ランキング162px×60px ブログの読者162px×60px テーマ一覧162px×60px
ブログ内検索162px×60px ブックマーク162px×60px 最近のコメント162px×71px
← こんな画像を作ってみました ↑
CSSの最後にコピペします
width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
や
height:71px;/*画像の縦、縦が違う場合はそのつど指定*/
この部分は上の画像の例のような画像サイズが他と違っている場合の例です
全部の画像サイズが同じ場合は必要ありませんので削除してください
/*サイドメニュータイトル*/
.mainMenu{
width:170px;/*サイドの幅*/
margin:10px 5px 0 0;/*基本の位置*/
}
.menu_title{
margin: 0;
padding: 0;
border:none;
background-position:0px 0px;
text-indent:-9000px;
background-repeat:no-repeat;
width:162px;/*画像の横*/
height:60px;/*画像の縦*/
}
#profile .menu_title{/*プロフィール*/
background-image:url(画像のURL );
}
#calendar .menu_title{/*カレンダー*/
background-image:url(画像のURL );
width:165px;/*画像の横横幅が違う場合はそのつど指定*/
height:190px;/*画像の縦、縦が違う場合はそのつど指定*/
}
#reader .menu_title{/*このブログの読者*/
background-image:url(画像のURL );
}
#theme_list .menu_title{/*ブログテーマ一覧*/
background-image:url(画像のURL );
}
#recent_entries .menu_title{/*最近の記事一覧*/
background-image:url(画像のURL );
}
#search .menu_title{/*ブログ内検索*/
background-image:url(画像のURL );
}
#archives .menu_title{/*アーカイブ*/
background-image:url(画像のURL );
}
#favorite .menu_title{/*お気に入りブログ*/
background-image:url(画像のURL );
}
#bookmark .menu_title{/*ブックマーク*/
background-image:url(画像のURL );
}
#recent_comment .menu_title{/*最近のコメント*/
background-image:url(画像のURL );
height:71px;/*画像の縦、縦が違う場合はそのつど指定*/
}
#ranking .menu_title{/*ランキング一覧*/
background-image:url(画像のURL );
}
#defaultAd .menu_title{/*サイドＰＲ*/
background-image:url(画像のURL );
}
※重要：スタンダードのベーシックスキンの場合は .menu_titleの前に h4 をつけて ｈ4.menu_title にして下さい
たとえばサイドＰＲの場合・・
#defaultAd h4.menu_title{/*サイドＰＲ*/
background-image:url(画像のURL );
}
※注 ： 必ず赤字部分の画像のサイズは自分で用意したサイズに合わせてください
※注 ： 上のCSSでコメントがピンク色の行は画像サイズが違っていた場合のたとえですので削除してください
