CSSで設定した画像へのリンク設定について
-
0 名前： Ryu ： 2005/07/22 14:42
- CSSで設定した画像にリンクを貼るにはどうしたらいいのでしょうか。
上部にCSSのbackgound-imgプロパティを使用してサイトロゴを設置した場合、
そのロゴにリンク(トップページへのリンク)を設定する方法がわかりません。
どなたかおしえていただけませんでしょうか。
よろしくお願いします。
-
1 名前： モノ ： 2005/07/22 14:42
- background、つまり背景ですからリンクの設定はできません。
その他の方法で配置するか、
そのロゴにちょうどかぶさる形で透過した画像を配置し、それにリンクを設定するとか。
(透過した画像は1px四方で充分、それをwidth・heightでロゴと同じ大きさにする)
-
2 名前： Ryu ： 2005/07/22 14:42
- モノ様、素早いレスありがとうございます。
透過画像を使ったやり方でやってみます。
しかしながら、回答の中にありますように、
この方法以外でCSSによる画像貼り付けは出来るのでしょうか。
これでうまくいくようでしたらサイドバーに設置する予定のメニューロゴでも
応用したいなと考えております。
もしも出来るようだったらメニューロゴの管理が非常に楽になりますので・・・
-
3 名前： モノ ： 2005/07/22 14:42
- 仰りたいことが今ひとつよくわかりませんが、
背景(background)で配置することに
なにかしらのメリットを感じていらっしゃるようですね。
(位置の指定/固定がラクとか？)
それを具体的に、かつ詳細に、
できれば実際にうまく行かない状態のページを提示して
「これをこうこうこうしたいが、こうなってしまう。
どのようにすればよいか？」
といったように質問すれば
具体的な回答も得やすいでしょう。
-
4 名前： みんみ ： 2005/07/22 14:42
- こんなんでどうでしょうか？
全部ではなく、<style>からのコピペですが。
※hoverが必要なければ、外してください。
あとは適当に、追加・削除してみてください。
//////////////////////////////////////////
<style type="text/css">
<!--
.logo A {
BACKGROUND-IMAGE: url(logo.gif);
WIDTH: 150px;
HEIGHT: 30px;
BACKGROUND-COLOR: #ffffff
}
.logo A:hover {
BACKGROUND-IMAGE: url(logo_on.gif);
WIDTH: 150px;
HEIGHT: 30px;
BACKGROUND-COLOR: #ffffff
}
span {display:none;}
-->
</style>
</head>
<body>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="logo"><A href="**"><SPAN>メニュー1</SPAN></A> </td>
</tr>
</table>
</body>
-
5 名前： Ryu ： 2005/07/22 14:42
- アドバイスありがとうございます。
別にbackgroundで指定することにメリットを感じているわけではなく、
まだCSSについて学び始めたばかりで、それ以外に選択肢が思い浮かばないため
backgroundを使用しております。
他の方法でCSSによるイメージ貼り付けが出来るのであれば、方法は問いません。
ページ上部に表示されるサイトロゴには、アクセシビリティの向上のためにも
トップページのアドレスを設定したいと考えております。
ただ、backgroundプロパティを使用した場合、リンクの設定が出来ないため、
モノ様がおっしゃられたような方法で、HTMLの中で対応する必要が出てきます。
CSSによるイメージの貼り付けができ、リンクが設定できるのであれば、
サイトをイメージを変えるときに、CSSの修正だけでおおよその変更は
できるのではないかと思い今回の質問になりました。
本当は造っているものをお見せできればいいのですが、サイトの設計段階であり
とてもお見せできません。申し訳ございません。
以上よろしくお願いいたします。
-
6 名前： モノ ： 2005/07/22 14:42
- うーん、ようは
サイト内のレイアウト(デザイン)に統一感を持たせたい、
なのでCSSでロゴの表示とリンクの指定ができれば
変更したいときに外部cssでちょちょっと修正すればいいだけでラク。
というようなことでしょうか？
サイト内どのページを表示しても、定位置にロゴが表示される、と。
そーゆーことなら、CSSでなくSSIとかphpとかを使ったほうがいいです。
まあ結局、表示させたいHTMLファイル全てに何がしかの記述は必要ですが、
変更したいときはSSIとかの変更したい部分をちょちょっと書き換えるだけですみます。
お使いのサーバがそーゆーのに対応していなければ
ローカル側でツールを使って記述するなどの方法になると思います。
-
7 名前： Pid ： 2005/07/22 14:42
- ロゴ画像の更新については，HTML に記述するロゴ画像のファイル名を固定にしておいて，実際のファイルの名前をそれに合わせて変更するだけで対処できそうな気がします。
定位置ロゴについては，以前あるサイトで見かけた方法ですが，
<h1><a class="logo"><img alt="Hogehoge Inc.: "></a>当サイトについて</h1>
のように見出し h1 に常にロゴマークを入れ，
.logo { position: aboslute; top: 0; left: 0; }
のようにロゴだけをページ左上に絶対配置していました。うまいやり方だと思います（あるいは，address 要素の中の方が良いかもしれません）。
-
8 名前： Ryu ： 2005/07/22 14:42
- モノ様、みんみ様、Pid様、アドバイスありがとうございます。
教えていただいた方法にてやってみます。
いろいろありがとうございました。
