• ベストアンサー
  • 困ってます

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

カテ違いだったらすみません。 ヤプログでブログを運営しています。 フリースキンをカスタマイズして使用しているんですが、うまく表示されないところがあります。 やりたいこと:記事中のリンクをマウスオーバーで凹ませる効果 できなかったこと:リンク画像を右寄せした時に凹まない 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" を入れたのが原因じゃないかと思うのですが なぜだかわかりません。挿入する位置等が関係あるのでしょうか? どなたかわかる方いらっしゃいましたら、ご教授願います。 他に足りない情報がありましたら補足でお伝えします。 よろしくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数5
  • 閲覧数410
  • ありがとう数5

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

  • ベストアンサー
  • 回答No.4

ANo1です。 ANo2様の言っている通り <a>の属性に"align"はない」ということです。<a>はそれ自身が右寄せになったり左寄せになったり、という状態を持ち得ません。 なので、 <a href="​http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim"><img​ src="​http://*****.jpg"​ alt="" align="right" ></a> ↑はありえません。 <p>タグの話になりますと。 <p align="right"><a href="​http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim"><img​ 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 イメージつきましたか?^-^;; 説明下手で申し訳ないですが、上記リンクでもちょっと調べてみてください^-^

共感・感謝の気持ちを伝えよう!

質問者からのお礼

<p STYLE="float: right;" >~</p> でリンクタグを挟んだらできました! 本当にありがとうございました!

質問者からの補足

ありがとうございます。 すみません、<a>タグにalignがつかないのと<p>の定義はわかったのですが <p>タグだと文字の回り込みができません。 調べてみても、やっぱり回り込みは<img>タグにalignをつけるのだと思うのですが そうすると元の記述に戻ってしまいます・・・。 リンク画像を右寄せ回り込みにするには、他に方法がありますか?

