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ベストアンサー
- 回答日時:
・ブログタイトルと記事タイトルは、カーソル重なり時のみ下線表示
・それ以外は、全て常に下線表示
の方が簡単に出来ます。
以下を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
- 回答日時:
今回は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
- 回答日時:
>>記事の中のリンクには常に下線が表示されるようにしたいんですけど、できますか?
出来ますが少しややこしくなるのでもう少し詳しく教えて下さい。
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
- 回答日時:
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
- 回答日時:
text-decoration: none;
を
text-decoration: underline;
にする。つまり、
a link{text-decoration: underline; }
ただし、そのフリーエリアの位置を特定して、
そのフリーエリアを指定している a link を
{text-decoration: underline; }としなければいけない。
更に、他の a link があれば優先順位も考慮しなければいけない。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FC2 ブログ 行間の調整
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
パワーポイント:テキストボッ...
-
URLが青くならない
-
HTMLのbody内に<style>~</styl...
-
outlook2003にて新規メッセージ...
-
エクセルのセルの下線が消えない
-
Textareaの幅をブラウザ画面の90%
-
WORD2010 ハイパーリンクの下線...
-
Google Keepで数字に勝手に下線...
-
ワードプレス・プライバシーポ...
-
AppleのNumbersというアプリで...
-
Word で下線の色の変え方
-
ExcelのVBAで下線のついている...
-
アドレス入力方法
-
E-mail中の文章に赤で下線を引...
-
フランス語の質問です。 J'aime...
-
Wordです!!わからないところ...
-
エクセル:セル内の文字列の下...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FC2 ブログ 行間の調整
-
gooブログ記事の文章に囲みをつ...
-
ライブドアブログのサイドバー...
-
gooブログで記事全体のフォント...
-
MT4のトップにフリースペースを...
-
リンク文字の行間が小さくなり...
-
ライブドアのブログでHTMLを使...
-
Seesaaブログの行間設定
-
FC2ブログ 行間
-
行間の調整方法を教えてください
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
URLが青くならない
-
パワーポイント:テキストボッ...
-
Google Keepで数字に勝手に下線...
-
アンダースコア(下線)のあるメ...
-
AppleのNumbersというアプリで...
-
Latexにおける下線のひき方のコト
-
エクセルのセルの下線が消えない
-
AUTOCAD文字の下に同じ長さの線...
おすすめ情報