スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ --/-- ] スポンサー広告 | トラックバック(-) | コメント(-)

Q.記事のリンクに触れると凹(凸)むようにした[2左]

A.
これをすると、リンクに触れると、「カチッ」という感じにちょっとだけ左下(上)にずれる、つまり凹(凸)むようになります。
スタイルシートを変更するとできます。
以下、変更方法


1.
スタイルシートの27~35行目付近に
a:hover {
color:#333333;
text-decoration:underline;
}
a:active {
color:#333333;
text-decoration:none;
}

というのがあります。

2.
リンクに触れると凹むようにする場合は1.を…
a:hover {
color:#333333;
text-decoration:underline;

position:relative;
top: 2px;
left: 2px;

}
a:active {
color:#333333;
text-decoration:none;

position:relative;
top: 2px;
left: 2px;

}
このように赤文字のところ書き加えます。

3.
リンクに触れると凸むようにする場合は1.を…
a:hover {
color:#333333;
text-decoration:underline;

position:relative;
bottom: 2px;
left: 2px;

}
a:active {
color:#333333;
text-decoration:none;

position:relative;
bottom: 2px;
left: 2px;

}
このように赤文字のところ書き加えます。

4.
クリックした瞬間だけ凹んだようにし、カチッという感じにちょっとだけずれすようにするには、1.を…
a:hover {
color:#333333;
text-decoration:underline;

position:relative;
top: 2px;
left: 2px;

}
a:active {
color:#333333;
text-decoration:none;
}

このように赤文字のところ書き加えます。

5.
クリックした瞬間だけ凸んだようにし、カチッという感じにちょっとだけずれすようにするには、1.を…
a:hover {
color:#333333;
text-decoration:underline;

position:relative;
bottom: 2px;
left: 2px;

}
a:active {
color:#333333;
text-decoration:none;
}

このように赤文字のところ書き加えます。
ズレ幅を大きくする場合は、2px の 23 以上の数字に変更します。

6.
リンクの部分の下線を消したい場合は、1.
text-decoration:underline;text-decoration:none;と変更します。

7.
リンクの分の下線を全部消したい場合は、6.をやって、更にスタイルシートの22~25行目付近に、
a:visited {
color:#333333;

text-decoration:underline;
}
というのがあるので、この中の
text-decoration:underline;text-decoration:none;
と変更します。
スポンサーサイト
[ 05/25 ] [記事]2カラムpink 左サイドバー | トラックバック(-) | コメント(-)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。