• ベストアンサー

文字が綺麗でサイズが小さいバナーを作るのにはどうしたらいいのでしょうか?

フォトショップで文字入りのバナーを作り、 HPビルダーに貼り付けますが、バナーのサイズが大きく (幅704PIXL、高さ198Pixl、ドキュメントサイズ、幅248.36mm、高さ69.55mm、解像度72)、これを幅13cm、高さ3cm程度のHPの枠に入れるときは <TD width="316" height="57"><IMG src="file:///C:/Documents and Settings/Administrator/Application Data/IBM/Homepage Builder Version 9/tmp/image2.jpg" border="0" width="704" height="198"></TD> <TD width="290" height="57"></TD> をwidth="704から315" height="198から88" のへ数字を変えて調節していますが、 これではサイズが400kぐらいあるのでネットで見る時、重いと思うのです。 そこで最初から13x3cmぐらいの大きさでバナーを作るのですが、 そうするとHPBで見ると文字が綺麗ではないのです。 文字が綺麗でサイズが小さいバナーを作るのにはどうしたらいいのでしょうか? どうぞよろしくお願いします。

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

  • ベストアンサー
noname#105334
noname#105334
回答No.2

バナーなどホームページに載せる画像はcmで考えない方がいいです。 単位はpixelで普通のバナーの大きさは幅200×高さ40あるいは幅88×高さ31です。 私が作るとき、倍の大きさでつくり(解像度は300)完成してから解像度の変更で小さくし、WEB用の保存(でしたっけ?最近触っていないので忘れました)でGIFかJPGで保存します。 アニメーションでも10kB未満で作れます。 文字の設定は「アンチエイリアス」になっていますか? 「アンチエイリアス」が入っているものと入っていないものを比べてみてください。 入っていないとカクカクした字になります。 ちなみに <IMG src="file:///C:/Documents and Settings/Administrator/Application Data/IBM/Homepage Builder Version 9/tmp/image2.jpg" border="0" width="704" height="198"> の width="704" height="198" は表示される大きさです。 そこの数値をいくら小さくしても容量は変わりません。

daishiro19
質問者

お礼

