テキストリンクの色と装飾の設定

アフィリエイト初心者講座：TOP PAGE » テキストリンクの設定 » テキストリンクの色と装飾の設定

テキストリンクの色と装飾の設定

熊本の天気は雨・・
偏頭痛がひどくて、気分は限りなくブラックに近いグレーって感じです。

更新をサボってばかりなので、アクセスもそれなりに・・

ガビィーーーン！

チョットばかり凹んでる・・寿一太朗です。こんばんは
あなたはテキストリンクの色に満足してますか・・？

テキストリンクの色は、ブルー系の色がクリックされやすいって事
知ってますか！？

まぁ、デザインとの兼ね合いもあると思うのですが
どっちを取るかは、あなたの考え方次第です。

テキストリンクの色指定はCSSによって指定してあります。
ご自身のCSSを見てください。

テキストリンクの色と装飾

スタイルシートの最初のほうにこんなCSSが書いてあります。

/* リンクの色と装飾 */

a:link { color:#0000FF;text-decoration:underline; }
a:hover { color:#0000FF;text-decoration:underline; }
a:active { color:#FF0000;text-decoration:underline; }
a:visited { color:#990099; text-decoration:underline; }

上記の記述に関する説明は、以前の記事で書いてるので
ここを ⇒ https://fanblogs.jp/crescent/archive/74/　参照してください・・。

このままでは、全てのテキストリンクに適用されてしまうので・・
以前の説明では、 #footer をセレクタに記述してます。

#footer a:link { color:#FFFFFF;text-decoration:none; }
#footer a:hover { color:#006600;text-decoration:none; }
#footer a:active { color:#FF0000;text-decoration:none; }
#footer a:visited { color:#FFFFFF; text-decoration:none; }

フッター部分は背景色が違う訳だからテキストリンクの色も変えなければ
見にくいですよねっ！

セレクタにid属性やクラス属性を加えることで、その属性の中だけで有効になります。
ただ、id属性は重複してはいけない属性なので注意が必要です。

以上の事を参考に、部分的テキストリンクの色を変更したい場合は
セレクタにid属性かクラス属性を追記し、各セレクタに指定して下さい。

ワンポイントアドバイス

テキストを部分的にCSSの指定と違う色や太さで強調させたいときは
インラインで下記のように指定すると良いです。
<span style="color:#FF0000;font-size:12px;font-weight:bold;">ワンポイントアドバイス</span>

まっ、こんな事はスタイルシートで書かなくても文字の設定で出来るんですけど
CSSの書き方を覚えてたほうがいろいろと便利ですョ！

アンカータグと一緒に書けば・・
<a href="移動先のアドレス" target="_blank"><span style="color:#FF0000;font-size:12px;font-weight:bold;text-decoration:underline;">ワンポイントアドバイス</span></a>

補足説明

■ なぜアンダーラインを書くのか・・
デフォルトでテキストリンクには、アンダーラインが付くのですが
ブラウザの設定でデフォルトのアンダーラインは消せるのであえて書いてます。

■ target="_blank" ってなに！？
ターゲット属性を書く事で移動先のページを、同じウインドウまたはタブで
表示させるのか、別のウインドウまたはタブで表示させるかを決められます。

内部リンクであれば同じページ内でもかまいませんが外部へのリンクであれば
自分のページはそのままで別ページで開いたほうが良いと思いませんか・・・。

出来ないと思うのではなく、やってみようと思う勇気があなたの進化を生み出す。

いつも笑顔で。。
寿一太朗