--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年06月14日

リンクにカーソルをあてるとリンクが動きま?す♪

 リンクにカーソルをあてると「プニュ」って感じで動くのを見たことありませんか。実は「わぁ?♪」って驚いたことがあるyozoです。(笑)これって、さぞかし難しいカスタマイズかなぁ?って思っていましたが、CSSに一行追加するだけでした。楽勝ですよ?♪このカスタマイズは、CSSがいじれるブログならどこのブログでも可能ですよ。みなさんも、さくっとCSSをいじって「プニュ♪プニュ♪」してみませんか?ここの左サイドのリンク集をマウスのカーソルでなぞってみてください。木琴みたいに揺れてますよね♪(*ノェノ)キャーって喜ぶyozoでっす♪
このカスタマイズは、小粋空間yujiroさんの記事
リンクをマウスオン時にずらすを参考にさせていただきました。
yujiroさん、どうもありがとうございました m(_ _)m

  1. [ブログ設定]?[スキン変更]?[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」の中でクリックします。(「■ CSS編集」の中であればどこでも構いません。)
  2. [Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにa.hoverと入力して、検索してください。
    • 必ずバックアップしましょう!

     いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
  3. a.hoverの{?}に下の一行をコピペして追加しましょう。
    position:relative; top:1px; left:1px;
    a:hover
    {
    color: #8b0000;
    text-decoration: underline;
    position:relative; top:1px; left:1px;
    }
  4. 「プレビュー」で確認してから、「保存」してください。

  • yozoからのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New 携帯電話で社員を監視! | Top | 日本、豪州に破れる1-3 サッカーW杯 Old≫

トラックバックURL


コメント

yozoさん、こんにちは♪
今日は一番かな?(うれしー♪)
早速マウスを当ててみちゃいました。
すごーい☆☆☆
たのしー♪
CSSで操作するんですね?
・・・ってあまりよく分かっていない真央ですが(ヲイ;)
たった一行の付け足しでこんな面白いことになるなんて。
スキンも奥が深いなぁ。。。

コメント

yozoさん、こんばんは♪ヽ(*^^*)ノ
おお、確かに面白い動きですね。他のところでもこのような動きをするところは見たことがあったのですが、難しいのだろうなぁと思っていました。でもこんなに簡単なのですね!!また試してみようと思います。
教えていただきありがとうございました♪(*^-^)ニコ

コメント

こんばんはー。
うーんおもしろいですねぇ。。
この「プニュ♪」みたいにちょっとしたことでも
すごく凝った感じになるんですね!
そう言えば、私も学生の頃作ってたHPでは
css使って色々小細工してたのを思い出しましたょ。
背景色とか文字色とか統一させるのにも便利ですもんね♪

コメント

>真央さん、こんばんはー♪
>今日は一番かな?(うれしー♪)
いつもみなさんで盛り上げてくれて、
本当にありがとーございまっす♪m(_ _)m
>早速マウスを当ててみちゃいました。すごーい☆☆☆たのしー♪
おもしろいでしょ。まるで木琴みたいでしょ。(笑)
>たった一行の付け足しでこんな面白いことになるなんて。
そうなんですよ。コードを見て、「なぁ~るほど」って感服しましたよ。
とてもナイスなアイディアだと思いました。(o^-^o) ウフッ

コメント

>まゆびさん、こんばんはー♪
>おお、確かに面白い動きですね。
そうでしょ♪プニュ♪プニュ♪
結構遊んでしまいましたよ(笑)(* ̄∇ ̄*)エヘヘ
>難しいのだろうなぁと思っていました。
>でもこんなに簡単なのですね!!
そうなんですよ。CSSがさわれるブログなら簡単にできますよ。
すぐできますからね。気が向いたときにでもやってみてくださいね♪

コメント

>ばばるさん、こんばんはー♪
>この「プニュ♪」みたいにちょっとしたことでも
>すごく凝った感じになるんですね!
なんかすごくいい感じでしょ。全然重くなりませんからね。
今、重いのはエキブロのせいですから(苦笑)┐(´-`)┌
>そう言えば、私も学生の頃作ってたHPでは
>css使って色々小細工してたのを思い出しましたょ。
そうでしたね。HPも丁寧に更新されていたとのことでしたね。
当然、CSSはHPのメンテに欠かせませんもんね。(*'-'*)エヘヘ

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
おぉぉ・・・すごい!
それってカスタマイズで設定できるもんだったんですねっ!
φ(・ω・*)フムフムφ(。_。*)メモメモ
ウチのテンプレートは元からそういう機能(っていうのかな^^;)があったので、ほほーそういうしくみだったのかと勉強になりました!
が、実は今逆の現象でちょいとお悩み中で^^;
動かしたくないヤツまで動いてくれちゃう・・・あぁ・・かといって自分であの宇宙語と睨めっこするだけの余裕も時間もないしで放置してますがw
この記事を参考にいつか時間に余裕がある時に調べてみたいと思います(。・ω・。)ゞピッ♪

コメント

>モンビッケさん、こんばんはー♪
>それってカスタマイズで設定できるもんだったんですねっ!
そうなのですけど・・・モンビッケさんのブログのテンプレートも
「プニュ♪」ってなってたような・・・?(・_・?)
>ウチのテンプレートは元からそういう機能(っていうのかな^^;)が
>あったので、ほほーそういうしくみだったのかと勉強になりました!
あっ♪そうだったのですか。元からそういうのがついているところが
おしゃれなテンプレートなのですね♪(*^-゚)vィェィ♪
>動かしたくないヤツまで動いてくれちゃう・・・
どこのことでしょうね。動かしたくないところだけCSSの設定を変えたらいいのですけどね。お暇なときにでも聞いてくださいね。
お役に立てないかもしれませんが・・・(笑)(〃⌒ー⌒〃)ゞ エヘヘ

コメント

yozoさん、こんばんわ('◇')
最初、カーソルを置いて、「?」だったのですが、自分のブログを見て判りました。「そういうことなんだ(*'0'*)」と納得しました。
ムニュ~。いいですね。今度、やってみようかなv(≧∇≦)vニコッ☆

コメント

yozoちゃん。こんにちはー♪
ほんとだーーー。ぷにぷにって、動くーーー♪
遊んでしまった・・・。あははは♪
そっか。。。私には簡単ではないけど・・・。出来そうかも・・・。って、思ったよーー。
いろいろチャレンジしてるのスゴイなぁー。私も見習いたいよー。
うんうん。
応援??もちろんですとも♪

コメント

>ネーちゃんさん、おはよーございまっす♪
>最初、カーソルを置いて、「?」だったのですが、
>自分のブログを見て判りました。
この「プニュ♪プニュ♪」というのをどう表現していいのかわかんなくて、ちょっとわかりにくかったですよね♪
ごめんなさいね 人( ̄ω ̄;) スマヌ
>ムニュ~。いいですね。今度、やってみようかなv(≧∇≦)vニコッ☆
簡単ですからね。お暇なときにでもやってみてくださいね。(^○^)

コメント

>enuちゃん、おはよーございまっす♪
>ほんとだーーー。ぷにぷにって、動くーーー♪
>遊んでしまった・・・。あははは♪
あはは・・・おもしろいでしょ。リンクが動くのでややこしいこともないし、
間違ってどこかに飛んでしまうこともないでしょうしね。(笑)(*^-^)
>そっか。。。私には簡単ではないけど・・・。
>出来そうかも・・・。って、思ったよーー。
いえいえ♪enuちゃんが前にやったコメント欄を増やすのと
同じくらいですよ。お暇なときにでも遊んでみてね♪(*゚▽゚)ノ
>応援??もちろんですとも♪
いつも応援ありがとーございまっす m(_ _)m

コメント

はじめまして。
テンプレートの編集勉強中のPavと申します。
動くリンクの表示方法をココで見て、さっそく試してみました。
上手くいきましたよ☆
ありがとうございます。
リンク表示のカスタムとしてトラバさせていただきました。

コメント

>Pavlobaさん、こんばんはー♪いらっしゃいませー♪
>動くリンクの表示方法をココで見て、さっそく試してみました。
>上手くいきましたよ☆ありがとうございます。
うまくいきましたか♪
オメデトーゴザイマス♪(*⌒ー⌒)o∠★:゚*PAN! (大げさ・・・笑)
簡単でしたでしょ?
>リンク表示のカスタムとしてトラバさせていただきました
トラバをいただいた上に、ご丁寧にコメントまで下さって
ありがとーございまっす♪
また、お暇なときにでも遊びにきてやってくださいませ m(_ _)m

コメント

yozoさん、うさもちゃん、おはようございます♪
「プニュ」(表現がイイですね♪)、うんうんよそで見かけるねぇ・・・なんて思っていたら、うちのブログの現テンプレは、デフォで「プニュ」でしたー(笑)
気づいていませんでしたよ、アハハ(^-^;)
自分とこのCSSを見てみたところ、yozoさんのおっしゃる通り、position:relativeの記述がちゃんとありました。
そっか、これが「プニュ」の素だったのですねー。勉強になるわ★

コメント

>mioさん、おはよーございまっす♪
>「プニュ」(表現がイイですね♪)、うんうんよそで見かけるねぇ・・・
>なんて思っていたら、うちのブログの現テンプレは、
>デフォで「プニュ」でしたー(笑)
あらら・・・気付いていませんでしたか♪(笑)
yozoはあっちこっちでこの「プニュ」リンクを見つけては、遊んでいましたよ。もちろん、mioさんのところでも、遊ばせていただきました(笑)
>そっか、これが「プニュ」の素だったのですねー。勉強になるわ★
「プニュ」の素っていいですね。なんか不思議の種みたいで。(笑)
それにしても、この1行(って本当は3行ですけど)を追加するだけで、
あんなにユーモラスな動きを見せてくれるのですから、このアイデアは
素晴らしい!って思いますよ。d(⌒ー⌒) スゴイッ!!

コメント

こんばんわ!
いろいろ参考にさせて頂き、自分のブログにも愛着を感じはじめております♪
ドキドキ、ワクワク、このなんともいえない面白さはなんなんでしょうか~?
またいろいろ教えてくださいませ。

コメント

>morizo_kiccoroさん、おはよーございまっす♪
いらっしゃいませー♪
>このなんともいえない面白さはなんなんでしょうか~?
ブログって不思議なもので、ちょっといじるだけで、ガラッと変わりますよね。この手軽さがいいのかも。自分の言うことを聞いてくれたときのうれしさでしょうか。楽しいですよね。(゚ー゚)(。_。)(゚-゚)(。_。)ウンウン
>またいろいろ教えてくださいませ。
「プニュ」リンクできていましたね。・:*:・゚'(b^ー゚) オメデトーゴザイマッス
お役に立ててよかったですよ♪いつでもお暇なときにいらっしゃってくださいね。今後ともよろしくお願いしまーす m(_ _)m

コメント

こちらにも 「プニュ」の感想♪
とっても簡単に出来ちゃって驚き!
まだイマひとつCSSゆうもんが理解できていないのですが・・・HTMLならどうにか編集できるんだけどなあぁぁ~~
また勉強しにきま~す

コメント

>komineさん、こんばんはー♪
>こちらにも 「プニュ」の感想♪とっても簡単に出来ちゃって驚き!
一行いれるだけで、全部のリンクが「プニュ」って動きますからね。
ナイスアイデアですよね。(^-^*)(・・*)(^-^*)(・・*)ウンウン
>また勉強しにきま~す
ここの記事で勉強してくださるなんて、身の引き締まる思いです。
yozoもさらに役立つ記事をUPできるようにしたいと思ってます。
追伸:
関連記事にまで、二度手間コメントさせて済みませんでした。
ご協力心より感謝します。 m(_ _)m

コメント

こんばんヮ~♪
何だかTBが旨く受け入れ出来ないらしく、
ご迷惑をおかけして申し訳ありませんm(_ _"m)
長く続くようであればプロバイダに問い合わせいたしますので・・・…(T0T)ゞスミマセン

事後報告になりますが、ぷにょぷにょリンクを記事にいたしまして
うさもちゃんの記事とご本家のコチラの記事をご紹介させていただきましたので
ご報告に伺いました~♪
宜しくお願いいたしまっすm(_ _"m)

コメント

>ウッキさん、こんばんはー♪

>事後報告になりますが、ぷにょぷにょリンクを記事にいたしまして、うさもちゃんの記事と
>ご本家のコチラの記事をご紹介させていただきましたのでご報告に伺いました~♪
それは♪それは♪ご丁寧にありがとーございまっす♪ m(_ _)m
yozoとうさもの紹介までしてくださって、本当にうれしいです。
これからも参考になれるようにがんばりまっすv(*'-^*)bぶいっ♪

>何だかTBが旨く受け入れ出来ないらしく、
>ご迷惑をおかけして申し訳ありませんm(_ _"m)
また、飛んでいませんでしたか?FC2の履歴では送信済みになっているのですが・・・
ラブログではじかれているようですね。設定に間違いがないのでしたら、FC2ブログからのトラバがはじかれるのかもしれませんね。サポートに質問されてもいいかもしれませんね。ぶろっぐぴんぴんでは「通知できません」というメッセが表示されます。もちろん今は外してますが、言及リンクを設定してもだめでした。yozoとしては現在のところどうしようもありませんので、もしウッキさんのほうで設定等変更されましたらいつでもご連絡ください。m(_ _)m

コメント

yozoさん( ^-^)ノ(* ^-^)ノおはょございまっす♪
早速のTB再送信ありがとうございましたm(_ _"m)
こちらへのお返しを見落としておりました・・・重ね重ねm(_ _"m)スミマセン

この度は事後報告だったとはいえ、理由の一つとして思い浮かばず、何度も対応していただいて申し訳なく思います(T-T)

不具合など事前に分かるようであれば、お知らせしていく体制を取っていこうとと考えています・・・これからも宜しくお願いいたしますm(_ _"m)ペコーッ

コメント

ウッキさん、おはよーございまっす♪ トラバありがとーございまっす♪ m(_ _)m
 ラブログの規制でFC2からのトラバがはじかれていたのですね。スパム対策でしょうから、やむを得ませんが、お知らせなしはちょっと・・・ですね。お互い時間ロスをしましたが、やむを得ませんでしたね。本日無事相互トラバできましたのでOKとしましょうか♪(*^-^)
 ご連絡くださりありがとーございまっす♪m(_ _)m

コメント

yozoさん( ^-^)ノ(* ^-^)ノこんにちわぁ♪

クリーンフローラのカスタマイズ一段落しました~
真っ先にプニョプニョを使わせていただいたんです~m(_ _"m)
σ (´ー`)本当にインプットしている知識が無い為・・・
yozoさんの記事はいつもとても助かります♪ありがとうございましたm(_ _"m)
カモミール☆さんには次回、文字の回りこみをマスターしていただきます♪
お花のアレンジ紹介が多いサイト様なので・・・
不具合はやはり回避していただきたい(*´・ェ・)(*´-ェ-)ハイ

まずはご報告まで。*:.。.:*・人´∀`)☆ありがとぉございましたぁ☆゚。.:・*

コメント

>ウッキさん、こんばんはー♪

>クリーンフローラのカスタマイズ一段落しました~
>真っ先にプニョプニョを使わせていただいたんです~m(_ _"m)
ご苦労さまでした。カモミール☆さんもがんばったのですね♪
プニュプニュリンクできていましたね。お役に立ててうれしいですよ。
オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!

>カモミール☆さんには次回、文字の回りこみをマスターしていただきます♪
一歩一歩確実にってことですね。習うより慣れろですからね。のんびり楽しみながらカスタマイズすればいいのではと思いますよ。(^○^)

>まずはご報告まで。*:.。.:*・人´∀`)☆ありがとぉございましたぁ☆゚。.:・*
ご丁寧にありがとーございまっす♪いつでも覗いてくださいね♪v(*'-^*)bぶいっ♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。