• ベストアンサー
  • すぐに回答を!

ブログの下線

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; }

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

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

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

  • ベストアンサー
  • 回答No.5
  • kyo999
  • ベストアンサー率64% (34/53)

・ブログタイトルと記事タイトルは、カーソル重なり時のみ下線表示 ・それ以外は、全て常に下線表示 の方が簡単に出来ます。 以下をCSSの最後に追記すれば可能です。(確認はFirefox3とIE8のみ) ---------↓ここから↓--------------- /* 一度全てのリンクを常に下線表示に初期化 */ a , a:link , a:visited , a:hover { text-decoration: underline; } /* H2=記事タイトル:カーソルが重なり時以外は下線なし=重なり時のみ下線表示 */ h2 a , h2 a:link , h2 a:visited { text-decoration: none; } ---------↑ここまで↑--------------- #2、#4で追加したCSSを残したままでも、削除しても、 一番後ろに上記CSSを追記すれば希望の様に下線が表示されるはずです。 また#2,#4のCSSを削除した場合は、#4で修正したHTMLを元に戻しても大丈夫です。 本来なら質問時のCSS(/* リンクの設定 */)の該当箇所を直接修正した方がいいのですが、 間違える可能性があるかも知れませんので追記にしました。 以上でアフェリのリンクも常に下線表示になるはず。 (#4でリンクが常時下線になりませんでしたか?) なおアフェリタグをさらにタグで囲むとは、#4のHTML修正でしたように <div class="my_affili_tag"> < ~元々のアフェリのタグ~ > </div> として、追記したmy_affili_tagクラスにCSSを設定することです。

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

質問者からのお礼

できました!!! 何度も質問し、その都度丁寧に教えていただき本当に有難うございました。 また何かあったら宜しくお願いします。

関連するQ&A

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

    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
  • 同ページ内のリンク下線が消えない

    スタイルシートにて、ホバーとアクティブ以外はリンク線が出ないようにしています。 通常は問題ないのですが、同ページ内にリンク先があり、 一度クリックすると下線が表示されたままになってしまいます。 同ページ内リンクが複数あり、それらをクリックするとクリックした分のリンク線が表示されたままになってしまい、困っています。 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
  • borderでa:hover下線表示させるとズレる

    underline では雰囲気に合わないため、border-bottomでホバー時のリンク下線を表示させています。具体的には以下のような感じです。 a {color: 青; text-decoration: none;} a:hover {color: 赤; text-decoration: none; border-bottom: dotted 1px 赤;} これでほとんど問題ないのですが、まれにホバー時にガタッと表示がズレることがあります。よく分からないのですが、ちいさなdiv要素を連続させている部分で起こるような気がします。リンクにマウスオーバーすると、続くdiv部分が下線分?下に動く感じです。 説明がうまくできているか分かりませんが、解決策があったら教えてください。ちいさなことですが、結構気になってしまいます。

    • ベストアンサー
    • HTML

その他の回答 (4)

  • 回答No.4
  • kyo999
  • ベストアンサー率64% (34/53)

