ブログの下線

質問

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

回答No.5

kyo999 · ベストアンサー

・ブログタイトルと記事タイトルは、カーソル重なり時のみ下線表示
・それ以外は、全て常に下線表示
の方が簡単に出来ます。
以下を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を設定することです。

お礼

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

回答No.4

kyo999

今回は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;
}

/* ４の「続きを読む」のリンクを常に下線表示 */
.next a ,
.next a:link ,
.next a:visited ,
.next a:hover
{
text-decoration: underline;
}

---------↑ここまで↑---------------

先ほどの記事構成の中の４の『「続きを読む」のリンク』を常に下線表示したくない場合は、最後の

/* ４の「続きを読む」のリンクを常に下線表示 */
.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

>>記事の中のリンクには常に下線が表示されるようにしたいんですけど、できますか？　

出来ますが少しややこしくなるのでもう少し詳しく教えて下さい。

letsfc2blog4での「記事」部分の構成は、

１．記事タイトル
２．日付(リンクではないので今回は関係なし)
３．記事本文の中のリンク
４．続きを読むのリンク
５．記事本文(続きの部分)の中のリンク
６．Googleアドセンス(未使用の可能性あり)
７．ランキング(未使用の可能性あり)
８．カテゴリ、トラックバック、コメントへのリンク

という感じですが、常に下線表示したいのはどの箇所でしょうか？
あと現時点でテンプレートのHTML部分を何か編集してあるでしょうか？

記事本体だけなら３と５だけと思いますが、「続きを読む」のリンクや
テンプレートのHTMLにアドセンスやランキングを追記している場合、
下線をどうするかで追記場所が変わってきますので。
(CSSだけだと複雑になるのでテンプレートのHTML側に追記した方が簡単になりますが、そのためにどの部分が常時下線表示か知りたいです。)

補足

すいません、説明不足でした。
私が常に下線表示したい場所は、3と5です。4もできれば入れたいです。　他はカーソルきた時だけ表示がいいです。

HTMLは何も編集していません。初期のままです。
スタイルシートは、教えて頂いたのを一番下に記入しただけです。
アドセンスや、ランキングも何もしていません。

3と5の記事本文の中のリンクは、アフィリエイトのテキストを貼ったりしているんですけど、カーソルがきた時だけ下線表示します。ここが常に表示にしたいんです。
アフィリのタグは変更したらいけないと聞いたんですけど、HTMLでやってもいんですかね？？　テンプレートのHTMLは、変更しても問題ないのかな？　　まったくの素人ですいません。

よろしくお願いいたします。

回答No.2

kyo999

FC2ブログユーザーです。

画面右側のフリーエリアとは、公式プラグイン → 拡張プラグインの
「フリーエリア　テキストや各種ブログパーツのスクリプトを貼り付けられます」
の事でしょうか？

その場合ですと下記を「スタイルシート編集」の末尾に"追加"すればＯＫのはずです。(上書きではありません!)

---------↓ここから↓---------------

/* フリーエリアは常に下線表示 */
.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

text-decoration: none;
を
text-decoration: underline;
にする。つまり、
a link{text-decoration: underline; }

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