カテ違いだったらすみません。
ヤプログでブログを運営しています。
フリースキンをカスタマイズして使用しているんですが、うまく表示されないところがあります。
やりたいこと:記事中のリンクをマウスオーバーで凹ませる効果
できなかったこと:リンク画像を右寄せした時に凹まない
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.4ベストアンサー
- 回答日時:
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をつけるのだと思うのですが
そうすると元の記述に戻ってしまいます・・・。
リンク画像を右寄せ回り込みにするには、他に方法がありますか?
<p STYLE="float: right;" >~</p>
でリンクタグを挟んだらできました!
本当にありがとうございました!
No.3
- 回答日時:
すみません、先程の説明(ANo.2)は言葉足らずで誤解を招くといけないので…
> > こうして使用していましたが、<a>タグの中に、align="right"はあってはいけないのですね!
>
> 上記のalign属性は<a>ではなく<img>についているので、これは間違いではありません。
これは、<img>タグにalign属性が付いている、ということ自体は間違いではない、という意味だけですので。
質問者様の様に、<img src="http://*****.jpg" alt="" align="right" >とした場合、イメージは右に、そしてそのイメージに隣接するテキストが左に回り込む、という状態になります。多分、質問者様のイメージされているのはそういう状態ではないと思われますので、そういう意味では現状の設定は妥当ではないのでしょう。
この回答への補足
いえ、こちらこそ言葉が足りなくてすみません。
私の希望するレイアウトは、まさにabril様が仰るとおりです。
画像リンクを右寄せして、テキストを左に回り込みしたいのです。
現状では、レイアウトはそのようになっていて問題ないのですが
リンクが凹む効果だけがなくて困っています。(リンクも正常にできています)
align="right"の位置は合っているとのことなのですが、<p>タグでも同様の効果(画像のみ右寄せ回り込み)ができるのでしょうか?
ブログの、中途半端にテキストとHTMLが混ざった記述なので
正しい位置を探すのに苦戦しています。
<p STYLE="float: right;" >~</p>
でリンクタグを挟んだらできました!
本当にありがとうございました!
No.2
- 回答日時:
> <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.1
- 回答日時:
うーん。
リンクを右寄せにしたいと仮定して、<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>タグ挿入の場合はどこに入れたらいいのでしょう?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
FC2ショッピングカートのカスタ...
-
期間ごとに画像表示を切り替え...
-
スライドショーの上にロゴマー...
-
直リンバナーを表示すると、紫...
-
拡張子無しで画像を表示したいです
-
バナーの直リンの仕方
-
Movable Type で フレームのよ...
-
HTML上の画像を結合する方法が...
-
IEでのalt属性ポップアップ表示...
-
altに長文テキスト
-
予約語の表示について
-
崩れたレイアウトが更新すると...
-
「DecareステートメントにPtrSa...
-
画像クリックで別の画像
-
ボタンを押したままにする。
-
windowsは画像にマウスオンで画...
-
バナーの貼り方とバナーにリン...
-
alt属性を付けるとは?
-
PDFの保存ボタンが表示されません
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
背景が透明なリンクボタンで、...
-
画像クリックでクリップボード...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
期間ごとに画像表示を切り替え...
-
スライドショーの上にロゴマー...
-
アルバムをめくるように、画像...
-
複数のボタンで1つのエリアに...
-
HTML上の画像を結合する方法が...
-
「DecareステートメントにPtrSa...
-
<A href= と<IMG srcの使い分け
-
CSSを使わずにマウスオーバーで...
おすすめ情報