dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：tsutabo
  • 質問日時：
  • 回答数：2件

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

下記はブログパーツのテキストです。（align="right"を付け加えたのですが位置はかわりませんでした）
<div style="text-align:right; 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" align="right" alt="CHIKAのダイエット方法" /></a></div></div>

初心者なのでタグ等についても詳しくありません。
どなたか教えていただけないでしょうか？
添付データにＨＰとタグを掲載しました。
よろしお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： torayoshi
  • 回答日時：

#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
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： torayoshi
  • 回答日時：

これでどうでしょうかね？


<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>

この回答への補足

ご回答ありがとうございます。

試してみました。
位置はテキストが左、パーツが右になったのですが、パーツの部分がスクロール画面になってしまいました。
それと、テキストの行間が広くなってしまいます。

希望はこのページ↓の先頭部分にある画像とテキストの感じです。難しいでしょうか？
もし、お時間があればよろしくお願いいたします。
http://diet-yaseru1.net/%E3%83%80%E3%82%A4%E3%82 …

補足日時：2011/04/13 08:14
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報