小粋空間: リンクをマウスオン時にずらす

Top ＞ CSS ＞リンクをマウスオン時にずらす

2004年9月29日

リンクをマウスオン時にずらす

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

これも使い始めて随分日が経ちましたがとりあえずご紹介まで。
文字や画像のリンクにマウスをポイントすると表示が右下にずれるという技です。我楽さんのサイトで使われているのが気に入って、使ってみました。とりあえずタイトル文字と右下のバナーに適用させています。こういう小技は洒落ていていいですね。
カスタマイズ方法は、スタイルシートで該当するa:hoverの中に

position:relative; top:1px; left:1px;

を入れればOKです。

Posted by yujiro

« MT 3カラムテンプレート（サイズ固定） | Main | テンプレート・モジュールの利用 »

人気エントリー

トラックバックURL

このエントリーのトラックバック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

≫ - from Personal Injury Lawyer
Personal injury attorneys and lawyers typically represent clients (plaintiffs) w... [続きを読む]

Tracked on February 5, 2005 8:42 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

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

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

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