マウスオン時にリンクをさらにアピール！

もともとこのブログでは、リンクが視覚的に分かるようにカスタマイズしてありました。

・マウスオン時に背景を水色にする
・マウスオン時に太字にする


で、衝動的にさらにもう一つカスタマイズ♪

・マウスオン時にピコっとリンクを移動する

positionってやつを使ってほんの少し右上にリンク対象を移動するようにしてみました。

もともと施してあったカスタマイズは文字に対して有効なものでしたが、今回のカスタマイズは画像に対しても有効。
サムネイル表示の画像にマウスオンすると画像がピコっと動くのでリンクがある事が分かります。
サイドバーに設置している各種バナーもピコっと動きますよ。



さらにリンクが分かりやすくなったけど・・・


結構ウザいかも・・・。(￣▽￣;)



このブログのリンクマウスオン部分のCSS

/* リンク（マウスポインタを乗せた状態） */
A:hover {
color: #0000FF;
background-color: #ccffff;
position:relative; bottom:2px; left:2px;
font-weight: bold;
}

seesaaの場合は、CSS追加後に再構築をするだけです。
作業前にCSSのバックアップをしておきましょうね。

Comments

ん？

わからん。
わかろうとしていない、ボクちゃんです。

Posted by うんとみ♪ at 2008年04月30日 13:24

＞うんとみさん
はい・・・いつも訪問してくれる方は？？？な人が多いかと。(￣▽￣;)
スルーでいいですよ。(ノ▽￣〃)ﾍﾍﾍ
検索エンジンとかで飛んで来た人には喜ばれるかもしれないけどね。

Posted by しばやん at 2008年04月30日 16:49

あ！。ほんとだ！。すご〜い！。

でも、ＣＳＳ乗せてもらっても、使い方の分からない私です・・・。ヽ(＝◇＝;)

Posted by 金華猫 at 2008年04月30日 22:43

あ、ほんとだ。ピコッてなってます〜。
リンクが並んでるとこだと、ピコッピコッピコッピコッってなるよね〜。

Posted by 緑緑(ryuryu) at 2008年05月01日 00:36

きゃー、ほんとだ。ピコってなってる〜〜。
でも、私には出来ましぇーん(*_*)
でも、出来たらいいなぁ。。。

Posted by keroko at 2008年05月01日 11:05

わかろうともせずコメ欄に来ました＼(゜ロ＼)　ではまた　バイバイ(^^)/~~~

Posted by バード at 2008年05月01日 15:28

よく分からないけど
ピコってなるからぐる〜って一まわりしてみた
(*´▽｀*)
ボタンが生きてるぞww

うちのパソコンすっかり羞恥心ですぅ
(´ヘ｀;)クスン･･･

Posted by まころん at 2008年05月01日 16:20

＞金華猫さん
意外と簡単なんで今度やってみる？

Posted by しばやん at 2008年05月01日 18:17

＞緑緑さん
緑緑さんってこの辺は得意ジャンルのイメージなんですけど・・・。

Posted by しばやん at 2008年05月01日 18:18

＞kerokoさん
kerokoさんにもできますよ。
シーサーだしねぇ。

Posted by しばやん at 2008年05月01日 18:18

＞バードさん
スルーでいいんだけどなぁ・・・。(ノ▽￣〃)ﾍﾍﾍ

Posted by しばやん at 2008年05月01日 18:19

＞まころんさん
落ち着きもなくボタンが動きまくるでしょ。
あちらばかりじゃなくって外向けにも記事書いてね。

Posted by しばやん at 2008年05月01日 18:20

これ面白い！ウザイと言われれば多少は。。。(￣m￣*）
私が好きなネタってバレてるわね〜♪

Posted by 茶ーリー夫人 at 2008年05月03日 15:46

＞茶っぴぃ
もちろん存じ上げております。(￣▽+￣)ﾆﾔﾘ
過去の記事に紛れる前に見てもらってﾖｶｯﾀｧ

Posted by しばやん at 2008年05月03日 19:22