関連するQ&A

  • リンクの下線を破線にしているのですが…

    リンクの下線を破線にするスタイルシートを使用しているのですが、 通常の左寄せや<center>タグで囲ったテキストでは正常に動作するのに、 <div align="right">または<p align="right">で囲った右寄せのテキストには破線が表示されません。 どうすれば表示されるようになるでしょうか。 私が使用しているスタイルシートは以下の通りです。 <style type="text/css"> <!-- A:link {color:#666666; text-decoration:none; border-bottom:1px dashed #00CCCC;} A:visited {color:#666666; text-decoration:none; border-bottom:1px dashed #00CCCC;} A:hover {color:#FF3300; text-decoration:none; border-bottom:1px dashed #00CCCC;} --> </style>

  • CSS、おかしいですか?

    CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか? <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>

    • 締切済み
    • CSS
  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

その他の回答 (4)

  • 回答No.5
  • goldfox
  • ベストアンサー率49% (123/249)

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.3
  • abril
  • ベストアンサー率69% (388/560)

すみません、先程の説明(ANo.2)は言葉足らずで誤解を招くといけないので… > > こうして使用していましたが、<a>タグの中に、align="right"はあってはいけないのですね! > > 上記のalign属性は<a>ではなく<img>についているので、これは間違いではありません。 これは、<img>タグにalign属性が付いている、ということ自体は間違いではない、という意味だけですので。 質問者様の様に、<img src="http://*****.jpg" alt="" align="right" >とした場合、イメージは右に、そしてそのイメージに隣接するテキストが左に回り込む、という状態になります。多分、質問者様のイメージされているのはそういう状態ではないと思われますので、そういう意味では現状の設定は妥当ではないのでしょう。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

<p STYLE="float: right;" >~</p> でリンクタグを挟んだらできました! 本当にありがとうございました!

質問者からの補足

いえ、こちらこそ言葉が足りなくてすみません。 私の希望するレイアウトは、まさにabril様が仰るとおりです。 画像リンクを右寄せして、テキストを左に回り込みしたいのです。 現状では、レイアウトはそのようになっていて問題ないのですが リンクが凹む効果だけがなくて困っています。(リンクも正常にできています) align="right"の位置は合っているとのことなのですが、<p>タグでも同様の効果(画像のみ右寄せ回り込み)ができるのでしょうか? ブログの、中途半端にテキストとHTMLが混ざった記述なので 正しい位置を探すのに苦戦しています。

  • 回答No.2
  • abril
  • ベストアンサー率69% (388/560)

> <a href="http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim"><img 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"><img src="http://*****.jpg" alt=""></a> これを <a href="http://amazon.co.jp/o/ASIN/*****/*****/ref=nosim"><img src="http://*****.jpg" alt="" align="right" ></a> こうして使用していましたが、<a>タグの中に、align="right"はあってはいけないのですね! 知りませんでした・・・。 でも、これで右寄せにはなるんですが、これは正常ですか? 無知で申し訳ありませんが、<p>タグ挿入の場合はどこに入れたらいいのでしょう?

関連するQ&A

  • はじめて利用します。質問の上で至らぬところがあればご指摘願います。

    はじめて利用します。質問の上で至らぬところがあればご指摘願います。 スタイルシートでリンクの色を変更しているのですが、どうしても未訪問のリンクの色が変わりません。 こんな感じの例で設定しています a{ color:0000ff; font-style:normal; text-decoration:underline; } a:link { color:0000ff; font-style:normal; text-decoration:underline; } a:visited { color:#934C7B; text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } a:active { text-decoration:none; } link要素も試してみましたが、どうしても未訪問のリンクの色だけかわりません。 同じような質問がありましたが、実際に解決策、納得がいかなく質問させていただきました。 昨日今日でサイト作りをはじめたばかりで、色々と疎いです。 解決方法を探しています、なにとぞよろしくお願いします。

  • 外部CSSでリンクカラー指定

    外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか? その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか? またそのようにする方法があれば教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • cssの外部ファイルでのリンクの装飾

    学校の課題で今HPを作っています。 外部ファイルでリンクの装飾をしようとしているのですが、 検索してもHEAD内に組み込むタイプのタグしか出てきませんでした。 <Style Type="text/css"> <!-- A:link { text-decoration:none; color:#000080; } A:visited { text-decoration:none; color:#000080; } A:active { text-decoration:underline; color:#000080; } A:hover { text-decoration:underline; color:#1e78ff; } //--> </Style> ↑このようなものを外部ファイルの場合はどう書けばいいのでしょうか? つまり↑の内容(リンクの装飾)を↓のような形式に書き換えたいということです。 #title{ font-size:24px; font-weight:bolder; font-family:Arial; } わかりづらくて申し訳ありませんが、どなたか詳しい方いましたらよろしくお願いします★

    • ベストアンサー
    • HTML
  • 画像の横にリンクボタンを置きたいんですが

    画像の横にリンクボタンを置きたいんですが <img align=left src="m38.jpg><br> <A HREF="right.html" STYLE="text-decoration:none;color:006633;">在りし日1</A> <br> <br> <A HREF="right1.html" STYLE="text-decoration:none;color:006633;">在りし日2</A> <br> <br> <br clear="all"><br> とやってみましたがうまくいきません。画像がでてきません。どうしたらよいでしょうか?

    • ベストアンサー
    • HTML
  • シーサーブログのサイドバーにあるリンクについて

    うまく言葉にできないせいか、 ネットで調べても見つからないので質問させていただきます。 サイドバーの最新記事やカテゴリ、リンクや過去ログなど、 リンクすべてに、リストマークをつけたいんです。 見づらいので、箇条書きの部分にマークをつけて表示させたいのです。 どうしたらいいんでしょうか? スタイルシートと、コンテンツのHTMLを、カスタムするのだろう、 とは思っていますが、どのような表記をすればいいですか? 以下は、現在のスタイルシートの、サイドバーの部分です。 ↓ -------------------------------------------------------- サイドバーボディ -------------------------------------------------------- .sidetitle { font-size: 95%;color: #ffffff; font-weight: bold; text-align: left; line-height : 1.6; } .side { background: #ffffff url(); font-size: 80%; text-align: left; position: relative; line-height : 1.5; margin-bottom: 15px; } .side a { text-decoration:none; } .side a:hover { color:blue; text-decoration:underline; } .side-tag { font-size: 80%; } .side-tag a{ color: #777777; text-decoration:none; } .side-tag a:hover { color:#CC0000; text-decoration:underline; } .side ul { margin: 0; padding: 0; } .side li { list-style-type: none; } .side li a { text-decoration: none; } .side li a:hover { color:#CC0000; text-decoration:underline; } 以上。 よろしくお願いします。

  • ブログの下線

    fc2ブログでアフィリエイトをしています。 私のブログのテンプレートは、ブログタイトルと記事のタイトルにカーソルをもって行くとリンクの下に下線が表示されるのですが、それ以外は色が変わるだけで下線が表示されません。 画面右側(プラグインカテゴリ2)のフリーエリアは、テキストリンクに常に下線が表示されるようにしたいんです。 他のリンクはカーソルがきた時だけ、下線がでるようにしたいです。 ブログ初心者なので分かりやすくお願い致します。 /* リンクの設定 */ a{cursor : pointer ;} a:link{ color : #000000; text-decoration: none; } a:visited{color : #000000; text-decoration: none; } a:active{color : #008B8B;} a:hover{color : #2F4F4F;} .entry a{font-weight: nomal;} h1, h2, h3{ color : #808080; text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; } h2 a{ text-decoration: none; }

  • 【ヤプログ】コメント書き込み者の名前の部分にアンダーラインを付けたい

    ヤプログのHTML/CSS変更可能のピンク色のスキンを使用しています。 記事にコメントが付くと、本文があってその下に Posted ○○○ at 2005年10月19日(水) 14:49 のように書き込み者の名前(○○○)が出る所があります。 ○○○さんが書き込みする時に自分のブログのURLを入力していた場合、コメントの送信をしたら名前の部分にアンダーラインを出すか、色を変えたいのですができません。 スタイルシートの .posted A:link { FONT-WEIGHT: normal; COLOR: #999; TEXT-DECORATION: none } のTEXT-DECORATION: none所を TEXT-DECORATION: underlineに変えても 記事の下に付いてるコメント(0) | トラックバック(0) の所が変わるだけで、書き込み者の名前の所にアンダーラインは出ませんでした。 どこを変えればできますか? 教えてください<(_ _)>

  • リンクの下線や色の指定を特定のところだけ設定したい

    HTMLページ内で、いくつもあるリンクの中で、特定の箇所だけ 下線を付けない onMouseの時だけ下線を付ける 色をデフォルト以外の色を付ける ようにしたいのですが、どのようにしたらいいでしょうか。 たとえばこの下はむちゃくちゃですが、 .link { font-size:12pt; color:#BF0000; font-weight: bold; text-decoration:none; a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; }} こんな感じでスタイルシートに書いて <a href="xxxx.html"><span class="link">click</span></a> みたいな感じでも少しずつ変えながらいろいろ試してみたのですが 色やonMouse以外の時の下線なしはできたのですが、onMouse時の下線付きがうまくいきません。 どうすればよいかご存じの方ご教授ください。

    • ベストアンサー
    • HTML
  • TDタグをスタイルシートを使って綺麗に簡単に書きたい。

    二つほど質問があります… 以下のようなcssとhtmlを書きました。 ○stylesheet.css body{background-color:#ffffff} a:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} ○XXX.html <html> <head> <meta http-equiv="text/html" contents="Shift_JIS"/> <link rel="stylesheet" href='../css/stylesheet.css' type="text/css"/> </head> <body> <table border> <tr>  <th>&nbsp;</th>  <th>XXXXXX</th>  <th>XXXXXX</th>  <th>XXXXXX</th> </tr> <tr>  <th>XXXXXX</th>  <td align="right"><a href="###.html">100</a></td>  <td align="right"><a href="###.html">525</a></td>  <td align="right"><a href="###.html">300</a></td> </tr> <tr>  <th>XXXXXX</th>  <td align="right"><a href="###.html">10</a></td>  <td align="right"><a href="###.html">150</a></td>  <td align="right"><a href="###.html">300</a></td> </tr> </table> </body> </html> 質問1 <td>は全て数値で、必ず右寄せ(align="right")なのですが、 stylesheet.cssの中に書いてしまいたいのです…でも td{align:right} と記述しても右寄せしてくれません…どう書くのが正しいのでしょうか? 質問2 マウスカーソルをリンクに合わせると文字が反転するようになっているのですが できる事ならtdタグの空白部分も反転したほうが良いと思うのですが td:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} としても駄目で <a href="###.html"><td align="right">100</td></a> とするとリンクが無くなってしまいました… 上手く実行できるようになりますでしょうか? できればJavaScriptを使いたくないんです… わがままな質問ですが、回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 同ページ内のリンク下線が消えない

    スタイルシートにて、ホバーとアクティブ以外はリンク線が出ないようにしています。 通常は問題ないのですが、同ページ内にリンク先があり、 一度クリックすると下線が表示されたままになってしまいます。 同ページ内リンクが複数あり、それらをクリックするとクリックした分のリンク線が表示されたままになってしまい、困っています。 IEですと問題ないようなのですがChromでこうなってしまいます。 下記のように記述してあります。 お知恵を拝借できますでしょうか。 a:link { text-decoration:none; color:#333333; } a:visited { text-decoretion:none; color:#333333; } a:hover { text-decoration:underline; color:#3333FF; } a:active { text-decoration:underline; color:#3333FF; } a{ text-decoration:none; }

    • ベストアンサー
    • CSS