テンプレートを使ったHP作成☆リンクタグについて

このQ&Aのポイント
  • nanosという無料のHP作成サイトでHPを作成中です。テンプレートを使ってtopページを作ろうと思った所、リンクを貼った文字が薄いグレーになり、点線の下線までついてしまいます。カーソルをあてるとそれがピンクになります。
  • カーソルをあてても、文字を変化させずに文字にリンクを貼りたいです。タグのに何か設定があるのでしょうか?
  • タグの設定について教えていただけると嬉しいです。
回答を見る
  • ベストアンサー

テンプレートを使ったHP作成☆リンクタグについて

nanosという無料のHP作成サイトでHPを作成中です。 テンプレートを使ってtopページを作ろうと思った所、リンクを貼った文字が薄いグレーになり、点線の下線までついてしまいます。カーソルをあてるとそれがピンクになります。 多分そういう設定になっているとは思うのですが、タグを見てもピンクの色指定の場所も無く、どう直したらいいのかわかりません。 ちなみに、カーソルをあてても、文字を変化させずに文字にリンクを貼りたいです。 タグのに何か設定があるのでしょうか? <br><center><pc><table width="550"><tr><td><div style=margin:10px;padding:5px;line-height:16px;></pc><nopc><table width="550"><tr><td><div style=margine:10px;padding:5px;line-height:15px;></nopc><div align="left"><font size="4" color="#000000" face="HGep021">タイトル</font> <a href="ページのurl">コチラ</a>より御入室ください。</font> </span></div></td></tr></table></center> <center><table width="550"><tr><td><div style=line-height:16px;><font size="1"> という感じです。 どこの部分がどんな表現をするのか教えていただけたらありがたいです。 宜しくお願いします。

  • lulula
  • お礼率76% (463/606)
  • HTML
  • 回答数2
  • ありがとう数1

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

  • ベストアンサー
  • Pochi67
  • ベストアンサー率34% (582/1707)
