2006年11月14日
画像を右に配置して、そのとなりの文章を枠線で囲む。（CSS編集）
画像を右に配置して、そのとなりに文章を書くことができるように設定してみましょう。それに加えて、文章で強調したい内容を枠線で囲んで、見やすい位置に配置する設定についてもまとめてみました。
この記事は画像を左に配置してそのとなりに文字を書く。（CSS編集）という記事の続編記事です。また、CSS編集の方法については、CSS編集をしましょうを参照してください。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。
画像を右に配置して、そのとなりに文字を書く。（文字の回りこみ。）
記事の右に画像を置いて、その左側に文字を書きたいときは、float:right;とします。
これは画像を右(right)に配置して、文字はその画像に回り込ませるという指定です。
そして、文字の最後は、clear:both;で回り込みを解除します。
CSS編集で追加するコード
※imgleftとclearについては、画像を左に配置してそのとなりに文字を書く。（CSS編集）で追加しています。すでに追加されている方はimgrightだけを追加してください。
/*画像の回り込みの設定*/
.imgleft
{
float:left;
}
.imgright
{
float:right;
}
/*文字の回り込みの解除*/
.clear
{
clear:both;
}
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgright" />回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。
---------別の方法---------
<div class="imgright"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。
→
「右側のさせていただきました」
画像を左側に配置するのは、
記事にしていたけど、右側は、
まだ記事にしてなかったもんね♪
お待たせしちゃてごめんなさい♪
(_ _(--;(_ _(--; ﾍﾟｺﾍﾟｺ
これで回り込みが解除されました。
文章を枠線で囲み強調してみましょう。（画像を左に配置）
枠線で囲む部分について、体裁を設定しましょう。そして記事には
<div class="leftfrm">枠線内の文字</div>
のように記入します。- background-color: #FFFFFF;→枠線部分の背景色の設定をします。
- margin : 10px 20px 15px 150px;
枠線部分の配置はmarginで調節します。
margin :上 右 下 左;で設定されているので、画像（幅130px）の右側の文章を枠線で囲む場合は、例えば『上の行から10px、右端から20px、下の行まで15px、左端から150px』としました。
※このまま使用してくださっても構いませんが、右端から20pxや左端から150pxについては、ご自分の記事に合わせて調節した方が見やすく配置できます。m(_ _)m - padding: 5px;→枠線内の文字と枠線との余白を調節します。
- border-style: solid;→枠線の線種
- border-width: 2px;→枠線の太さ
- border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;→枠線の色
CSS編集で追加するコード
/*左側に画像、右に枠線囲み*/
.leftfrm
{
background-color: #FFFFFF;/*背景色*/
margin : 10px 20px 15px 150px;/*配置*/
padding: 5px;/*枠内の余白*/
border-style: solid;/*線種*/
border-width: 2px;/*枠線の太さ*/
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;/*枠線の色*/
}
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgleft" />回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="leftfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。
---------別の方法---------
<div class="imgleft"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="leftfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。
←
「alt="画像のBlogPetの文字
(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
imgタグのalt属性のことも大切だよね♪
これで回り込みが解除されました。
文章を枠線で囲み強調してみましょう。（画像を右に配置）
leftfrmのmarginだけを調整します。
margin : 10px 155px 15px 20px;
右側に配置された画像（幅130px）の左側の文章を枠線で囲むので『上の行から10px、右端から155px、下の行まで15px、左端から20px』としました。
※このまま使用してくださっても構いませんが、右端から155pxや左端から20pxについては、ご自分の記事に合わせて調節した方が見やすく配置できます。m(_ _)m
CSS編集で追加するコード
/*右側に画像、左に枠線囲み*/
.rightfrm
{
background-color: #FFFFFF;/*背景色*/
margin : 10px 155px 15px 20px;/*配置*/
padding: 5px;/*枠内の余白*/
border-style: solid;/*線種*/
border-width: 2px;/*枠線の太さ*/
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;/*枠線の色*/
}
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgright" />回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="rightfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。
---------別の方法---------
<div class="imgright"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="rightfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。
→
呪文？ってヾ(￣o￣;)ｵｲｵｲ
確かに、この記事は呪文
だらけかもしれないね♪
これで回り込みが解除されました。
この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New 画像にポラロイド風の飾り枠を設定しましょう（CSS編集） | Top | CLEVER BBSスパム対策 IPスパムフィルターを完璧にする Old≫
トラックバックURL
トラックバック
≫ やってみた･･･ from さるのこしかけ
投稿で画像を複数挿入する際の 『かっちょいぃ~く見せる小技』 を ｙｏｚｏの気が向いたと気2.0様で教えて頂きましたm(_ _"m)本当に丁寧に教えてくださいますｎｏ･･･私なんか自分の入力ミスまで質問しちゃいましたヮ･･･ まず ｿｯﾁﾗ様です (。・・)σ∴像枠� [Read More]
コメント
先日のアドバイスを記事にして下さったんですねヽ(▽￣*)ﾉ〜〜〜
ありがとうございまっすm(_ _"m)
(￣ω￣;)ｴｰﾄｫ...ラブログは＜br clear="all"＞を多く使うみたいなんですけど
その場合は回り込み解除を設定せずに･･･ということで大丈夫なんでしょうか･･･
試してみます!!
Posted by ウッキ at 2006.11.14 20:48 | edit
コメント
＞先日のアドバイスを記事にして下さったんですねヽ(▽￣*)ﾉ〜〜〜
右に画像を配置して、左に文を回り込ませる場合や、特に枠線で文を囲むのはどうしてるのかと聞かれたりもしましたから、一緒に説明するようにしましたよ♪(*^-^)
＞(￣ω￣;)ｴｰﾄｫ...ラブログは<br clear="all">を多く使うみたい
そうですね♪画像をアップロードするとついでに挿入されるブログもありますね。<br clear="all">はXHTML準拠の記述でないのでyozoは使用しないようにしています。（ウッキさんのテンプレもXHTMLですもんね。）今のところ、回り込みの解除ができると思いますが、使用はおすすめできませんよ♪(^○^)
Posted by ウッキさんへ at 2006.11.14 23:36 | edit
コメント
ぉぉぉ、すごいなぁ☆
そしてXHTMLで＜br clear="all"＞連発している私。。。反省☆
わかってるんですけどねぇf(^_^;)
ページ毎のテンプレで全部違って来ちゃうウェブリでは、ちょっと設定が・・・うにゃうにゃ・・・（言い訳中☆
影のFC2ブログでこのcss設定使わせていただきますね〜♪
それにしても、マメだわ、yozo様（尊敬〜..:**:.**
Posted by まこ at 2006.11.15 02:26 | edit
コメント
＞ぉぉぉ、すごいなぁ☆そしてXHTMLで＜br clear="all"＞連発している私。。。反省☆
ふふふ・・・align="left" などのalign属性で配置して、<br clear="all">というのが、シンプルでわかり安いですもんね。しかも自動入力はたいていこれになってますしね。（06/11/15現在）
＞影のFC2ブログでこのcss設定使わせていただきますね〜♪
＞それにしても、マメだわ、yozo様（尊敬〜..:**:.**
わぁ♪参考にしてくださってとっても励みになりますよ♪自分の記事の備忘録のような感じで、CSSの勉強のために記事を書いているんですよ♪お気づきの点等ございましたら、いつでも指摘してくださいね。（これが一番ありがたいですからね。）
って影のブログがあるのですか・・・（;￣ー￣A ｱｾｱｾ（FC2は本当に知らなかったりして･･･）
Posted by まこさんへ at 2006.11.15 11:51 | edit
コメント
yozoさんのところは枠線でいろんな注意を呼びかけておられますが、
きちんとCSSで設定されているのですね!!
すごいなぁ。私はついついstyleを使ってしまいますが。(;￣ー￣A アセアセ・・・
CSSに書いておいたほうがメンテナンスしやすいですものね。
私もyozoさんを見習ってきちんとCSSを使うようにします♪
いつもありがとうございます♪(*- -)(*_ _)ペコリ
Posted by まゆび at 2006.11.15 17:42 | edit
コメント
＞きちんとCSSで設定されているのですね!!
いえいえ♪yozoも一部style属性を使ってますよ。ただ、色々と細かい設定も書いていたりしますから、タグがとても見にくくなってしまうので、なるべくCSSファイルに書き出すようにしているんですよ♪それに、XHTML1.1ではstyle属性は非推奨とのことですからね。文字の色まで決めたほうがいいのでしょうね。少しずつでも、CSS書き出ししていこうかなって思ってます。
(*´ο`*)=3 はふぅん
Posted by まゆびさんへ at 2006.11.15 18:02 | edit
コメント
おおぉっこれは細かく説明されていますね。スゴイ！
ワタくシ、説明記事を書くのが億劫で、とても参考になりました。
うっとこのブログは記事の体裁に気をつかってないなぁとつくづく思いましたです。少しはデコレーションしないといけないかなぁ。
改行タグの回り込み、ワタくシはbr style="clear:both"のほうをよく使います。ストリクトなやりかたはclass指定なんでしょうけど。（class指定すると、ブログのスタイルシートが読み込まれない管理ページでは確認のところで、回り込み解除できてないんですよ）
Posted by maRk at 2006.11.15 18:52 | edit
コメント
＞おおぉっこれは細かく説明されていますね。スゴイ！
ありがとーございまっす♪大変励みになりますよ♪ m(_ _)m
っというか、yozoの自己満の世界だったりして・・・（;￣ー￣A ｱｾｱｾ･･･
＞うっとこのブログは記事の体裁に気をつかってないなぁとつくづく思いましたです。
いえいえ♪見習うのはyozoの方です。画像を使って凝ったことをされていますね。まるでHPみたいなブログですよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞改行タグの回り込み、ワタくシはbr style="clear:both"のほうをよく使います。
CSSファイルでの定義になっていくようですが、まだまだ現場はCSSファイルを十分に触らせてくれなかったり・・・ですもんね♪┐( -"-)┌ﾔﾚﾔﾚ... 非推奨とかいわれてもねぇ~っていうのがyozoも本音だったりしますよ♪・・・ヾ(￣o￣;)ｵｲｵｲ
Posted by maRkさんへ at 2006.11.15 20:08 | edit
コメント
ラブログの場合、回りこみ文字全般と右画像が投稿する記事の確認画面に反映されないようです＜br clear="all"＞を多く使うのはこの所為かもしれませんね
ブログ自体ははキレイに収まっております。
なので使用する際には画像の高さに何行なのか、確認しておくと便利でっす
＞XHTML準拠の記述でないのでyozoは使用しないようにしています。
＞（ウッキさんのテンプレもXHTMLですもんね。）
後々大変な思いをしても嫌なので ウッキはありがたく導入させていただきました♪
ありがとうございます(ﾟ▽ﾟ*)ﾆﾊﾟｯ♪
Posted by ウッキ at 2006.11.16 08:01 | edit
コメント
＞回りこみ文字全般と右画像が投稿する記事の確認画面に反映されないようです
たいていのブログサービスでも記事送信前のプレビューでCSS編集で追加した内容が反映されることは、ないみたいですね。今後の改善を期待したいところですね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
＞後々大変な思いをしても嫌なので ウッキはありがたく導入させていただきました♪
あんまり神経質になることもないとは思うのですが、色々なブラウザでもちゃんと表示されるようにしておきたいものですよね。面倒ですがやむを得ませんね┐( -"-)┌ﾔﾚﾔﾚ...
追伸：こちらの記事にもトラバありがとーございまっす♪
yozoからもお返しのトラバを入れさせていただきました。m(_ _)m
Posted by ウッキさんへ at 2006.11.16 13:51 | edit