テキストをブログパーツの左に表示させたい

2011/04/11 19:22

このQ&Aのポイント

ＨＰのコンテンツを作成しています。コンテンツ内に基礎代謝自動計算ブログパーツを挿入しました。テキストをブログパーツの左側にくるようにしたいのですが、タグの修正がわかりません。
ブログパーツとテキストの間に余白もあけたいのです。
初心者なのでタグ等についても詳しくありません。どなたか教えていただけないでしょうか？

tsutabo
お礼率50% (20/40)

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

torayoshi
ベストアンサー率62% (910/1449)

2011/04/14 16:30 回答No.2

#1です。行間が広くなってしまったのは段落（p要素）を使ったためです。それとブログパーツの部分はいじってませんので、スクロール画面になってしまった原因についてはこちらでは分かりません。テキストの右にブログパーツを回り込ませるにはスタイルシートで「float:right;」を指定します。が、この指定方法での位置関係は「画面の右端指定」のみです。マイナスのマージンを指定すれば左側にずらすことは出来ますが、こんどは左側のテキストとの位置関係が微妙になってきます。なので、テキストとブログパーツを一つのブロック要素にして幅を指定するしかないと思います。改良版： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> <meta http-equiv="content-type"content="text/html;charset=UTF-8"> </head> <body> <div style="width:800px;"> <div style="padding-top:10px;padding-bottom:5px;margin-left:20px;float:right;"> <iframe src="http://chika-diet.com/blogparts/" width="180"height="200"frameborder="0"scrolling="no"marginwidth="0"marginheight="0"hspace="0"vspace="0"> </iframe> <div style="padding:0;margin:0;border:none;"> <a href="http://chika-diet.com/" target="_blank"> <img src="http://chika-diet.com/blogparts/img/link.jpg" width="180"height="20"border="0"alt="CHIKAのダイエット方法" /> </a> </div> </div> <div style="ont-size:12pt;padding-top:10px;"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト終わり </div> </div> <p style="clear:both;">下に続く要素…</p> </body> </html> テキストとブログパーツの間隔は20px、幅は800pxになってますが便宜変更してください。見え方はこんな感じ↓ http://www16.plala.or.jp/zaq_501/test1.html

その他の回答 (1)

torayoshi
ベストアンサー率62% (910/1449)

2011/04/11 20:14 回答No.1

これでどうでしょうかね？ <div style="float:left;padding-top:10px;margin-right:50px;"> <p>テキストテキストテキストテキスト</p> <p>・・・・・・・・・・・・・・・・</p> <p>・・・・・・・・・・・・・・・・</p> <p>・・・・・・・・・・・・・・・・</p> <p>・・・・・・・・・・・・・・・・</p> <p>・・・・・・・・・・・・・・・・</p> </div> <div style="padding-top:10px;padding-bottom:5px;"> <iframe src="http://chika-diet.com/blogparts/" width="180"height="200"frameborder="0"scrolling="no"marginwidth="0"marginheight="0"hspace="0"vspace="0"> </iframe> <div style="padding:0;margin:0;border:none;"> <a href="http://chika-diet.com/" target="_blank"> <img src="http://chika-diet.com/blogparts/img/link.jpg" width="180"height="20"border="0"alt="CHIKAのダイエット方法" /> </a> </div> </div> <p clear:both;">・・・下に続く要素・・・</p>

質問者

補足 2011/04/13 08:14

ご回答ありがとうございます。試してみました。位置はテキストが左、パーツが右になったのですが、パーツの部分がスクロール画面になってしまいました。それと、テキストの行間が広くなってしまいます。希望はこのページ↓の先頭部分にある画像とテキストの感じです。難しいでしょうか？もし、お時間があればよろしくお願いいたします。 http://diet-yaseru1.net/%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88%E3%81%A8%E4%BE%BF%E7%A7%98/%E4%BE%BF%E7%A7%98%E8%A7%A3%E6%B6%88%E3%81%A8%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88/%E4%BE%BF%E7%A7%98%E8%96%AC%E3%82%92%E4%BD%BF%E3%81%86%E3%81%A8%E4%BE%BF%E7%A7%98%E3%82%92%E6%8B%9B%E3%81%8F%EF%BC%81.html