« わんこが大変です。 | メイン | ブログを書いててしっくりしない？ »
リンクがペコッとする カスタマイズ
本日は、めずらしく1日で２つ目の記事更新。わぉ！
なんて、モタモタしてるうちに日付は変わってます^^；
朝、自治会の掃除で、４０分ほど外にいたのですが、あまりの寒さに指先がしびれておりました。megです。
たまには主婦らしい仕事もしております。
お気づきの方、いらっしゃるでしょうか？
このブログのリンクにすこぉし変化があることに。
今日は、お金の泉 人生勝組の法則の大吉さんのところで仕入れてきました、地味にクリック促進しちゃう様にカスタマイズしちゃおう♪ という記事のリンクのカスタマイズのご紹介です。
このネタの大元の仕入先は、ブログアフィリエイトで副業からドーン！のひでまろさんのところのリンクをマウスでポイントすると動くカスタマイズです。
そして、そのさらに元になるのはAllAboutでした^^
ひでまろさんのブログ、最近テンプレートが変わってすごく春らしくてステキなブログになてましたよ^^
私は、背景色は白が好きなので、とっても気に入りました^^
地味ですが、”これはリンクですよ～”とアピールしてくれることでしょう^^
答えはタイトルの通り。
マウスがリンクの上にのると、リンクがペコっとしませんか？
下記のリンクの上にマウスを移動してみてください。
主婦がアフィリエイトで月収６０万円の印税的収入を狙うブログ
ペコっとしました？
このリンクのとび先（別窓で開きます）は・・・
ふふふ^^
このブログです^^；
実は、タイトルの変更を考えているところなのです。
このタイトル、今のところ第一候補です。どうでしょう？
おととと。話がそれてしまいましたが、やり方は、超が付くほどカンタンです。
ＣＳＳ（スタイルシート）の記述の中に、
a:hover{position: relative; top: 1px; left: 1px; }
というのを加えるだけでＯ．Ｋ．！
あなたの使っているブログのテンプレートのＣＳＳの記述の中の、a:hover{ } という部分を探してみてください。
その部分に、position: relative; top: 1px; left: 1px;というのを付け加えればリンクはペコっとしてくれます。
これだけで、”私はリンクですよ～”って、自らアピールしてくれますよ^^
ちなみに 1px の数字を大きくすると、リンクの凹みも、さらに大きくなります。
ブログって、ほんとに色んな情報が、無料で沢山流されてますね～。
最近つくづく感じます。
知識をためるのはすごく大事だけど、それを実行しないでとっておいても、わすれちゃうだけですね。
知識の収集は、自分が実行出来る範囲でしていかないと、パニックに陥ります。私のように（笑）
追記
説明不足で、ご質問をいただいたので、補足しますね。
私のCSSは、こうなってます。
もともとのCSSは
a:hover{color:#FF6666;text-decoration:none;}
上記のように、a:hover（リンクにカーソルがのったときの指示）{color:#FF6666;（色はピンクに）text-decoration:none;（テキストの下線・上線・打ち消し線・点滅はなし）}
という設定になっています。
今回のカスタマイズでは、リンクをペコっとさせたいので、
a:hover{color:#FF6666;text-decoration:none;position: relative; top: 1px; left: 1px; }
というように、最後にposition: relative; top: 1px; left: 1px;を付け加えます。
構う部分は、CSSのbodyから始まる
body< この中にある a:hover{の記述の部分です。 >
簡単に補足しましたが、ご理解いただけましたでしょうか？
これを教訓に、もっと分かりやすい文章の書き方を心がけたいと思いました。
ご質問くださった方。本当にありがとうございましたm(_ _)m
投稿者 アフィリエイト主婦 : 2006年03月06日 00:46
トラックバック
このエントリーのトラックバックURL:
http://www.khow.net/cgi/mt/mt-tb.cgi/70
このリストは、次のエントリーを参照しています: リンクがペコッとする カスタマイズ:
» アフィリエイト、ちょっと視点を変えてみれば・・・！！ from 女性起業家支援ブログ◆ネットで稼ぐ方法を人妻けこぴが徹底究明！
リンクをペコっとする手法、編集後記で紹介させていただきました～。megさんありがとう♪
喜んでもらえてすごくうれしいです！(^o^)/
私ももっと分かりやすい記事を書かないといけないって、勉強させてもらえて感謝してます^^
こちらこそ、ありがとうございましたm(_ _)m
出来の悪い生徒だなんて、ぜんぜんそんなことないですよ～^^
10回分の応援受け取りました^^
meg [続きを読む]
トラックバック時刻: 2006年03月07日 14:36
コメント
ｍｅｇさん どうもです～
ご紹介ありがとうございます。m(__)m
これ，なんかいいですよね。＾＾
ところで色々とカスタマイズしてますね。
このフッターもいい感じ。
僕は今からトップを作り直します。
ちょっと時間が掛かりそうですけど。ヾ ^_^
投稿者 ひでまろ : 2006年03月06日 09:52
こんばんわ、健康マニア 健です。
早速ためしてみました～！
・・・でもできなかったです～（汗）
a:hover{ }ってたくさん４、５個ありますけれど全部に
position: relative; top: 1px; left: 1px;
を入れればよいのですか？
{ }の中にもともと文字が入ってるんですけれどその後に入れればよいのかな？
出来れば教えていただきたいです。
ブログで迷惑ならこちらにメールお願いします。
volta504@brown.livedoor.com
こちらからお願いしているのでお暇な時で構わないです。
応援ぽちぽち～
投稿者 健康マニア 健 : 2006年03月06日 20:30
こんばんは。
私もこのカスタマイズ早速しました。
小さなカスタマイズも楽しいですよね。
投稿者 danna : 2006年03月06日 23:52
こんばんは、トーネです。
ＨＴＭＬチェックツール、ありがとうございました。
さっそくやってみたら・・・・、１０００個以上も
チェックにひっかかりました・・・。
ブログのＨＴＭＬって文法めちゃくちゃなのかな？
あまりにもエラーが多すぎて、見つけられませんでした。だって、エラーが１０００以上だけど、
ＨＴＭＬは１０００行もないんだから・・・。
でも、お心遣い、感謝です！！ありがとう！
投稿者 アフィリエイトでタバコ代プラス : 2006年03月06日 23:57
うわ～い♪
早速お持ち帰りしてやってみま～す♪
ありがと～(^^)/
投稿者 女性起業家応援します！ネットで稼ぐ怪しい人妻♪けこぴよん : 2006年03月07日 00:00
できました～♪ピョコピョコしてます♪
かわいい＾＾
投稿者 女性起業家応援します！ネットで稼ぐ怪しい人妻♪けこぴよん : 2006年03月07日 00:11
こちらこそ、ありがとうございます^^
リンクのカスタマイズのついでに、またいろいろとかまっていたら、あっという間に時間がすぎちゃいました^^；
フッター 褒めて頂けて、うさぎのようになっております(＞＜)
投稿者 ＞ひでまろさんへ : 2006年03月07日 00:50
説明が不十分ですね^^；すみませんm(_ _)m
a.????:hover{
となっているところは構わずに、
a:hover{
というところだけに書き加えます^^
場所は、bodyの中にある部分です。
ちなみに私のCSSは、こうなってます。
a:hover{color:#FF6666;text-decoration:none;position: relative; top: 1px; left: 1px; }
すでに書き込まれているもののうしろにくっつけてあります。
これで出来るはずだと思うのですが、もし、これでもダメだったらまた仰ってくださいね^^
投稿者 ＞健さんへ : 2006年03月07日 00:57
カスタマイズは楽しくて、やりだすときりがないですね(＞＜)
これはこれで困ったものです^^；
投稿者 ＞dannnaさんへ : 2006年03月07日 00:58
１０００個ですか？！
ブログはそうでしたね。HPとは違って、運営元ごとに、そこでしか通用しないタグとか入ってますもんね。
余計なおせっかいになってしまいました^^；
何にも出来ないので、とりあえず祈っておきますm(_ _)m
投稿者 ＞トーネさんへ : 2006年03月07日 01:01
喜んでいただけて、とってもうれしいです(*^o^*)
私は、ついついいろいろやりたくなってしまって、思わぬ時間を費やしてしまいました^^；
投稿者 ＞けこぴさんへ : 2006年03月07日 01:03
実は密かに、やってる私（笑）
いつか公開しようと思ってたのにな。
先こされました（汗）
投稿者 あさひ : 2006年03月07日 03:44
コメント＆ご紹介ありがとうございます！
色々な他のブログからのコピペしまくりのブログ・・・
信じられないですね・・・
あっ！話は変わるのですが当方ブログランキングに参加してます・・・
先日はパソコンからの投稿する時間が無くて携帯電話から投稿したのでブログランキングへのリンクを貼り付け出来ませんでした・・・
また、遊びに来られましたら応援をよろしくお願い致しますっ！
投稿者 【お金の泉 人生勝ち組の法則】 大吉 : 2006年03月07日 09:38
メグさん、おはようございます。
いつもコメントほんとうにあり
がとうございます。
ほんとうにいろんな役に立つ情報が
たくさんあって毎日がお勉強ですね？
早速カスタマイズに挑戦しようと
テンプレートを開いたのですが
a:hover { text-decoration:underline; color:#6699cc; }
となっていてどこに入れればいいのか
わかりませんでした。(^。^;;
変にいじると恐ろしいのでちょっと
見合わせます。
やり方がわかったらまたやってみますね。
では、応援して帰ります。
ポッチン！！
投稿者 himeko : 2006年03月07日 11:31
メグさん、何度もすみません。
今、メグさんのソースを見させて
もらってマネッコしたらペコっと
できました。
どうもありがとうございました。
投稿者 himeko : 2006年03月07日 11:43
私もあさひさんのブログにいって、そう思うことがよくあります^^；
ひでまろさんや、大吉さん、私のブログに来てない人もたくさんいると思うので、ぜひ記事にしてください^^楽しみにしてます^^
meg
投稿者 ＞あさひさんへ : 2006年03月07日 13:53
そうですよね^^；
この間お邪魔したときはポチっとした気がしてたのに、みつからなかったので、あれ？私の思い違いだったかな？と思っていたのです^^；
応援に伺いますね～^^
meg
投稿者 ＞大吉さんへ : 2006年03月07日 13:55
説明不足でしたね^^；
すみませんm(_ _)m
今日、追記を入れておきます^^；
でも、出来てよかったです(^o^)
meg
投稿者 ＞himekoさんへ : 2006年03月07日 13:56
こんにちは！！渡辺です。
記事の答えは簡単に書きます。
『相手が納得してしまう』
これです。ここまでコピペです。(笑)
タイトル変わったら教えてくださいね♪
投稿者 パンダ渡辺 : 2006年03月07日 14:37
こんばんわ、健康マニア 健です！
やりましたよ！できましたよ！
ありがとうございます～～～～（＞＜）
すっごく嬉しいです！
いろいろとご迷惑をおかけしましたができましたよ！
ほんとにすっご～～～く嬉しいです！！！
出来の悪い生徒でしたがどうもありがとうございました♪
応援１０回くらいぽちっとしたいですけれどしても意味はないので１回で勘弁してください。
投稿者 健康マニア 健 : 2006年03月07日 22:24
megさん こんばんは＾＾
るる風邪ひいてて やっとよくなりました♪
おこさんどうですか？？
リンク ぴこっとかわいいね＾＾ るるもやってみよ～
またきま～す☆
投稿者 るる : 2006年03月07日 22:33
お越しくださってありがとうございます^^
なるほど～。
勉強になりました^^
またお邪魔しますね^^
meg
投稿者 ＞渡辺さんへ : 2006年03月07日 22:42
ムスコさんのカゼ、もらっちゃいましたか？
私、子育て３年以上してて、子供に病気をもらったことがありません^^；
これって＊＊ってこと？（笑
もう体はつらくないでしょうか？
ムリすると長引くので、大事にしてくださいね^^
ムスメはよくなりましたよ～^^
やっと予防接種も受けれました(^o^)
meg
投稿者 ＞るるさんへ : 2006年03月07日 22:45
喜んでもらえてすごくうれしいです！(^o^)/
私ももっと分かりやすい記事を書かないといけないって、勉強させてもらえて感謝してます^^
こちらこそ、ありがとうございましたm(_ _)m
出来の悪い生徒だなんて、ぜんぜんそんなことないですよ～^^
10回分の応援受け取りました^^
meg
投稿者 ＞健さんへ : 2006年03月07日 22:48