文字の設定(7)ちょっと動くリンク

ホームページでもブログでも、リンクスタイルの初期設定は下線付きです。 これを消す方法は以前にこちら↓でご紹介しました。   文字の設定(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   …> 濃い目の…

続きを読む

文字の設定(6)リンク下の下線を消す

[修正あり(2007/2/17)]下線の引いてある文字を見ると、リンクだと思っちゃうクセがついてます、私。 下線が付いてるのにリンクじゃないと、「あれ?」と思っちゃうくらい。 これはもう習慣というのかな。 みなさんはどうですか。 でも、このブログでは、リンクには本文と違う色が付くようにはしていますが、下線が付くようにしていません。 というのは、リンクの箇所が多いページだと、いちいちリンクに下線が付くと、読みにくくなってしまうからなんです。 でないと、左サイドバーなんて、ほとんど下線付きになっちゃいます。 前置きがちょっと長かったかな。 必要に応じて、リンクの下線を取る設定に変えてみましょう。   マイ・ブログ > デザイン と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。 現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。 ※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。 スタイルシートによって、内容はいろいろだと思うんですが、「a」という箇所を探します。 このブログでは、下のようになっています。 a { color: #369; text-decoration: none; } colorがリンク部分の文字色です。3桁になってますが、#336699のことです。 本文とはパッと見て違いのわかる色がいいですね。 色につ…

続きを読む

もっと見る