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

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

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

ＨＰのコンテンツを作成しています。 コンテンツ内に基礎代謝自動計算ブログパーツを挿入しました。 テキストをブログパーツの左側にくるようにしたいのですが、タグの修正がわかりません。 それと、ブログパーツとテキストの間に余白もあけたいのです。 下記はブログパーツのテキストです。（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> 初心者なのでタグ等についても詳しくありません。 どなたか教えていただけないでしょうか？ 添付データにＨＰとタグを掲載しました。 よろしお願いいたします。

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

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答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)
回答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>

tsutabo
質問者

補足

ご回答ありがとうございます。 試してみました。 位置はテキストが左、パーツが右になったのですが、パーツの部分がスクロール画面になってしまいました。 それと、テキストの行間が広くなってしまいます。 希望はこのページ↓の先頭部分にある画像とテキストの感じです。難しいでしょうか？ もし、お時間があればよろしくお願いいたします。 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

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • テキストを画像の右にしたいのですが・・

    ブログパーツで下記のものを使用しています。 <div style="text-align:left;padding-top:10px; padding-bottom:5px"> <iframe src="http://chiccuri.sakura.ne.jp/blog_parts/kisotaisya.html" width="168" height="250" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe><p style="font-size:13px; margin-top:2px;"></p></div> このパーツの右に文章を回りこみさせたいのですが、どこにどのようなタグを挿入すればいいのでしょうか？ <div style="text-align:left;float:left;padding-top:10px; padding-bottom:5px"> ではうまくいきませんでした。 初心者ですが、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テキストボックスの表示

    テキストボックスの表示 テキストボックスを２つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＡ </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＢ </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか？

    • ベストアンサー
    • HTML
  • ツイスターのブログパーツ貼れない！

    ツイスターのブログパーツ貼れない！ gooブログで、 <div align="center"><a href="http://twitter.com/lovemusic" target="_blank"><img src="http://twimg.info/src/?id=lovemusic" width="160" height="240" border="0"></a><br><a href="http://twimg.info/" style="text-decoration:none"><span style="font-size:9pt">Powered by ついめ～じ</span></a></div> と、 ここのサイト http://twimg.info/ つかって生成したけど貼れないのは試用？

  • line-heightが利いてない

    下記のように指定しましたが、line-heightだけ利いてないと 思います。行間があきません。 #new { width:160px; text-align: left; line-height: 150%; float:left; margin: 10 10 10 0; padding: 5; border:1px solid #800000; clear : left; } HTML <div id="new">コラム<br>{$tag}</div> $tagはphpを使っています。 line-heightが利かないことはあるのでしょうか？

    • ベストアンサー
    • HTML
  • ブログでのアソシエイト画像表示について

    FC2のブログを利用しています。 アマゾンのアソシエイトにも登録していて、画像をよく使っています。 使用する画像はamazyというサイトを利用してタグを作って使用しています。amazyではアマゾンで商品を検索するように検索して、トレイに保存するとタグを自動作成してくれるのでとても重宝しています。 レビューをつけたりもできますが、私はよく画像のみを使用しています。 今回も画像のみを３つ並べて表示させたいと思い、画像のタグを連続して３つ並べました。 <div class="amz-container"><div class="amz-image" style="padding:5px;"><a href="http://amazon.co.jp/o/ASIN/4757521758/アソシエイトID/ref=nosim" target="_blank"><img src="http://ecx.images-amazon.com/images/I/21OkN1g2hFL.jpg" alt="鋼の錬金術師１８" border="0" /></a></div><div class="amz-content" style="padding:5px;"></div><div style="font-size:xx-small;text-align:right;"></div></div>▲<div class="amz-container"><div class="amz-image" style="padding:5px;"><a href="http://amazon.co.jp/o/ASIN/4757520646/アソシエイトID/ref=nosim" target="_blank"><img src="http://ecx.images-amazon.com/images/I/21ga7RVmgPL.jpg" alt="鋼の錬金術師１７" border="0" /></a></div><div class="amz-content" style="padding:5px;"></div><div style="font-size:xx-small;text-align:right;"></div></div>▲<div class="amz-container"><div class="amz-image" style="padding:5px;"><a href="http://amazon.co.jp/o/ASIN/4757519656/アソシエイトID/ref=nosim" target="_blank"><img src="http://ecx.images-amazon.com/images/I/21rG3si20HL.jpg" alt="鋼の錬金術師１６" border="0" /></a></div><div class="amz-content" style="padding:5px;"></div><div style="font-size:xx-small;text-align:right;"></div></div> ※▲は一つの画像の区切りです。分かりやすくする為に入れました。実際にはスペースも改行も入れていません。 ※実際は最後の</div></div>の前にamazyのリンクURLが入ります。 そうしたら、ブログ上に表示された画像が ■■■ ■■■■■■ ■■■■■■■■■ 　　　　　■■■■■■ 　　　　　　　　　 ■■■ という具合に少しずつ右下にズレてしまいました。(■マス３×３で１枚の画像だと思ってください) ここで他の質問を調べたところ、<p></p>で囲むといいと書いてあったので試してみましたが何も変化ありませんでした。 何となくですが、どこかのタグを消せば簡単に、キレイにいくような感じがするのですが…やはりテーブルを使わないと直らないでしょうか？ また、画像を文章の最後に持ってくると何も問題はないのですが、画像を先頭に持ってくると画像の脇から文章が始まってしまって見栄えが悪いです。 ■■■ ■■■あいうえお ■■■かきくけこ さしすせそ たちつてと という感じになります。 画像最後に改行を入れたり、<br>や<p>を入れてみましたが変化はありませんでした。 ■■■ ■■■ ■■■ あいうえお かきくけこ さしすせそ と表示させるにはどうすればいいでしょうか？ よろしくお願いします！

  • 画像を少しだけ左に寄せる方法教えて下さい

    ホームページをつくっています。 ある画像を <Div Align="right"><img src='画像URL' border=0></Div> <Div Align="right">画像の下に名前</Div> というタグで表示しましたが、どうも右端にピッタリ行き過ぎてしまいます。大体3～4センチ左に移動して表示するにはどうしたら良いでしょうか?　ご教示いただけるとありがたいです。

  • CSS　ブログのタイトルの背景が表示されません

    検索してみたのですが、どこが悪いのか不明なのでどなたか教えて下さい＞＜ エキサイトブログのマイスキンで、 ブログの日のタイトルの前に画像を付けたいのですが、 DIV.POST_HEAD td.ti { text-indent: 43px; background: url(つけたい画像のURL(gif)) no-repeat left top; line-height: 1.6; _height: 27px; vertical-align: middle} となっていても画像が表示されずタイトルの文字のみです。 もしや画像の高さを27pxにした方がいいのか？と思って 画像サイズを27×23pxにしたのですが、それでも表示されません。 画像のアップロードは出来ています。 全体的？に見ると DIV.POST { MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;} DIV.POST_HEAD { BORDER-BOTTOM : 1PX #CCC dashed; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; } DIV.POST_HEAD td.ti { text-indent: 43px; background: url(画像URL.gif) no-repeat left top; line-height: 1.6; _height: 27px; vertical-align: middle} DIV.POST_HEAD td.admin { text-indent: 0;} DIV.POST_HEAD a { font-size: 110%; letter-spacing: 4px; } DIV.POST_TTL { FONT : BOLD 15PT/130%;} DIV.POST_ADMIN { TEXT-ALIGN : RIGHT;} DIV.POST_BODY { LINE-HEIGHT : 150%; WIDTH : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; } DIV.POST_TAIL { FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; } DIV.COMMENT { BORDER : 1PX #D3D3D3 SOLID; BACKGROUND : #F7F7F7; PADDING : 15PX; MARGIN : 20PX 0PX; } DIV.COMMENT_BODY { MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%;} DIV.COMMENT_TAIL { MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; COLOR : #777;} DIV.COMMENT_INPUT { MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; } DIV.COMMENT_LINE { BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; } コンナカンジです・・・。 どこが悪いのでしょうか・・・。 ちなみに上手く表示されている方のソースからひっぱっても 私のプレビューで見ると何故かそこだけ表示されません。 もっと他のところを見るべきなのでしょうか？ 素人で申し訳ありませんが どなたか分かる方、アドバイスを頂けたらうれしいです。

  • ブログパーツの設定位置について

    gooブログのメニューに貼り付けないことは分ってますのでトップページにブログパーツを貼り付けたいと思ってます。 gooあしあとなどのブログパーツを設置して横にスペースが空いた所に他のブログパーツをアップさせたいのですがalign="right" などのタグを入れても反映できません ブログパーツに変換後の横に並べて反映させる方法を教えてください 宜しくお願いします。

  • HP作成で背景画像が表示されないです・・

    いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 －　html　－ <body> <div id="container"> <div id="header">　　→背景画像表示されます。 　<p>＊＊＊＊＊</p> 　</div> <div id="box"> <div id="left">　　→背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right">　→背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> －　ｃｓｓ　－ #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }

  • float　テキストの右下寄せ

    MTでブログを作っています。テンプレートを変更したのですが、躓いています。 width:800px; height:287px; のサイズのbackgroundの上で（中で？）右下寄せにブログタイトルと検索ボックスを表示させたいのですがうまくいきません。 かなりの初心者で独学のみでしています。どこが何なのかよく理解できていないのでheaderの部分をすべて貼ります。 /* header */ /* -------------------------------------------------------- */ h1 { width:800px; font-size:80%; font-weight:normal; color:#666666; text-align:left; margin:0 auto; padding:15px 0 0 0; } #header { width:800px; height:287px; color:#333322; text-align:left; margin:0 auto; background:#eeeedd; background-image: url(http://■■■.net/images/●●●.gif); border-top:solid 1px #bbbb99; border-left:solid 1px #bbbb99; border-right:solid 1px #bbbb99; border-bottom:0; } #header div.lbox { width:510px; float:left; } #header div.lbox p { font-size:180%; font-weight:bold; line-height:120%; margin:8px 0 5px 10px; } #header div.rbox { width:170px; padding:15px 0 0 0; float:right; } #header div.rbox input { vertical-align:top; } #header div.rbox input.box { width:120px; margin:0 5px 0 0; } #header a:link , #header a:visited { color:#333322; background:#eeeedd; } #header a:hover , #header a:active { color:#666655; background:#eeeedd; } 現在、左上にブログタイトル、右上に検索ボックス（その下に検索ボタン）があります。 これを横並びに右下へ持っていきたいのですが・・・。 それと、タイトルテキストの部分がeeeedd色の背景の上に黒字になっているのですが、eeeedd色でなくbackgroundの画像に透過させるにはどうすればよいのでしょうか？？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する