2006年06月14日
リンクにカーソルをあてるとリンクが動きま〜す♪
リンクにカーソルをあてると「プニュ」って感じで動くのを見たことありませんか。実は「わぁ〜♪」って驚いたことがあるyozoです。（笑）これって、さぞかし難しいカスタマイズかなぁ〜って思っていましたが、CSSに一行追加するだけでした。楽勝ですよ〜♪このカスタマイズは、CSSがいじれるブログならどこのブログでも可能ですよ。みなさんも、さくっとCSSをいじって「プニュ♪プニュ♪」してみませんか？ここの左サイドのリンク集をマウスのカーソルでなぞってみてください。木琴みたいに揺れてますよね♪(*ﾉｪﾉ)ｷｬｰって喜ぶyozoでっす♪
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
- [ブログ設定]−[スキン変更]−[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」の中でクリックします。（「■ CSS編集」の中であればどこでも構いません。）
- [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにa.hoverと入力して、検索してください。
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪ - a.hoverの{〜}に下の一行をコピペして追加しましょう。
position:relative; top:1px; left:1px;a:hover
{
color: #8ｂ0000;
text-decoration: underline;
position:relative; top:1px; left:1px;
} - 「プレビュー」で確認してから、「保存」してください。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New 携帯電話で社員を監視！ | Top | 日本、豪州に破れる1-3 サッカーW杯 Old≫
トラックバックURL
トラックバック
≫ リンク表示のカスタム from 果報は寝て待て(-_☆)
ツリー表示はなんだか一旦終了。今度はリンク表示のカスタムをしてみました。カーソル合わせるとテキストが動くってアレです。今度は『yozoの気が向いたと記』の『リンクにカーソルをあてるとリンクが動きま〜す♪』を参考にさせていただきました。テンプレートのカスタムと� [Read More]
トラックバック
≫ ぷにょぷにょリンク from さるのこしかけ
これも設置して少し経ちますが･･･ リンクにカーソルをあてると"ぷにょぷにょ"動きますヽ(*´▽｀)ﾉ ))) 以前から |･ω･｀)ｺｯｼｮﾘ…愛いなぁと思っておりまして彷徨った結果･･･ ｙｏｚｏさんのＢｌｏｇＰｅｔうさもちゃんが書くブログ･うさもの気が [Read More]
トラックバック
≫ 小粋空間様のテンプレートに変更 from うさもの気が向いたと記
2006/08/02のここの記事BlogPet俳句を求めて三千里〜マルコyozo＆うさみちゃん編〜＠後姿ラブリー同盟で、画像は見えるのですが、回りこんでいる文字が表示されたりされなかったり、というエラーが発生しました。(ちなみにyozoの環境はWinXP Pro+IE6.0です) Seesaaブログの [Read More]
コメント
今日は一番かな？（うれしー♪）
早速マウスを当ててみちゃいました。
すごーい☆☆☆
たのしー♪
CSSで操作するんですね？
･･･ってあまりよく分かっていない真央ですが（ヲイ；）
たった一行の付け足しでこんな面白いことになるなんて。
スキンも奥が深いなぁ。。。
Posted by 真央 at 2006.06.14 18:08 | edit
コメント
おお、確かに面白い動きですね。他のところでもこのような動きをするところは見たことがあったのですが、難しいのだろうなぁと思っていました。でもこんなに簡単なのですね!!また試してみようと思います。
教えていただきありがとうございました♪(*^-^)ﾆｺ
Posted by まゆび at 2006.06.14 18:39 | edit
コメント
うーんおもしろいですねぇ。。
この「プニュ♪」みたいにちょっとしたことでも
すごく凝った感じになるんですね！
そう言えば、私も学生の頃作ってたＨＰでは
ｃｓｓ使って色々小細工してたのを思い出しましたょ。
背景色とか文字色とか統一させるのにも便利ですもんね♪
Posted by mixbabar at 2006.06.14 19:57 | edit
コメント
＞今日は一番かな？（うれしー♪）
いつもみなさんで盛り上げてくれて、
本当にありがとーございまっす♪m(_ _)m
＞早速マウスを当ててみちゃいました。すごーい☆☆☆たのしー♪
おもしろいでしょ。まるで木琴みたいでしょ。（笑）
＞たった一行の付け足しでこんな面白いことになるなんて。
そうなんですよ。コードを見て、「なぁ〜るほど」って感服しましたよ。
とてもナイスなアイディアだと思いました。(o^-^o) ｳﾌｯ
Posted by yoblog at 2006.06.14 21:43 | edit
コメント
＞おお、確かに面白い動きですね。
そうでしょ♪プニュ♪プニュ♪
結構遊んでしまいましたよ（笑）(*￣∇￣*)ｴﾍﾍ
＞難しいのだろうなぁと思っていました。
＞でもこんなに簡単なのですね!!
そうなんですよ。CSSがさわれるブログなら簡単にできますよ。
すぐできますからね。気が向いたときにでもやってみてくださいね♪
Posted by yoblog at 2006.06.14 22:04 | edit
コメント
＞この「プニュ♪」みたいにちょっとしたことでも
＞すごく凝った感じになるんですね！
なんかすごくいい感じでしょ。全然重くなりませんからね。
今、重いのはエキブロのせいですから（苦笑）┐(´-｀)┌
＞そう言えば、私も学生の頃作ってたＨＰでは
＞ｃｓｓ使って色々小細工してたのを思い出しましたょ。
そうでしたね。HPも丁寧に更新されていたとのことでしたね。
当然、CSSはHPのメンテに欠かせませんもんね。(*'-'*)ｴﾍﾍ
Posted by yoblog at 2006.06.14 22:09 | edit
コメント
おぉぉ・・・すごい！
それってカスタマイズで設定できるもんだったんですねっ！
φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
ウチのテンプレートは元からそういう機能（っていうのかな＾＾；）があったので、ほほーそういうしくみだったのかと勉強になりました！
が、実は今逆の現象でちょいとお悩み中で＾＾；
動かしたくないヤツまで動いてくれちゃう・・・あぁ・・かといって自分であの宇宙語と睨めっこするだけの余裕も時間もないしで放置してますがw
この記事を参考にいつか時間に余裕がある時に調べてみたいと思います(｡･ω･｡)ゞピッ♪
Posted by モンビッケ at 2006.06.14 22:33 | edit
コメント
＞それってカスタマイズで設定できるもんだったんですねっ！
そうなのですけど・・・モンビッケさんのブログのテンプレートも
「プニュ♪」ってなってたような・・・？(･_･?)
＞ウチのテンプレートは元からそういう機能（っていうのかな＾＾；）が
＞あったので、ほほーそういうしくみだったのかと勉強になりました！
あっ♪そうだったのですか。元からそういうのがついているところが
おしゃれなテンプレートなのですね♪(*^-ﾟ)vｨｪｨ♪
＞動かしたくないヤツまで動いてくれちゃう・・・
どこのことでしょうね。動かしたくないところだけCSSの設定を変えたらいいのですけどね。お暇なときにでも聞いてくださいね。
お役に立てないかもしれませんが・・・（笑）(〃⌒ー⌒〃)ゞ ｴﾍﾍ
Posted by yoblog at 2006.06.14 23:36 | edit
コメント
最初、カーソルを置いて、「？」だったのですが、自分のブログを見て判りました。「そういうことなんだ(*'0'*)」と納得しました。
ムニュ〜。いいですね。今度、やってみようかなv(≧∇≦)vﾆｺｯ☆
Posted by ネーちゃん at 2006.06.15 00:24 | edit
コメント
ほんとだーーー。ぷにぷにって、動くーーー♪
遊んでしまった・・・。あははは♪
そっか。。。私には簡単ではないけど・・・。出来そうかも・・・。って、思ったよーー。
いろいろチャレンジしてるのスゴイなぁー。私も見習いたいよー。
うんうん。
応援？？もちろんですとも♪
Posted by enu50430 at 2006.06.15 09:44 | edit
コメント
＞最初、カーソルを置いて、「？」だったのですが、
＞自分のブログを見て判りました。
この「プニュ♪プニュ♪」というのをどう表現していいのかわかんなくて、ちょっとわかりにくかったですよね♪
ごめんなさいね 人(￣ω￣;) ｽﾏﾇ
＞ムニュ〜。いいですね。今度、やってみようかなv(≧∇≦)vﾆｺｯ☆
簡単ですからね。お暇なときにでもやってみてくださいね。(^○^)
Posted by yoblog at 2006.06.15 11:22 | edit
コメント
＞ほんとだーーー。ぷにぷにって、動くーーー♪
＞遊んでしまった・・・。あははは♪
あはは・・・おもしろいでしょ。リンクが動くのでややこしいこともないし、
間違ってどこかに飛んでしまうこともないでしょうしね。（笑）(*^-^)
＞そっか。。。私には簡単ではないけど・・・。
＞出来そうかも・・・。って、思ったよーー。
いえいえ♪enuちゃんが前にやったコメント欄を増やすのと
同じくらいですよ。お暇なときにでも遊んでみてね♪(*ﾟ▽ﾟ)ﾉ
＞応援？？もちろんですとも♪
いつも応援ありがとーございまっす m(_ _)m
Posted by yoblog at 2006.06.15 11:25 | edit
コメント
テンプレートの編集勉強中のＰａｖと申します。
動くリンクの表示方法をココで見て、さっそく試してみました。
上手くいきましたよ☆
ありがとうございます。
リンク表示のカスタムとしてトラバさせていただきました。
Posted by Pavloba at 2006.06.16 21:25 | edit
コメント
＞動くリンクの表示方法をココで見て、さっそく試してみました。
＞上手くいきましたよ☆ありがとうございます。
うまくいきましたか♪
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN! （大げさ・・・笑）
簡単でしたでしょ？
＞リンク表示のカスタムとしてトラバさせていただきました
トラバをいただいた上に、ご丁寧にコメントまで下さって
ありがとーございまっす♪
また、お暇なときにでも遊びにきてやってくださいませ m(_ _)m
Posted by yoblog at 2006.06.16 23:03 | edit
コメント
「プニュ」(表現がイイですね♪)、うんうんよそで見かけるねぇ･･･なんて思っていたら、うちのブログの現テンプレは、デフォで「プニュ」でしたー(笑)
気づいていませんでしたよ、アハハ（＾−＾；）
自分とこのCSSを見てみたところ、yozoさんのおっしゃる通り、position:relativeの記述がちゃんとありました。
そっか、これが「プニュ」の素だったのですねー。勉強になるわ★
Posted by mio at 2006.06.17 09:45 | edit
コメント
＞「プニュ」(表現がイイですね♪)、うんうんよそで見かけるねぇ･･･
＞なんて思っていたら、うちのブログの現テンプレは、
＞デフォで「プニュ」でしたー(笑)
あらら・・・気付いていませんでしたか♪（笑）
yozoはあっちこっちでこの「プニュ」リンクを見つけては、遊んでいましたよ。もちろん、mioさんのところでも、遊ばせていただきました（笑）
＞そっか、これが「プニュ」の素だったのですねー。勉強になるわ★
「プニュ」の素っていいですね。なんか不思議の種みたいで。（笑）
それにしても、この１行(って本当は３行ですけど)を追加するだけで、
あんなにユーモラスな動きを見せてくれるのですから、このアイデアは
素晴らしい！って思いますよ。d(⌒ー⌒) ｽｺﾞｲｯ!!
Posted by yoblog at 2006.06.17 11:15 | edit
コメント
いろいろ参考にさせて頂き、自分のブログにも愛着を感じはじめております♪
ドキドキ、ワクワク、このなんともいえない面白さはなんなんでしょうか〜？
またいろいろ教えてくださいませ。
Posted by morizo_kiccoro at 2006.07.07 00:02 | edit
コメント
いらっしゃいませー♪
＞このなんともいえない面白さはなんなんでしょうか〜？
ブログって不思議なもので、ちょっといじるだけで、ガラッと変わりますよね。この手軽さがいいのかも。自分の言うことを聞いてくれたときのうれしさでしょうか。楽しいですよね。(ﾟｰﾟ)(｡_｡)(ﾟ-ﾟ)(｡_｡)ｳﾝｳﾝ
＞またいろいろ教えてくださいませ。
「プニュ」リンクできていましたね。･:*:･ﾟ'(b^ｰﾟ) ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ
お役に立ててよかったですよ♪いつでもお暇なときにいらっしゃってくださいね。今後ともよろしくお願いしまーす m(_ _)m
Posted by yoblog at 2006.07.07 08:28 | edit
コメント
とっても簡単に出来ちゃって驚き！
まだイマひとつＣＳＳゆうもんが理解できていないのですが・・・ＨＴＭＬならどうにか編集できるんだけどなあぁぁ〜〜
また勉強しにきま〜す
Posted by Studio-Fam at 2006.07.17 22:40 | edit
コメント
＞こちらにも 「プニュ」の感想♪とっても簡単に出来ちゃって驚き！
一行いれるだけで、全部のリンクが「プニュ」って動きますからね。
ナイスアイデアですよね。(^-^*)(･･*)(^-^*)(･･*)ｳﾝｳﾝ
＞また勉強しにきま〜す
ここの記事で勉強してくださるなんて、身の引き締まる思いです。
yozoもさらに役立つ記事をUPできるようにしたいと思ってます。
追伸：
関連記事にまで、二度手間コメントさせて済みませんでした。
ご協力心より感謝します。 m(_ _)m
Posted by yoblog at 2006.07.17 23:28 | edit
コメント
何だかＴＢが旨く受け入れ出来ないらしく、
ご迷惑をおかけして申し訳ありませんm(_ _"m)
長く続くようであればプロバイダに問い合わせいたしますので･･･…(T０T)ゞｽﾐﾏｾﾝ
事後報告になりますが、ぷにょぷにょリンクを記事にいたしまして
うさもちゃんの記事とご本家のコチラの記事をご紹介させていただきましたので
ご報告に伺いました〜♪
宜しくお願いいたしまっすm(_ _"m)
Posted by ウッキ at 2006.11.08 23:54 | edit
コメント
＞事後報告になりますが、ぷにょぷにょリンクを記事にいたしまして、うさもちゃんの記事と
＞ご本家のコチラの記事をご紹介させていただきましたのでご報告に伺いました〜♪
それは♪それは♪ご丁寧にありがとーございまっす♪ m(_ _)m
yozoとうさもの紹介までしてくださって、本当にうれしいです。
これからも参考になれるようにがんばりまっすv(*'-^*)ｂぶいっ♪
＞何だかＴＢが旨く受け入れ出来ないらしく、
＞ご迷惑をおかけして申し訳ありませんm(_ _"m)
また、飛んでいませんでしたか？FC2の履歴では送信済みになっているのですが・・・
ラブログではじかれているようですね。設定に間違いがないのでしたら、FC2ブログからのトラバがはじかれるのかもしれませんね。サポートに質問されてもいいかもしれませんね。ぶろっぐぴんぴんでは「通知できません」というメッセが表示されます。もちろん今は外してますが、言及リンクを設定してもだめでした。yozoとしては現在のところどうしようもありませんので、もしウッキさんのほうで設定等変更されましたらいつでもご連絡ください。m(_ _)m
Posted by ウッキさんへ at 2006.11.09 18:32 | edit
コメント
早速のＴＢ再送信ありがとうございましたm(_ _"m)
こちらへのお返しを見落としておりました･･･重ね重ねm(_ _"m)ｽﾐﾏｾﾝ
この度は事後報告だったとはいえ、理由の一つとして思い浮かばず、何度も対応していただいて申し訳なく思います(T-T)
不具合など事前に分かるようであれば、お知らせしていく体制を取っていこうとと考えています･･･これからも宜しくお願いいたしますm(_ _"m)ﾍﾟｺｰｯ
Posted by ウッキ at 2006.11.13 11:06 | edit
コメント
ラブログの規制でFC2からのトラバがはじかれていたのですね。スパム対策でしょうから、やむを得ませんが、お知らせなしはちょっと・・・ですね。お互い時間ロスをしましたが、やむを得ませんでしたね。本日無事相互トラバできましたのでＯＫとしましょうか♪(*^-^)
ご連絡くださりありがとーございまっす♪m(_ _)m
Posted by ウッキさんへ at 2006.11.13 11:16 | edit
コメント
クリーンフローラのカスタマイズ一段落しました〜
真っ先にプニョプニョを使わせていただいたんです〜m(_ _"m)
σ (´ー`)本当にインプットしている知識が無い為･･･
ｙｏｚｏさんの記事はいつもとても助かります♪ありがとうございましたm(_ _"m)
カモミール☆さんには次回、文字の回りこみをマスターしていただきます♪
お花のアレンジ紹介が多いサイト様なので･･･
不具合はやはり回避していただきたい(*´･ｪ･)(*´-ｪ-)ﾊｲ
まずはご報告まで。*:.｡.:*・人´∀｀)☆ありがとぉございましたぁ☆ﾟ｡.:・*
Posted by ウッキ at 2006.12.22 16:18 | edit
コメント
＞クリーンフローラのカスタマイズ一段落しました〜
＞真っ先にプニョプニョを使わせていただいたんです〜m(_ _"m)
ご苦労さまでした。カモミール☆さんもがんばったのですね♪
プニュプニュリンクできていましたね。お役に立ててうれしいですよ。
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
＞カモミール☆さんには次回、文字の回りこみをマスターしていただきます♪
一歩一歩確実にってことですね。習うより慣れろですからね。のんびり楽しみながらカスタマイズすればいいのではと思いますよ。(^○^)
＞まずはご報告まで。*:.｡.:*・人´∀｀)☆ありがとぉございましたぁ☆ﾟ｡.:・*
ご丁寧にありがとーございまっす♪いつでも覗いてくださいね♪v(*'-^*)ｂぶいっ♪
Posted by ウッキさんへ at 2006.12.22 18:39 | edit