カーソルが乗った時、リンクがずれるようにするには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
こんばんは。

渡辺麻友


リンクにカーソルが乗った時に、そのリンクが
少しずれるようにする方法を御紹介します。

カーソルを乗せてみて下さい(↓)。

やさしいアメブロカスタマイズ!と女性タレント画像


わてくちめのブログ、ブログ記事内のリンクは、
上のようにカーソルが載ると少しずれる設定をしてます。

このほうが、これはリンクですよ~!って、
ブロブ閲覧者さんにも解り易くて良いのではと
思います。

他にも、サイドバーやメッセージボードのリンクも
全部ずれるように設定する仕方もあったんですが、
何故か、このブログの場合、ページ送りボタンが、
バッタのように飛び跳ねてしまいましたww

で、記事内のリンクだけ、この設定をしてます。


記事内のリンクにカーソルが乗った時に少しずれるようにする方法



※CSS編集用デザインを採用されてる方向けです。

以下のコードをコピーして、CSSの末尾にペッ!
貼り付けて下さい^^;


/*記事内リンクがオンマウス時にずれる-08-16*/
.articleText a:hover{color:#CC0000; position: relative; top: 1px; left: 1px;}


赤字の箇所がオンマウス時のテキストリンク
の色です(上の場合は、少し暗めの赤)。

・ position: relative;は位置をずらすって
意味だと思います。

・top: 1px; left: 1px;は上から1px、左から1px
つまり右下へ1pxづつ、ずらすって意味だと思います。

このpx値をあまり大きくすると、崩れたような感じに
なってしまいますので、1~3位が適当ではないかと
思います。

尚、この設定をすると画像リンクもオンマウス時に
ずれるようになります。


よかったら、試してみてください。


☆ブィブィ o(^_^)o


パラマウントニャンコ

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