【ヤプログ】リンクタグについて

カテ違いだったらすみません。

ヤプログでブログを運営しています。
フリースキンをカスタマイズして使用しているんですが、うまく表示されないところがあります。

やりたいこと：記事中のリンクをマウスオーバーで凹ませる効果
できなかったこと：リンク画像を右寄せした時に凹まない
OS：WindowsXp
ブラウザ：IE6

フリースキン編集→スタイルシート編集で
/* entry */
～中略～
.link a:link　　　{
font-weight:normal;
color:#FF9900;
text-decoration: none;
}

.link a:visited {
font-weight:normal;
color:#FF9900;
text-decoration: none;
}

.link a:hover　{
font-weight:normal;
color:#FF9900;
position: relative;top: 1px; left: 1px;
text-decoration: none;
}

.link a:active {
font-weight:normal;
color:#FF9900;
text-decoration: none;
}
を書きこんでいます。
これで通常のリンクは凹みます。
ですが、画像リンクを右寄せすると無効化されます。
画像リンクは、ほとんどAmazonアフィリエイトで
http://link.infoathletes.com/#
のツールを利用して作成しています。
これを、記事作成をHTML方式にして挿入→align="right"を追加して右寄せしています。
右寄せしなければちゃんと凹むので、align="right"　を入れたのが原因じゃないかと思うのですが
なぜだかわかりません。挿入する位置等が関係あるのでしょうか？

どなたかわかる方いらっしゃいましたら、ご教授願います。
他に足りない情報がありましたら補足でお伝えします。
よろしくお願いいたします。

No.1 回答者： bibi8916 回答日時： 2008/03/04 15:06

うーん。

リンクを右寄せにしたいと仮定して、<a>タグの中に、align="right"を記入していますか？
<a>タグの要素にalign="right"は無いと思います。
なので、エラー扱いになり、凹む動作をしなくなるのだと思います。

仮にリンクの場所を右寄せにしたいのでしたら、表形式<td>タグに書くとか、
表形式ではなく、<div>タグとかで、段落形式で、その中で右寄せでしたら、<div>タグにalign="right"を書くとか・・

どちらにしても、<a>タグの中に、align="right"はありえないと思います。
ちょっとみてみたら、ヤプログのフリースキンで使えるタグの一覧
http://www.yaplog.jp/contents/faq#skin_01
↑をみると、<div>タグは使えないみたいですので、<p>タグなのかな～？と思いました。

この回答への補足

たとえば、上記のリンク作成ツールを使用すると以下のようなリンクができます。

<a href="http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim … src="http://*****.jpg" alt=""></a>

これを

<a href="http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim … src="http://*****.jpg" alt="" align="right" ></a>

こうして使用していましたが、<a>タグの中に、align="right"はあってはいけないのですね！
知りませんでした・・・。
でも、これで右寄せにはなるんですが、これは正常ですか？
無知で申し訳ありませんが、<p>タグ挿入の場合はどこに入れたらいいのでしょう？

補足日時：2008/03/04 15:35

No.2 回答者： abril 回答日時： 2008/03/04 15:55

> <a href="

http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim … src="http://*****.jpg" alt="" align="right" ></a>
>
> こうして使用していましたが、<a>タグの中に、align="right"はあってはいけないのですね！

上記のalign属性は<a>ではなく<img>についているので、これは間違いではありません。
ANo.1の回答者様がおっしゃっているのは、「<a>の属性に"align"はない」ということです。<a>はそれ自身が右寄せになったり左寄せになったり、という状態を持ち得ません。
※CSSのdisplayプロパティでblock要素に変更すれば、CSS上でtext-alignというプロパティを与えることは可能となりますが。

> <p>タグ挿入の場合はどこに入れたらいいのでしょう？

<p>はブロック要素、<a>はインライン要素です。ブロック要素はインライン要素の中に含めることができませんので、<p>は<a>の「親」になる位置に挿入しなければなりません。

No.3 回答者： abril 回答日時： 2008/03/04 16:14