回答No.2

 【font-size】はそのまま、文字の大きさ。  指定しなかった場合のサイズを100%とした時の割合です。  単位が【px】【pt】等の場合もあります。  これらは周りに影響されない確固とした大きさがあるので、%での指定時のように周りに影響されることはないです。   ----------   あああ   <span style="font-size: 90%">いいい   <span style="font-size: 90%">ううう</span></span>   ----------   とすると、『あああ』は指定なしの時の大きさだけど、   『いいい』は『あああ』の0.9倍、   『ううう』は『あああ』の0.9×0.9倍(0.81倍)になる。   ----------  フォントサイズは実際にはどう表示されるかを確認して、調節するようにしてください。  どうしてもフォントサイズを変更させたくない場所以外は、%で指定した方が無難です。  無駄な部分は無いかと書かれていますが、それはあなたが何を不要としているかがわからないと答えられないです。 (^^;  そもそもテンプレートは、誰が使用しても見本と同じように仕上がる…というものなので、下手にいじらない方が良いと思いますよ?  企業が提供しているものなので統計用に何かの情報を定期的に送る設定がされているかもしれませんが(もちろん、悪意のないもの)、明らかに無駄な設定はなされていないと思います。  変更したい部分があるなら、どう変更したいのかを具体的に質問してくださいな。  わかる範囲でお応えしたいと思います。  また、先の投稿で参考URLとして挙げた【とほほのWWW入門(http://www.tohoho-web.com/www.htm)】は、ウェブページ作りについてひと通りの説明が書いてあるので、ちょっと気になったこと等に利用してみてください。

lulula
質問者

お礼

本当に色々有難うございました。 少しずつですが、出来て来ました。 質問した内容は他のページにあったタグを直したら解決しました。 まさか、そのページ以外にも関係あるタグがあったとは! ビックリでした。 教えていただいたサイトはすごくわかりやすいです。 有難うございました。 そして、お礼が遅くなり申し訳ございません。 又何かありましたら宜しくお願いいたします。

その他の回答 (1)

  • Pochi67
  • ベストアンサー率34% (582/1707)
回答No.1

 そのサイトのテンプレートを見ていないのでどことは書けませんが、とりあえずここに示された部分には無いみたいです。  テンプレートの中に、【.css】という拡張子のファイルがありますよね?  多分ないとは思いますが、もしcssファイルがなく、スタイルシートがhtmlファイルの上部に直接書き込まれている場合は、全てのページを手作業で直す必要があります。  cssファイルを開くと、【a:】で始まる部分があると思うので、そこの【color:●●】(●●は任意の文字列)●●の部分を変更します。  色の指定(●●の部分)は【red】【black】と英語で書いても良いですが、【#】+16進数6桁の数字でも表記されます。  訪問済みのページへのリンクがグレーになるのは【a:visited { color: ●●; } 】というところ、カーソルをあてるとピンクになるのは【a:hover { color: ●●; } 】というところです。  同じ色に指定し直してください。  16進数は0~9とA~Fまでの16個の文字を使った数え方の一種です。  知らなくても、色見本を使って好みの色を指定することは可能です。  http://www.tohoho-web.com/css/selector.htm#link (設定の種類の参考)  http://www.tohoho-web.com/wwwcolor.htm (色見本)

lulula
質問者

補足

早々のご回答有難うございました。 質問で載せたタグは『全体レイアウト』という項目の場所にあり、そこのタグに色関係は含まれていなかったためよくわかりませんでした。 でも見直したら 『HEAD・HTML詳細』というのが他の場所にあり、そこのcssが <style type="text/css"><!-- body { text-align: center; div-align: center; padding: 5px; } body{text-align:center; font-family:"HGゴシックM","Geogia"; font-size:90%;} div.contents {text-align:left; padding:8px; width:600px; line-height:150%; } a:link,a:visited,a:active{ text-decoration:none;} a:hover { text-de coration:none; color:#000000; background-color:#ffffff; } input,taxtarea { font-size:x-small; color:#000000; background-color:#ffffff; border:solid 1px #000000; } --></style> でした。 色は何とかなったのですが、 例えば font sizeの90%とかは何に対しての90%なのかがわからずに困っています。 あと、無駄な部分はないでしょうか? もしお時間がありましたらご指導いただけたら有難いです。 宜しくお願いします。

関連するQ&A

  • HP作成初心者です。詳しい方誰か教えて下さい!

    HP作成初心者です。 Mobile Spaceで作成しています。 リアルタイムを編集しているのですが、親記事自由表示の所が合っているのか分かりません。 チェックして頂けるとありがたいです。 どうぞよろしくお願いします。 (チェックしてほしい内容です↓) <br><div align="center"><div align="center"><table width="90%" bgcolor="black" cellspacing="1"><tr><td bgcolor="white"><font color="black"> <font style="font-size:10px"><DIV align="left"></a> <blockquote> <blockquote style="margin:3px 3px 5px 5px;"><font style="letter-spacing:1px;line-height:10px">#body#</Font> #photo3# </blockquote></DIV><DIV align="right"><font color=#000000>( #td#/#etm#/#ty# #th#:#ti# </font>&nbsp;#tbody# </a>&nbsp;</a><font color=#000000>) </font> </DIV></font></td></tr></table></div>

  • HP作成

    たびたびすみません。 以下のようなものをつくりました。 これでいくつか質問があります。 1.「TOP」のブロックの縦の長さを変えるにはどこをどのようにすればいいでしょうか? 2.「TOP」以外のブロックの縦の長さをいっぺんに変えることはできますか? 3.(以下のソースとは関係ありませんが)HPのフォントは何を使えば だいたいのPCで見れることができるでしょうか? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 25px; BACKGROUND-COLOR: #ff99cc; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: #666666; PADDING-TOP: 5px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 25px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body> <center> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 206px; FONT-FAMILY: 'Sylfaen'; HEIGHT: 94px" cellspacing="3" cellpadding="0" width="206"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td> </tr> <tr> <td><a class="menu" href=""> News</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Shopping</a></td> </tr> </table> </center> </body> </html>

  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • WEB上とPC上で font が・・・

    <Div style="width:200;height:100;overflow:auto; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; "> <table style="font-size: 12px; padding: 3; width: 180px;"><tr><td> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </td></tr></table> </Div> これをPC上で表示すると、font 12px になりますが、 WEB上で表示すると、何故か 12px より大きくなります。 何故そうなり、どうやったらWEB上でも 12px になりますでしょうか?

    • ベストアンサー
    • HTML
  • 表の作成

    いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick=""> <!-- ж --> </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick=""> <!-- ☆ --> </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • タグの修正に力をかしてください

    ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線:「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線:「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>

    • ベストアンサー
    • HTML
  • borderが1のテーブル

    ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか? 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。

  • Layerの中にあるリンクがmacで動作しません

    以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript~window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>

    • ベストアンサー
    • HTML
  • ホームページの作成の質問です

    下のように画像の横にテーブルを並べたいのですが、 画像   テーブル テーブルは <table border=1 Width="500" height"70" cellspacing=1 cellpadding=7> <tr style="height:20px;" align="center"> <td width="120" BGCOLOR="#8A2BE2"><font color="#FFFFFF">文字</td> <td width="120" BGCOLOR="#8A2BE2"><font color="#FFFFFF">文字</td> <td width="120" BGCOLOR="#8A2BE2"><font color="#FFFFFF">文字</td> <td width="120" BGCOLOR="#8A2BE2"><font color="#FFFFFF">文字</td> <td width="120" BGCOLOR="#8A2BE2"><font color="#FFFFFF">文字</td> </tr> このようなテーブルです、 よろしくお願いします<m(__)m>

  • テーブル内に隙間が。

    テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 (html/cssの書き直さなくてはならない箇所はどこでしょうか) 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>

専門家に質問してみよう