Top Blog parts , customize ;>マウスオン時にリンクをさらにアピール!

2008年04月30日

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

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

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


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

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

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

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



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


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



このブログのリンクマウスオン部分のCSS
/* リンク(マウスポインタを乗せた状態) */
A:hover {
color: #0000FF;
background-color: #ccffff;
position:relative; bottom:2px; left:2px;
font-weight: bold;
}


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





posted by しばやん at 09:00 | Comment(14) | TrackBack(0) | Blog parts , customize このエントリーを含むはてなブックマーク
この記事へのコメント
ん?

わからん。
わかろうとしていない、ボクちゃんです。
Posted by うんとみ♪ at 2008年04月30日 13:24
>うんとみさん
はい・・・いつも訪問してくれる方は???な人が多いかと。( ̄▽ ̄;)
スルーでいいですよ。(ノ▽ ̄〃)ヘヘヘ
検索エンジンとかで飛んで来た人には喜ばれるかもしれないけどね。
Posted by しばやん at 2008年04月30日 16:49
あ!。ほんとだ!。すご〜い!。

でも、CSS乗せてもらっても、使い方の分からない私です・・・。ヽ(=◇=;)
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
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/95164548
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。