ありがとうございます!とても勉強になりました!助かりました(#^.^#)!

その他の回答 (1)

  • ddg67
  • ベストアンサー率22% (1211/5475)
回答No.1

モニター上で316x75pixelの大きさで見せるんだったら、最初からPhotoshopで316x75pixelで作ってください デカいのを作ってタグで小さく表示させるから、文字が荒れるんです 13x3cm。 ネット(モニター)はcmで表現しません、ピクセル寸法で表示しますので、ピクセルサイズで作ってくださいね。

daishiro19
質問者

お礼

ありがとうございます!とても勉強になりました!助かりました!

関連するQ&A

  • バナーの素材に文字をいれたいのです。

    フリー素材のページからバナーの素材をダウンロードしてきました。 文字を乗せて使えると書いていたので、 文字を乗せたいのですが、どうやって乗せれば良いのですか? そのまま貼ると<img src="../../../../My Documents/My Pictures/bana-.gif" width="250" height="60"> っとなります。 この中の何処かに文字を入れるのでしょうか? 初心者なもので用語など分からないので宜しくお願いします。

  • ブラウザによってリンク集のバナー画像が表示されません。

    ↓ こちらの質問とほぼ同じです。 http://oshiete1.goo.ne.jp/qa3085778.html そして、こちらで紹介されているサイトhttp://www.aland.to/~lintrank/trylint/htmllint.htmlでチェックしても解決できなかったので、質問させていただきたいと思います。 私は、Win(IE7)、ビルダー11、フォトショ・イラレ等を使ってHPを作成しました。 既に転送済みのファイルのうち リンク集の表に貼ったバナー画像がIE6だと表示されません(直リンはしてません)。×がつくのではなく、何も表示されていません。 IE7だと全く問題ないです。他のファイルには上記の様な異常は一切ありません。 リンク集一覧は、2×2の表を作り、左にバナー画像、右に ちょっとした説明を載せています。 ブラウザによって表示が異なるのはタグが正確ではないからでしょうか。HTMLというものは、つい最近知った初心者なのでよく分かりません。 よろしくお願いします。 おそらく↓この部分が表のタグだと思います。 <TABLE border="0" width="731" height="85" summary="イラスト関連サイト様一覧"> <TBODY> <TR> <TD align="center" valign="middle" width="258"><A href="http://***.***.jp/" target="_blank"><IMG src="banner1.gif" width="200" height="40" border="0" alt="*** "></A><BR> <FONT size="-1">サイト名:<A href="http://***.***.jp/" target="_blank"> ***</A></FONT></TD> <TD valign="middle" width="463"><FONT size="-1">管理人:***様</FONT><BR> <FONT size="-1">***さんが描かれるイラストは、~。</FONT></TD> </TR> <TR> <TD align="center" width="258" height="23"><A href="http://***.***.jp/" target="_blank"><IMG src="banner2.GIF" width="200" height="40" border="0" alt="***"></A><BR> <FONT size="-1">サイト名: <A href="http://***.***.jp/" target="_blank">***</A></FONT></TD> <TD valign="middle" width="463" height="23"><FONT size="-1">管理人:***様<BR> ***さんが描かれるイラストは、~。</FONT></TD> </TR> </TBODY> </TABLE>

    • ベストアンサー
    • HTML
  • テーブル枠と文字

    DreamWeaverでHP作成中です。 たびたび質問させていただいていますが、テーブルの大きさがどうしても合いません。 【A】<table width="100%" height="100%">という大きなテーブルの中に 3つ入れ子しています。   <tr><td>   【1】<table width="710" height="55">   【2】<table width="710" height="15">   【3】<table width="710" height="400"> </td></tr></table> これをベースに、【1】【2】のテーブルにはボタンを入れ、各ページにリンクさせています。 【3】のテーブルにインラインフレームを入れて、各ページ枠組と背景は同じのものを作っています。 【3】のインラインフレームを外しFlashファイルをはめこんだりすると、他のページと枠の大きさが変わってくるのですが、理由がわかりません。 もしかして、テーブルの枠自体に高さや幅があるのでしょうか。 例えば<table border="0">としていても、少し高さがあったりするために、全体の大きさが微妙に変わってしまう等。 もしくは、<td height="5">と設定しているのに、文字の大きさがそれ以上の高さを持っているため等。 文字の大きさはブラウザの設定等にも依存するのでしょうが、大体高さはどのくらいに設定すればよいのでしょうか。 それから、例えば【3】<table height="400">の中が<table height="380">と<table height="15">の2つだとするとまた大きさが変わってしまうのでしょうか。 とんちんかんなことを言っていますが、教えてくださいー。

    • ベストアンサー
    • HTML
  • tableの大きさが編集領域とブラウザで異なる

    現在、ビルダーにてHPを作成しております。 tableの大きさが編集画面で見るのと、ブラウザ上で見るのでは 大きさが異なってしまいます。 解決方法を教えてください。よろしくお願いします。 <DIV style="width : 157px;height : 607px;top : 72px;left : 2px; position : absolute; z-index : 9; " id="_HPB_LAYOUT_LMV0" class="hpb-side-cell3" align=""> <DIV>   <TABLE cellpadding="0" cellspacing="0" class="hpb-vmenu1" id="_HPB_LINK_MENU_TABLE_01" width="157" height="200" border="1" style="table-layout: fixed;"> <TBODY> <TR> <TD class="hpb-vmenu1-head" height="15"><IMG src="c5.gif" alt="" width="1" height="1" border="0"></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link0"><SPAN style="font-size:11pt">文字</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub1.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">メニュー</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub2.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">表</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub3.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">期間限定</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub4.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">紹介</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub2.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">ご注文</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">ご相談・ご質問</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">コンセプト</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">地域</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-foot" height="15"><IMG src="c5.gif" alt="" width="1" height="1" border="0"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV>

  • 文字サイズ変更でテーブル要素(幅の値を指定済み)の幅が変化しないようにするには?

    宜しくお願いします。 [症状] TABLE・TDタグにて、幅をしているすると、 文字サイズ:小 で見るときは、設定した値の 適正地が反映されるが、文字サイズ:中 以上に 設定すると、TABLEで設定最多幅は有効なままで あるが、TDで設定した値は完全に無視される形で、 テーブルの中のバランスが乱れてしまう。 [ソース] <table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="white" style="border-collapse:collapse "> <tr> <td style="width:250px; ">あ</td> <td style="width:300px; ">い</td> <td style="width:200px;">う</td> </tr> <tr> <td>え</td> <td>お</td> <td>か</td> </tr> </table> [コメント] 特に変哲のないソースだと思います。 あ~か の文字のところには、それぞれもう少し長い 文章が入る形となります。 [質問] 文字サイズをブラウザ上で変更しても、 TDの幅が変わらないようにしたい。 その際に、文字のサイズを固定はしたくないです。 [その他] styleではなく、width指定しても 効果がありませんでした。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • ブラウザの文字サイズを変えると、inputのフォームのせいでレイアウトが崩れる

    こんにちは。ウェブデザイン初心者の質問です。 HTMLでページをデザインしています。form,input要素を使って検索用のフォームを設置したのですが、Firefox等のブラウザでフォントサイズを大きくすると、そのtableのレイアウトが崩れてしまいます。 リンクが張れないようなので、簡略化したスクリプトを書かせてもらうと、 <table align="center" cellpadding="0" cellspacing="0" width="700" height="225"> <tr> <td colspan="2" width="400" height="200"><img src="image01.jpg" width="400" height="200"></td> <td rowspan="2" width="300" height="225"> <script language="JavaScript" src="items.js"></script> </td> </tr> <tr> <td width="200" height="25" align="right" background="image02.jpg"> <form action="http://www.google.com" target="body"> <span><input name="" size="28" maxlength="80" type="text"></span> </form> </td> <td width="200" height="25"><img src="image03.jpg"></td> </tr> </table> 右側のtdはフラッシュファイルです。この状態でフォントサイズを拡大すると、左側のtdのグループと右側のフラッシュのtdの間に隙間ができて、その隙間がフォントサイズとともにどんどん広がります。このtableの上下には同じ幅のtableがあり、それらの横幅は変わらないため全体のレイアウトが激しく崩れてしまいます。formを削除するとこのようなことは起こりません。 tableタグを使わずに、cssでのデザインも試みましたが、結局フォームがあるとないとで同じ結果になります。 firefoxではフォントサイズを絶対値で固定することができなくなったと聞いたのですがそのせいでしょうか? 解決策をご存知の方がいらっしゃったらぜひお願いします。

    • ベストアンサー
    • HTML
  • 1つだけ表示できないバナー、どうしてですか!!?

    同じ形のバナーを横に並べたいのですが、 なぜか、なぜか!「hyousi5.gif」の部分を「2gai.gif」(同じ形式のバナー)のファイルに置き換えるとエラーになってしまいます。 もちろん、全部同じファイルに保存済みです・・ バナーは、文字と、ダウンロードした写真が張ってあります。 <div align="center"> <img height="63" src="image/hyousi5.gif" width="253" border="0"> <img height="63" src="image/hyousi5.gif" width="253" border="0"> ↑この二つのバナーの1つを「2gai.gif」のバナーにしたいのです。。 二つのファイルの内容ですが、 ・hyousi5.gif→画像サイズ253×63pixels 8bpp ファイルサイズ5,493bytes ・2gai.gif→画像サイズ、上と同じ         ファイルサイズ6,690bytes バナーはJTrimで作りました。この二つ以外も作って、ちゃんと表示できたのですが、2gai.gifだけがなぜかエラーになるんです(涙) 説明が下手で意味不明でしたら、補足に書き直します、どうか教えてください!

  • 文字サイズ変更ボタンでサイズが思うように制御できません

    文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> 元々の文字サイズは%で制御しているのですが、大→中(=標準)に戻した時、元々のサイズとは異なるサイズになってしまいます。 どうしてでしょうか? 標準サイズを100%とし、中サイズも100%と記述しています。

    • ベストアンサー
    • HTML
  • 文字のサイズ変更について

    ホームページ作成初心者です。 javaにてホームページの文字サイズを制御しています。 Javaは <script type="text/javascript"><!-- fsize = 12; function sizesetpt(val){ document.body.style.fontSize = val + "px"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = val + "px"; } } //--> </script> という風に書いています。 HTML内に <form action=""> <img src="image/small.gif" width="28" height="28" onclick=""sizesetpt(10)"> <img src="image/middle.gif" width="28" height="28" onclick=""sizesetpt(12)"> <img src="image/big.gif" width="28" height="28" onclick=""sizesetpt(14)"></form> と書いています。 一応問題無く動いていますが、可能であれば 「今は小サイズの文字で見ていますよ」というのがわかるように 小サイズ表示になっている時には文字小のボタン画像を別の画像に変更したいと思っています。 (例) 白地に黒字の「小」ボタン(画像)を押す ↓ ページが文字小サイズ表記になる ↓ その時はボタンは黒地に白字の「小」ボタン(画像)になっている そのような操作はできるのでしょうか? もし出来るのであればやり方をお教え頂けると助かります。 イメージとしては以下のサイトのような感じです。 もっと複雑なjavaやCSSを使うのでしょうか? http://www.n-kankyo.com/ よろしくお願いします。

  • バナーがHPに出ません。

    作ったバナーがでません。xマークが出ます。 クリックするとちゃんとリンクするのでGifが悪いのでしょうか? どなたか教えてください。 宜しくお願いいたします。 <a href=http://6905.teacup.com/***/*** target=_top><IMG src=A.gif width=88 height=31 border=0></a> バナーの場所です。 C:\Documents and Settings\Owner\My Documents\My Pictures\バナー

専門家に質問してみよう