すみません、先程の説明（ANo.2）は言葉足らずで誤解を招くといけないので…

> > こうして使用していましたが、<a>タグの中に、align="right"はあってはいけないのですね！
>
> 上記のalign属性は<a>ではなく<img>についているので、これは間違いではありません。

これは、<img>タグにalign属性が付いている、ということ自体は間違いではない、という意味だけですので。
質問者様の様に、<img src="http://*****.jpg" alt="" align="right" >とした場合、イメージは右に、そしてそのイメージに隣接するテキストが左に回り込む、という状態になります。多分、質問者様のイメージされているのはそういう状態ではないと思われますので、そういう意味では現状の設定は妥当ではないのでしょう。

この回答への補足

いえ、こちらこそ言葉が足りなくてすみません。
私の希望するレイアウトは、まさにabril様が仰るとおりです。

画像リンクを右寄せして、テキストを左に回り込みしたいのです。
現状では、レイアウトはそのようになっていて問題ないのですが
リンクが凹む効果だけがなくて困っています。(リンクも正常にできています)
align="right"の位置は合っているとのことなのですが、<p>タグでも同様の効果(画像のみ右寄せ回り込み)ができるのでしょうか？

ブログの、中途半端にテキストとHTMLが混ざった記述なので
正しい位置を探すのに苦戦しています。

補足日時：2008/03/04 16:30

この回答へのお礼

<p STYLE="float: right;" >～</p>
でリンクタグを挟んだらできました！

本当にありがとうございました！

お礼日時：2008/03/05 08:38

No.4 ベストアンサー 回答者： bibi8916 回答日時： 2008/03/04 16:41

ANo1です。

ANo2様の言っている通り
<a>の属性に"align"はない」ということです。<a>はそれ自身が右寄せになったり左寄せになったり、という状態を持ち得ません。
なので、
<a href="​http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim …​ src="​http://*****.jpg"​ alt="" align="right" ></a>
↑はありえません。

<p>タグの話になりますと。
<p align="right"><a href="​http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim …​ src="​http://*****.jpg"​ alt="" ></a></p>

と<a>タグを<p>タグで挟んで見てくださいと言うことです。
なんと、説明すればよいか・・
<a>タグでかかれたものは、ハイパーリンクで表示されるただの文字なんです。なので、リンク付き文字を右に寄せると言う概念がありません。したがって、<a>の属性に"align"はない」ということです。

ではこのリンク付き文字列をどこの配置しますか？
<p>タグは段落と言う意味で、一列枠（箱）を作ります。
その枠（箱）の中の右側にリンクの文字列を置くなら、<p align="right">ですし、箱の中央に置くなら、<p align="center">・・・あとは、ここを確認してください。
http://www.tohoho-web.com/html/p.htm

イメージつきましたか？＾－＾；；
説明下手で申し訳ないですが、上記リンクでもちょっと調べてみてください＾－＾

この回答への補足

ありがとうございます。
すみません、<a>タグにalignがつかないのと<p>の定義はわかったのですが
<p>タグだと文字の回り込みができません。

調べてみても、やっぱり回り込みは<img>タグにalignをつけるのだと思うのですが
そうすると元の記述に戻ってしまいます・・・。

リンク画像を右寄せ回り込みにするには、他に方法がありますか？

補足日時：2008/03/04 17:43

この回答へのお礼

<p STYLE="float: right;" >～</p>
でリンクタグを挟んだらできました！

本当にありがとうございました！

お礼日時：2008/03/05 08:38

No.5 回答者： goldfox 回答日時： 2008/03/04 23:26

＞<p>タグだと文字の回り込みができません。

<p>の横幅を指定しましょう。
<p>にスタイルシートで背景色を設定すれば、横幅を必要とする理由が分かります。

この回答へのお礼

できました！
<p STYLE="float: right;" >～</p>
でリンクタグを挟んだらできました！
横幅は設定しなくても大丈夫だったみたいです。
本当にありがとうございました！

お礼日時：2008/03/05 08:37