今回はCSSとHTMLの両方を触ります。 ●まずHTML。 テンプレートのHTMLの中から <%topentry_body> という箇所(大体65行目辺り)を探し出してその部分を丸ごと <div class="entry_body"> <%topentry_body> </div> と書き直して下さい。 元の<%topentry_body>を<div class="entry_body">と</div>で囲む感じになります。 修正したら下の「更新」ボタンで変更を保存します。 ●次にCSS。 以下をCSSに追加。(#2で書いたCSSのさらに後ろに) ---------↓ここから↓--------------- /** 記事の中のリンクを常に下線表示 */ .entry_body a , .entry_body a:link , .entry_body a:visited , .entry_body a:hover { text-decoration: underline; } /* 続き部分の記事のリンクを常に下線表示 */ #more a , #more a:link , #more a:visited , #more a:hover { text-decoration: underline; } /* 4の「続きを読む」のリンクを常に下線表示 */ .next a , .next a:link , .next a:visited , .next a:hover { text-decoration: underline; } ---------↑ここまで↑--------------- 先ほどの記事構成の中の4の『「続きを読む」のリンク』を常に下線表示したくない場合は、最後の /* 4の「続きを読む」のリンクを常に下線表示 */ .next a , .next a:link , .next a:visited , .next a:hover { text-decoration: underline; } を削除するかコメント化すれば常時下線表示にはなりません。 なんか同じような記述が並んでキレイではありませんがご了承下さい。 一括で<div>で囲んだらレイアウトが崩れてしまったので。 (確認はFirefox3とIE8のみです) 記事中にアフェリエイトを貼っているならそこも常に下線表示になると思います。 もし下線表示しない場合はアフェリエイトの種類(グーグルやFC2アフェなど)か HTMLタグ(IDなど個人情報のわかる部分は伏せて)を書いて下されば対処できると思います。 アフェリエイトのタグそのものは変更しない方がいいでしょうが、タグを別のタグで囲むことは出来ると思います。 また毎回同じタグを貼っているのでしたらテンプレートHTMLに書いてしまうのも手です。 テンプレートHTMLは変更しても問題ないですが、CSSと違いFC2ブログ固有の変数(<%topentry_body>など)を使っているので、知らないで修正するのは止めておいたほうがいいです。 あとHTML・CSSとも修正する場合は事前にフォーム欄の中を丸ごとテキストエディタなどにコピペしておくと、万が一失敗した時に正常に動作する時点まで戻る事ができるのでお勧めします。

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

質問者からのお礼

ありがとうございます!! できました。分かりやすく説明してくださり本当に感謝です。 ちなみに、一番上のブログタイトルと、記事タイトル以外は常に下線表示(カテゴリ、最新記事、コメント、フリーエリア等)だともっと簡単にできるんですかね? アフィリのタグを別のタグで囲むのは、記事に貼ったアフィリのタグに下線のHTMLを入れるって事ですよね? もし、よろしければお願いします。   

  • 回答No.3
  • kyo999
  • ベストアンサー率64% (34/53)

>>記事の中のリンクには常に下線が表示されるようにしたいんですけど、できますか?  出来ますが少しややこしくなるのでもう少し詳しく教えて下さい。 letsfc2blog4での「記事」部分の構成は、 1.記事タイトル 2.日付(リンクではないので今回は関係なし) 3.記事本文の中のリンク 4.続きを読むのリンク 5.記事本文(続きの部分)の中のリンク 6.Googleアドセンス(未使用の可能性あり) 7.ランキング(未使用の可能性あり) 8.カテゴリ、トラックバック、コメントへのリンク という感じですが、常に下線表示したいのはどの箇所でしょうか? あと現時点でテンプレートのHTML部分を何か編集してあるでしょうか? 記事本体だけなら3と5だけと思いますが、「続きを読む」のリンクや テンプレートのHTMLにアドセンスやランキングを追記している場合、 下線をどうするかで追記場所が変わってきますので。 (CSSだけだと複雑になるのでテンプレートのHTML側に追記した方が簡単になりますが、そのためにどの部分が常時下線表示か知りたいです。)

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

質問者からの補足

すいません、説明不足でした。 私が常に下線表示したい場所は、3と5です。4もできれば入れたいです。 他はカーソルきた時だけ表示がいいです。 HTMLは何も編集していません。初期のままです。 スタイルシートは、教えて頂いたのを一番下に記入しただけです。 アドセンスや、ランキングも何もしていません。 3と5の記事本文の中のリンクは、アフィリエイトのテキストを貼ったりしているんですけど、カーソルがきた時だけ下線表示します。ここが常に表示にしたいんです。 アフィリのタグは変更したらいけないと聞いたんですけど、HTMLでやってもいんですかね?? テンプレートのHTMLは、変更しても問題ないのかな?  まったくの素人ですいません。 よろしくお願いいたします。  

  • 回答No.2
  • kyo999
  • ベストアンサー率64% (34/53)

FC2ブログユーザーです。 画面右側のフリーエリアとは、公式プラグイン → 拡張プラグインの 「フリーエリア テキストや各種ブログパーツのスクリプトを貼り付けられます」 の事でしょうか? その場合ですと下記を「スタイルシート編集」の末尾に"追加"すればOKのはずです。(上書きではありません!) ---------↓ここから↓--------------- /* フリーエリアは常に下線表示 */ .plugin-freearea a , .plugin-freearea a:link , .plugin-freearea a:visited , .plugin-freearea a:hover { text-decoration: underline; } /* カーソル重なる時のみ下線表示 */ a:hover { text-decoration: underline; } ---------↑ここまで↑--------------- 上記で上手くいかない場合、テンプレート名がわかれば対処可能と思います。 ご質問のCSS+回答のCSSを以下の環境でテストしました。 OS:Windows XP SP3 Firefox 3.0.15、2.0.0.20 IE 8、7、6、5.5 (7~5.5はIETester使用)

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

質問者からの補足

有難うございます!!! ちゃんとフリーエリアに下線できました。 私のブログは テンプレート letsfc2blog4 を使用しています。 一番上のブログのタイトルと記事のタイトルは、カーソルを合わせた時だけ下線が表示されるようになってて気に入ってるんですけど、記事の中のリンクもカーソルがきた時だけ下線が出るようになってます。 記事の中のリンクには常に下線が表示されるようにしたいんですけど、できますか? 初心者なんで、書く位置も教えて頂けますでしょうか。 宜しくお願いします。

  • 回答No.1
  • naokita
  • ベストアンサー率57% (1008/1745)

text-decoration: none; を text-decoration: underline; にする。つまり、 a link{text-decoration: underline; } ただし、そのフリーエリアの位置を特定して、 そのフリーエリアを指定している a link を {text-decoration: underline; }としなければいけない。 更に、他の a link があれば優先順位も考慮しなければいけない。

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

関連する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>

  • blog CSSのタイトル色の変更指定について!!

    このblog CSSのブログタイトルの色変更はどうすればいいですか? .blogtitle の所で色指定してもダメでした?他に方法があるのですか? livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si

    • 締切済み
    • CSS
  • リンクの下線と文字の間隔を開けるには

    ブログでやりたいんですが、教えてください。調べてみると、padding-bottom: px らしいんですけど、うまくいきません。リンクの部分は次のような記述(ライブドア)になっているんですが、どう書き換えればいいのでしょうか。 a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{background-color:orange;text-decoration:none;} よろしくおねがいします

    • ベストアンサー
    • HTML
  • スタイルシートでオンマウスで下線を表示させないには

    以下のような外部スタイルシートを作ったのですがうまくいきません。 p.menu a{ font-size: 12px; } p.menu a:link{ text-decoration:none } p.menu a:visited{ text-decoration:none; } p.menu a:hover{ text-decoration:none; } p.menu a:active{ text-decoration:none; } noline a{ text-decoration:none; } 以下はHTMLの抜粋です。 <noline> <TR> <TD>●<a href="http://www.hogehoge.net/" style="text-decoration:none" target="_blank"><font color="black" onMouseover="this.color='#ff8800'" onMouseout="this.color='black'">ああああ</font></a></TD> </TR> </noline> 結局外部スタイルシートを使わずにWEBPAGEを作成しましたがとても手間がかかりました。今後のために原因を知っておきたいので宜しくお願いします。

    • ベストアンサー
    • CSS
  • ヤフーオークションのリンクでカラー指定と下線を消したい

    ヤフーオークションでリンクの下線を取っ払い、カラーも#660000で指定したいのですが上手くできません。 text-decoration:none;および<font color=#660000>はどこに突入すればいいのでしょうか? <a href="http://~" target="_blank" title="自己紹介文">自己紹介文</a>←基本ベース <a href="http://~" style=text-decoration:none; target="_blank" title="自己紹介文"><FONT SIZE=1 COLOR=#660000>自己紹介文</FONT></a>←でくくっても全く効果がありません。 プレビューで再表示されると下線付きデフォルトのリンク色が紫#810081で表示されてしまいます。

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

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

    • ベストアンサー
    • HTML
  • 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; }

  • 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
  • a:hoverの下線指定が反映されない

    htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。はじめは一部のリンク箇所だけが反映されなかったのですが、訪問済みになった箇所がどんどん反映されなくなってしまい、しまいにはすべての箇所が反映されなくなりました。ただし、それはunderlineのみでfont colorやboldはしっかり反映されているのです。 これはなぜでしょうか? ちなみにscriptの記述は一切していません。 最初は同様の記述を外部ファイルにしていたのですが うまく読み込めていないのかと思って、htmファイル内に 記述しましたがダメだったというわけです。 <style type="text/css"> <!-- body { font-size: 10.5pt; line-height: 130%} table { font-size: 10.5pt; line-height: 130%} a:hover{ text-decoration: underline; color: #FF0080; font-weight: bold} a:active { text-decoration: none} a:link { text-decoration: none} a:visited { text-decoration: none} --> アドバイスお願いいたします。

    • ベストアンサー
    • HTML
  • FC2 ブログ カスタマイズ

    Fc2ブログでアフィリエイトをやっています。 テンプレート mushroom を使わせていただいているのですが、リンクに下線を引くことは出来ないでしょうか? a { text-decoration: none; /*\*/ overflow: hidden; /**/ } a:link, a:visited, a:focus {color: #993300; } a:hover, a:active { position: relative; left: 1px; top: 1px; } /* Image このあたりが関係ありそうだと思うのですが text-decoration: none; を消してしまうと大きなタイトルにも小見出しにも下線がついてしまいます。 できれば記事中のアフィリエイトとフリーウエアのアフィリエイト部分に「フォントの色そのままで下線を入れる」か、「下線なしで青くする」かしたいのです。 どうぞよろしくお願いします。