- ベストアンサー
fc2 画像と文字の間をあける方法
皆様 お世話になります。 左側に画像があり、その右に文字やアフィリを入れる場合、 <a href="画像のＵＲＬ" target="_blank"><img src="画像のＵＲＬ" alt="bi" border="0" /align="left" ></a>文字をココに入れる<br clear="all" /> とやることはわかりましたが、もう少し画像と文字の間を開けたいという場合はどうすればいいのでしょうか？ どなたか知ってらっしゃいましたら教えて下さい。 宜しくお願いします。 どうすればいいのでしょうか？
- ブログ
- 回答数5
- ありがとう数7
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
上下にスペースを入れる場合は vspace 左右に入れる場合は hspace http://www.tagindex.com/html_tag/img/img_space.html 重箱の隅を突付くようですが、 http://www.tagindex.com/html_tag/img/img_align.html と http://www.tagindex.com/html_tag/img/br_clear.html もあわせてお読みになると良いと思います。 （若干書き間違いがあるように思います）
その他の回答 (4)
- yuukan
- ベストアンサー率34% (192/560)
文字の前に 全角スペースを入れれば 空間があきますが それでは駄目なんですか？ 半角スペースだとスペースは表示されません
お礼
こんにちは。 文字の前に全角スペースをいれましたが、 空間はあきませんでした。 私のやりかたがどこか間違っているんだと思います。 他の回答者様のやりかたでなんとかできました。 教えていただいてどうもありがとうございました。
- xenotactic
- ベストアンサー率54% (96/175)
あの、私が言っているのは 「画像自体に空白を作る」のであって、 「画像の横に空白を入れる」のではありません。 画像を実際に編集し、 空白をあけたい部分を広げ、 表示箇所の背景と同じ色、または透過にして保存し、 再びアップロードして使う、ということです。 画像自体のサイズはブラウザに依存せず等しいため、 どのブラウザでも同じ表示が可能となります。
お礼
こんにちは。 いろいろと教えて頂きましたが、はっきりいって 私のアタマではむずかしすぎてちんぷんかんぷんです（笑）。 他の回答者様の教えでなんとか解決できました。 本当にいろいろとご説明いただき、ありがとうございました。
No.1の方も仰っていますが、左右にスペースを入れる場合は hspace align="left" Hspace="？？" vspace="30" <Img Src="画像URL" Align="画像の位置" Hspace="横間隔" Vspace="縦間隔"> http://heo.jp/tag/href/imgalign.html
お礼
こんにちは。 なんとか解決できました。 どうもありがとうございました。
- xenotactic
- ベストアンサー率54% (96/175)
画像自体の右側に白い空白を作ってみてはどうですか？ もっとも簡単で的確な方法だと思います。
お礼
おはようございます。 そんな方法があるということなどまるで知りませんでした。 具体的にどこに空白をつくればいいのでしょうか？ 何回かやってみましたがまるでわかりませんでした。 もしよろしければご教授ください。 宜しくお願いします。
関連するQ&A
- ＦＣ２ブログカスタマイズ リンク文字間の間隔について
記事中のカスタマイズで質問いたします 画像バナーに文字を回り込ます場合は <a href="画像のＵＲＬ" target="_blank"><img src="画像のＵＲＬ" alt="bi" border="0"align="left"style="padding-right:20px;" ></a>文字をココに入れる<br clear="all"> で使用しております このソースの場合画像と文字の間隔はstyle="padding-right:20px;" の部分で調整します 判らないのは画像バナーではなくテキストバナーの間隔を自由な数値で放して同じ行中で設置する場合はどのようにするのでしょうか？ キーボード操作でスペースを空けても単なる文章と違い間隔は空きませんしソースとソースの間に を入れてもほんの少し離れるだけです。 最初に提示しましたソースに画像ＵＲＬでは無くテキストバナーのＵＲＬを入れたりしてみましたが上手く行きません スタイルシートをいじらないで各部分で使いたいのですが 教えていただけますでしょうか?
- ベストアンサー
- ブログ
- 画像の右横にできたスペースを消したい
ブログのメニューの右横にスペースがあって見栄えが良くありません。そのスペースの場所にリンクや画像を貼っているわけではないのですが、どうしたらそのスペースを削除できるんでしょうか？ 一応、メニューに使っているHTMLを載せておきます。何か間違っていましたらご指摘お願いします。 <div id="top"><P align="left"><A href="メニュー1のリンク"><IMG src="メニュー1の画像" align="middle" border="0"></A><A href="メニュー2のリンク"><IMG src="メニュー2の画像" align="middle" border="0"></A><A href="メニュー3のリンク" target="_blank"><IMG src="メニュー3の画像" align="middle" border="0"></A><A href="メニュー4のリンク"><IMG src="メニュー4の画像" align="middle" border="0"></A><A href="メニュー5のリンク"><IMG src="メニュー5の画像" align="middle" border="0"></A><A href="メニュー1のリンク"><IMG src="メニュー6の画像" align="middle" border="0"></A></p></div>
- 締切済み
- ブログ
- ウインドウを狭めてもレイアウトが崩れない方法
ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
- ベストアンサー
- HTML
- 文字の回りこみについて
7タグという、ホームページ作成参考ページをみながら作り始めています。かずかずあった問題も、これまで自分で解決してこれたのですが、文字の回りこみについて、質問があります。 <IMG SRC="画像名.jpg" align="left"> <A HREF="profile.html">自己紹介</A> <br> <A HREF="link.html">日記</A> <br> <A HREF="link.html">掲示板</A> <br> <A HREF="link.html">リンク</A> と、align="left"という属性を入力すると「自己紹介」という文字が画像の右に表示されず、下に回りこみます、という説明があったのですが、どうやっても無理です。 ふと、ひらめいて、画像の下にスペース<br>を入れてみたら、自己紹介以下の文字列は下にゆくようになりましたが、こんな解決でいいのかなぁと思います。この場合、align="left"も必要ありませんでした。
- ベストアンサー
- HTML
- 文字とテーブルの間の間隔について
質問させていただきます。 以下のhtmlをフレームの左側として使っているのですが、 <center> <b><font size="5" color="pink" face="'Comic Sans MS'">文字</font></b><img src="画像" align="middle"><br /> <img src="ライン画像"><br /> </center> <table border="0" height="100%" width="260" align="center"> <tr><td align="left"><blockquote><br /> <b><font size="4" color="deeppink">タイトル</font></b><br /><br /> <font size="2">ジャンル<br /> <a href="URL" target="right">仮</a>/<a href="URL" target="right">仮2</a>/<a href="URL" target="right">仮3</a><br /> </font><br /><br /><br /><br /><br /><br /><br /><br /><br /> </blockquote></td></tr></table> ライン画像とテーブルの間の改行は一つしかないのですが、かなりスペースが空いてしまいます。 反転して見てましたが、やはりスペースと改行と言うように、しっかりと改行は一つだけでした。 しかし、このスペースは健在です。 どうしたら、このスペースをなくすことが出来るのでしょうか？
- ベストアンサー
- Windows XP
- 画像を２つ横に並べる方法と、文字の回りこみの方法又はサイトを案内して下さい
現在、サイドバーのフリーエリアに付けている画像のことで質問します。 これらの画像を２つ横に並べる方法、又は、文字の回りこみの挿入タグの載っているサイトを教えて下さい。 『 <script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script> 』 の横に 『 <a href="リンク先ＵＲＬ"target="_blank"><img src="画像ＵＲＬ" border="0"></a> 』 を並べる方法 と 『 <div &align><iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://○○○.html" name="MainFrame">Iフレームを使用しています。画像が正しく見えない場合はブラウザを代えていただくかなどしてください。<br>「<a href="http://○○jp/">web素材はっぴーフリー</a>」 「<a href="http://○○com/~kmid/">押し花とアイコン</a>」</iframe></div> 』 の横に 『 <script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script> 』 を並べる方法 『 <script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script> 』 の 横への文字の回りこみの方法 ↑ イメージ的には、『 <a href="リンク先ＵＲＬ"target="_blank"><img src="画像ＵＲＬ" border="0" align="left"style="padding:5px;"></a>文字文字文字文字 』のような感じにならないのでしょうか？ これらは可能なのでしょうか？ 可能ならばこれらが載っているサイトを教えて頂きたいのですが、お願いします。
- ベストアンサー
- ブログ
- HTMLの質問です。画像を並べて名称を表記します。
ホームページビルダーで作成しました。 今回の例では画像を横4枚、縦2段に並べて画像下にテキストを表記します。 各画像にはリンクを貼っています。 ところが画像下のテキストの右端だけがダブって表記されます。 具体的にはタイトル4とタイトル8というテキストです。 問題点が分かる方はご教授願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="hpb9tm04_8.css" id="hpb9tm04_8" a:link { text-decoration:underline; color:#0000FF; } a:visited { text-decoration:underline; color:#9900CC; } a:active { text-decoration:underline; color:#00FF00; } a:hover { text-decoration:underline; color:#00FF00; position:relative;top:3px;left:3px; }</style> </head> <body style="color: #000000; background-color: #ffffff" background="壁紙画像"> <div> <table class="hpb-main" id="HPB_LAYOUTTABLE_05" cellspacing="0" cellpadding="0" width="760" border="0"> <tbody> <tr> <td class="hpb-cnt-cell1" id="HPB_LAYOUT_LMH0" valign="top" align="center" height="18"> <table class="hpb-hmenu1" id="HPB_LINK_MENU_TABLE_01" cellspacing="0" cellpadding="0" align="center" border="0"> </table> </td> </tr> <tr> <td class="hpb-cnt-cell3-x" valign="top" align="center"><div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" /> <table class="hpb-lb-tb1" cellspacing="0" cellpadding="0" align="center" border="0"> <tbody> <tr> <td class="hpb-lb-tb1-cell3" id="HPB_LAYOUT_CONTENTS" valign="top" height="400"> <p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /><br />タイトル2</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /><br />タイトル3</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /><br />タイトル4</div></a> <div style="clear:both"></div></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</div></a> <div style="clear:both"></div></p> <p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html>
- ベストアンサー
- HTML
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- 文字の回りこみについて
画像の回りこみ方法をいろいろと調べてみたのですが、文字を右に回り込ませる場合、「align = "left"」や「<br clear="all">」をつけるというところまではわかったのですが、例に挙がっている画像のＨＴＭＬとはやや異なるようで、うまくいきません。例えば以下のような画像の場合どこにつければ良いのでしょうか？よろしくお願いします。 <a href="http://px.a8.net/svt/ejp?a8mat=1HNMYP+5TKMHM+V5O+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.towerrecords.co.jp%2Fsitemap%2FCSfCardMain.jsp%3FGOODS_NO%3D1897407%26GOODS_SORT_CD%3D103" target="_blank"> <img border="0" alt="" src="http://img.towerrecords.co.jp/images/jacket/tower/4988005528353.jpg"></a> <img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=1HNMYP+5TKMHM+V5O+BWGDT" alt="">
- ベストアンサー
- ブログ
- 画像の上に文字を表示
スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。 <IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0> ・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。 ＃マウスをのせて表示は除外。
- ベストアンサー
- CSS
お礼
おはようございます。 align="left" vspace="30"でやってみましたところ、 たしかに画像と文字の間隔はあきましたが、画像も一緒に右に ずれてしまいました。 きっと私のやりかたがどこか違っているのだと思いますが まるでわかりませんでした。 このたびはURLまで貼りつけていただき感謝しております。 どうもありがとうございました。