＞ ＞ CSSでリンクをマウスオン（マウスオーバー）時にずらす

CSSでリンクをマウスオン（マウスオーバー）時にずらす

Posted at September 29,2004 12:15 AM
Tag：[]

CSSでリンクをマウスオン（マウスオーバー）時にずらすカスタマイズを紹介します。

１．概要

通常、リンクにマウスをポイントすると、テキストリンクの場合はアンダーラインを表示したり、リンクの色を変更することでユーザビリティを確保しますが、本エントリーで紹介するテクニックは、テキストや画像表示が右下に少しだけずらすことでマウスのポイントを示します。

サンプルを作りましたので、動作はそちらでご確認ください。

サンプル
サンプル

当ブログではサイドバーのタイトル部分や右下のクレジットバナーに適用させています。

２．カスタマイズ

マウスオン（マウスオーバー）時にずらしたい要素の「:hover」に、positionプロパティ、topプロパティ、leftプロパティを追加します。

a:hover {
    position: relative;
    top: 1px;
    left: 1px;
}

topまたはleftプロパティの値を変更すれば、ずらし方を好きなように変えることができますが、ずらしすぎず、適度な範囲にとどめることを推奨します。

2012.09.19
本文を見直しました。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ ページ分割 from Cool Gaming ! weBlog
うまく行ってるように見えて全然うまく行ってないし、日本語名カテゴリーの php ... [続きを読む]

Tracked on September 29, 2004 9:54 PM

≫ リンクをマウスオン時にずらしてみる from Magic White
小粋空間　リンクをマウスオン時にずらすを参考にやってみました。 文字や画像のリン... [続きを読む]

Tracked on November 27, 2004 10:12 PM

≫ 見た目を変えて、微妙に改良も加えてます。 from 東京医科大学合気道部TEAM-Ishikawa
小粋空間さんを参考に、”リンクをマウスオン時にずらす”に挑戦。うまく出来ました！ [続きを読む]

Tracked on December 8, 2004 2:16 AM

≫ 小粋空間: リンクをマウスオン時にずらす from 夢幻の書
小粋空間: リンクをマウスオン時にずらす 小粋空間さんにて　紹介されていた小技ですが スタイルシート... [続きを読む]

Tracked on January 5, 2005 2:39 AM

≫ 小粋なユーザーコミュニティ100人突破記念企画参加 from TENERE
このブログのカスタマイズドにあたっては、このブログにこれまで書いてきたTipsな... [続きを読む]

Tracked on June 27, 2005 1:46 AM

≫ マウスオン時にテキストをずらす from Project MultiBurst
このブログの左上のバナー文字「Project Multiburst」ですが、 文... [続きを読む]

Tracked on November 18, 2005 7:00 PM

≫ マウスカーソルを乗っけたらリンクが動くようにする from MovableType幼稚園
マウスカーソルを乗っけたら、リンクが動くようになっているサイトをよく見かけていましたが、ひそかにうらやましがっていました（笑）。 このたび、めでたく方法が... [続きを読む]

Tracked on February 14, 2006 1:31 AM

≫ マウスを載せるとリンクがちょいと動く from 裏日記･･･気ままに更新･･･備忘録
Movable Type3.2-ja 覚え書き 備忘録？ ◎マウスを載せるとリンクがちょいと動く テ... [続きを読む]

Tracked on February 24, 2006 2:28 PM

≫ モブログの写真画像をいじる from no title
携帯から投稿した写真画像を枠で囲んでみました。... [続きを読む]

Tracked on February 25, 2006 3:46 AM

≫ リンクの「ズラ」し from なげやりぶろぐ
毎日毎日MT3.2のカスタマイズをひたすらやってる訳ですが、 「これ簡単だし、FC2でも出来るな」と思ったんで、ご紹介。 リンクをマウ... [続きを読む]

Tracked on April 26, 2006 6:06 PM

≫ リンクにカーソルをあてるとリンクが動きま?す♪ from yozoの気が向いたと記
リンクにカーソルをあてると「プニュ」って感じで動くのを見たことありませんか。実は「わぁ?♪」って驚いたことがあるyozoです。（笑）これってさぞかし難しい... [続きを読む]

Tracked on June 14, 2006 5:19 PM
コメント

うわー、小技の紹介すみません。設定した私自身忘れてました。＾＾

[1] Posted by Border. : September 30, 2004 1:12 AM

いえいえ。
最初、設定の仕方が分からなくて勘で（笑）書いたら、画面全体がずれてビックリしました（笑）。

[2] Posted by yujiro : September 30, 2004 1:18 AM

いやいや。
それも新たな小技ということで。（笑）

[3] Posted by Border. : September 30, 2004 1:32 AM

（笑）。
ある意味「大技」ですね（笑）。

[4] Posted by yujiro : September 30, 2004 1:47 AM

Yujiroさん、こんばんはー♪
このカスタマイズおもしろいですね。
プニュという感じでリンクが動きますね。
CSSに一行追加でできるのもお手軽ですよ。
早速プニュにさせていただきました。
いつもありがとうございまっす。m(_ _)m
勝手ながらトラバも入れさせていただきました。

[5] Posted by yozo : June 14, 2006 5:23 PM

＞yozoさん
こんにちは。
記事参照ありがとうございます。
私も最初にこれを見た時驚きました。
うまくできたようで良かったです。
ではでは！

[6] Posted by yujiro : June 15, 2006 11:07 AM

はじめまして、小枠空間さん。
初めて訪問させて頂きましたワクと申します。

小枠空間さん。
このブログ、スゴイっす！！（笑）

めちゃめちゃクオリティ高くて、
僕はFC2ブログ使ってるんですけど、
MT使用なのにFC2でも応用効きまくりで、
涙モンで参考になります。（笑）

取り敢えず、早速「文字のプニュッ！」を
使わせて頂きました。
すいません。（笑）

でも、俺のテンプレートで
HTMLやスタイルシートにa：hoverが
ナカナカなくて、
スタイルシートに「アンカー」という部分で
やっとa：hoverを見つけた次第です。（泣）
結果、全てのリンクが「プニョッ！」になってしまいましたが。（笑）

これからも、イロイロ参考にさせて頂きます。
どうぞ宜しくお願い致します！
ではでは。

[7] Posted by ワク : February 12, 2007 11:03 AM

＞ワクさん
はじめまして。
ご利用＆ご連絡ありがとうございました。
FC2もいくつかカスタマイズ記事を書いておりますので参考になれば幸いです。
こちらこそ今後ともどうぞよろしくお願い致します。

[8] Posted by yujiro : February 13, 2007 1:04 AM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）