リンクの設定されている画像やテキストをマウスでポイントした時に変化させる方法


リンクが設定されている画像やテキストの上に

マウスを乗せた時にヒョコっと動かしたり、

白っぽく色が変わるのってカッコイイですよね。

簡単にカスタマイズできるのでやってみましょう!

(賢威6.2のヘルシー版を使用しています)

 

ヘッダー部分やグローバルメニューなど部分ごとに
設定することもできるのですが、

今回は、より簡単にをモットー
シンプルにサイト全体を一括で設定します。

 

それでは、レッツカスタマイズです。

 

ワードプレスの管理画面から
外観→テーマ編集をクリックします。
キャプチャ1
 

 

 

 

画面を下にスクロールしていくと右側に
スタイルシートという文字の下にある

 

design.css(でざいん どっと しーえすえす)
いう項目をクリックします。

 

キャプチャ2
 

 

 

 

 

 

プログラムコードの1番下に
このタグをコピペで貼り付けましょう。

a:hover{ position:relative;top:3px ;left:3px; opacity: 0.6; }

 

簡単な作業ですがdesin.cssの内容をメモ帳などに
コピーするなど必ずバックアップをとってから作業しましょうね。

 

バックアップの習慣をつけておけば必ず

「よかった!」と   (;^ω^)

思える時がやってきますので

 

どうでしょうか?うまく動いていますか?

 

ちなみに、
3pxという部分が動く量を指定していますので
数字が大きくなれば動きも大きくなります。

自分の好みを探してみてください。

また、
0.6という数字が小さくなるほど透明度が高くなり
より光ったようになりますので

こちらもお好みで調節してみてください。

 
いつもあなたを応援しています。
最後まで読んで頂きありがとうございました。

 

2 Responses to “リンクの設定されている画像やテキストをマウスでポイントした時に変化させる方法”

  1. Sam より:

    パパトコさん

    初めて訪問させて頂きました。
    ブログランキング8位凄いですね。
    ぽちっとさせて頂きました。

    投稿内容とてもためになりました。
    また、訪問させて頂きます。

    Sam

    • パパトコ より:

      Samさん

      お世話になります。
      コメントありがとうございます。

      Samさんもすぐにランキング上位
      間違いなしですよ (^○^)

      またお越しくださいね。
      応援有難うございます^^

コメントを残す

サブコンテンツ

プロフィール

285_150916222240_3509ミニ

 

はじめましてパパトコです。

簡単にお小遣い稼ぎや副業の

楽しさを学び経済的自由を目指します!


詳しくはコチラ→

ランキング応援お願いします♪

 

 

皆様のおかげで1位

頂くことができました!

ありがとうございました

タグクラウド

このページの先頭へ