RSS 1.0
これを消す方法は以前にこちら↓でご紹介しました。
文字の設定(6)リンク下の下線を消す
今回は、マウスを乗せるとちょっと動く設定をご紹介します。
では、CSSを設定するページを開きます。
マイ・ブログ > デザイン > デザイン一覧
ページの真ん中より下の表に現在登録しているCSSの一覧が表示されています。
例えば、「light pole(右サイドバー)」というデザインでは、
a{
color:#36C;
text-decoration:none;
}
となっています。
これを、マウスを乗せたときに
・1px下に動く
・色が変わる
・下線が付く
という設定に変えてみます。
a{
color:#36C;
text-decoration:none;
}
という箇所を下記に書き換えます。
a { text-decoration: none }
a:link { color: #36c }
a:hover { color: #cc0000; text-decoration: underline; position: relative; top: 1px;}
hoverというのが、リンクにマウスを乗せたときの設定を書いている部分です。
一つひとつ解説しますね。
- color: #cc0000
…> 濃い目の赤い色。■ - text-decoration: underline
…> 下線付き - position: relative; top: 1px
…> 1px下に移動する
移動の方向は、topの他に、bottom（下に移動）、left（右に移動）right（左に移動）があります。
「topが下でbottomが上って逆じゃないの？」と思いますよね。
たぶん、topは上に空くスペースを指定してるんだと思うんです。その結果、下に動くと。
1pxは動く距離です。
数値を大きくした分だけ移動する距離も大きくなります。
移動させすぎると、他の文字にかぶっちゃうと思うのでほどほどに。
試しに20xp下に動く設定にしてみたら、マウスでうまく追えなくなりました(笑)。
色は点滅するし、ぐにょぐにょ動いて止まってくれないし、すごく気持ち悪いー(爆)。
今回は実際の見本を出せないので、画像で用意しました。
↓下の行にマウスを乗せてみてください。↓
文章が主体のブログで、リンクが動くのは是非があると思いますけど、リンクだってわかりやすい効果の一つとしてご紹介しました。
別に動かなくてもいいんです。
マウスを乗せたときにリンクの色が変わって下線が出る設定ができるということも、この記事を読んでいただけたらわかりますよね。
いろいろ応用してみてください。
余談ですが、リンクを下線付きのスタイルに戻したい場合は、
a{
color:#36C;
text-decoration:none;
}
の中の「text-decoration:none;」を削除してください。
[参考記事] こちらも読んでみてね
↓参考になったら、クリックで応援してね！↓
a { text-decoration: none }
a:link { color: #36c }
a:hover { color: #cc0000; text-decoration: underline; position: relative; top: 1px;}
コピペで、リンクの文字を、下線＋色かえに成功しました！
ありがとうございます！
ただ、ひとつ質問なのですが・・・
一度リンクを開いた文字が紫色に変わってしまうようになりました。
一度開いた箇所もブルーのままにしておきたいのですが、スタイルシートのどこをいじればよいのか判りません。
なお、上の文字コピペをする前は開いた文字は紫色には変わりませんでした。
あと、記事内のアフィリのリンクは文字がダウンするだけで、マウスを乗せても色が変わらないのですが、これはなぜでしようか・・・教えて頂けたら助かります！
a:visited { color: #36c }
という１行を足してください。
visitedというのは、クリックした（訪問した）という意味です。
> 記事内のアフィリのリンクは文字がダウンするだけで、マウスを乗せても色が変わらないのですが...
ソースを見せていただいたら、
<a href="・・・・"><font color="#0000ff"><ins>ハローキティ三輪車アドバンス</ins></font></a>
となってますね。
fontタグの部分が不要です。
<font color="#0000ff"> と </font> を削除すれば、うまくいくと思います。
insタグも要るのかな？ってちょっと疑問ですが、そこは自信がありません。
<a href="・・・・">ハローキティ三輪車アドバンス</a>
という具合になれば、解消するのでは？
a:visited { color: #36c }
を足してみた所、
クリック済のリンクが紫に変わることはなくなって解決したのですが、
一度見たリンクがマウスをのせても
color: #cc0000
…> 濃い目の赤い色
の色にかわらなくなってしまいました。
見てないリンクは濃い目の赤い色にちゃんとなります。
また、タイトルの文字色がリンクの文字色のブルーに変わってしまいました。
タイトルは、もとの設定の色がいいのですが・・・
アフィリは、私がもともとの設定色が目立たなかったので、手動で文字色を変えていたことが原因だったのですね。
解決しました。
三輪車のページを書き換えてみました。
ありがとうございます！！！
ブログ名のリンクについては別に指定されていませんか？
このブログでは、
h1 a
h1 a:hover
で指定してあります。
ご自分のブログのCSSを確認してみてください。