- ベストアンサー
テキストのバナー
現用のバナー（GIF）を、画像を使わずテキストを使ったバナーに替えて欲しいという依頼を受けたのですが可能でしょうか。どのようにしたら良いのでしょうか。 よろしくお願いします。
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
「テキストを使ったバナー」が通常のリンクのことであれば、先に出ている回答のとおりですが、 以前お遊びで作った「テキストリンクをバナーっぽく見せるTIPS」は以下のとおりです。 ===================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <style> /* [ブロック]リンク指定 */ .blocklink01{ border-top:#20b2aa 1px solid; /* 罫線[上] */ border-left:#20b2aa 1px solid; /* 罫線[左] */ border-right:#2e8b57 1px solid; /* 罫線[右] */ border-bottom:#2e8b57 1px solid; /* 罫線[下] */ background:#7fffd4; /* 背景指定 */ display:block; /* ブロック要素指定 */ width:120px; /* 横幅 */ text-align:center; /* 中央寄せ */ } a:visited.blocklink01{ color:#009999; /* 文字色 */ text-decoration:none; /* 文字装飾無し */ } a:hover.blocklink01{ border-top:#00ffff 1px solid; /* 罫線[上] */ border-left:#00ffff 1px solid; /* 罫線[左] */ border-right:#00ccff 1px solid; /* 罫線[右] */ border-bottom:#00ccff 1px solid; /* 罫線[下] */ background:#99ffcc; /* 背景指定 */ display:block; /* ブロック要素指定 */ width:120px; /* 横幅 */ color:#6699cc; /* 文字色 */ font-style:italic; /* イタリック指定 */ } a:active.blocklink01{ color:#6b8e23; /* 文字色 */ text-decoration:none; /* 文字装飾無し */ } </style> <body> <p>本来Aタグはインライン要素です。<br> しかし、こちらのバナーは「display:block」でブロック要素として表示しています。 <a href="http://hogehoge.com/" target="_blank" class="blocklink01">任意のリンク</a> そのため、このように改行されてしまいます。</p> </body> </html> =========================================== 上のソースをそのままコピペしてHTMLで保存してください。 テキストリンクなのにバナーのように表示できます。 この場合気を付けなければならないのは、blocklink01でクラス指定したAタグはブロック要素扱いになるため、隣にテキストや画像などを表示できません。 そこで、隣にテキストや画像を表示したい場合は <table><tr><td><a href="http://hogehoge.com/" target="_blank" class="blocklink01">任意のリンク</a></td> <td>隣におくテキスト</td></tr></table> などとするか、.blocklink01の指定に「float:left;」などを追加してください。 ただし「float:left;」はNN4.7などではおかしな表示になってしまいます。
その他の回答 (3)
- s_hukami
- ベストアンサー率66% (98/148)
No.3で答えた者です。 高さを指定する時はスタイルシートに「height:30px;」などと任意の高さを追加してください。 が、これでは上に表示されてしまうため、見た目が悪くなってしまいます。 そこで、paddingを指定して表示します。 文字列が1行でバナーの高さを30pxにしたい時は ============================== padding-top:7.5px; padding-bottom:7.5px; font-size:15px; ============================== などと記述します。 上下余白の合計が15px,文字の大きさが15pxで 合計30pxになります。 あと、うっかりしてたんですが、「.blocklink01」に 「text-decoration:none; 」を指定し忘れていました。 スタイルシートを記述する時、私は方眼用紙にイメージを書きながら記述します。たまにそれを怠ると、計算間違いしている事が多々あるので（一部余白の数値を間違える等）。 注意しなければならないのは、このサイズ指定が罫線の内側であるという事です。 なので、罫線を含めると、この場合横122×高さ32となってしまいます。 なので、罫線を含めて120×30にしたい時は、罫線のサイズ×2を差し引いてやらなければなりません。 この場合罫線は1pxなので2px小さくなります。 背景は画像も使えるので、1つの画像を全く加工すること無しに、複数のバナーに使用することができます。 この場合は、widthとheightをきちんと指定して、文字位置はpaddingで調整してください。 ======================================= [背景画像を繰り返さない場合の指定] background:#99ffcc url(bar01.gif) no-repeat; [背景画像を縦に画像を並べて表示する場合の指定] background:#99ffcc url(back.gif) repeat-y; ======================================= スタイルシートリファレンスは「とほほのWWW入門」が詳しいと思います。
- 参考URL：
- http://tohoho.wakusei.ne.jp/
お礼
くわしい説明でとてもよく分かりました。 実用に使ってみます。ありがとうございました。
例示の綴りが間違っている・・・何度もすみません ＃ちゃんと確認してから投稿すればいいのに。 <A href="http://www.***.com" target="_blank">ホゲホゲ</A>
お礼
ご回答、ありがとうございました。 target= 別ウインドウですね。
要は普通のリンクにすればいいと思いますがいかがでしょうか。 <A href="http://www.***.com" taget="_balnk">ホゲホゲ</A> といった風に・・・
お礼
詳細なご説明、ありがとうございます。 なるほど、バナーっぽくなりますね！参考にさせていただきます。 ところで、縦幅を広げて文字を天地中央にすることはできますでしょうか。