賢威6.2 画像にカーソルを置くと画像やリンクが動くカスタマイズ方法

a 3d man introducing something, standing by a projector
当ブログの画像やリンクにカーソルを置くと画像が少し移動します。


他人と差別化を計りたい時に重宝するカスタマイズです。

そして、訪問者の動きをもキャッチできます。
少し画像が動くだけでも目立ちますからね。


カスタマイズ方法はとても簡単なので
安心してほしい。

マウスオーバー時に画像を動かすやり方を説明していきます。


当ブログの仕様


当ブログは賢威6.2のヘルシー版をテーマとして使用しています。


使用するCSS一覧


画像やリンクを動かす為にCSSを追加します。
・ブログ全体を一気に設定
・ブログの各コンテンツで設定

上記2通りのCSSを書いておきます。

ブログ全体を一気に設定する場合


/*画像をマウスON時に動かす*/

a:hover {
position:relative;
top:2px;
left:2px;
}

ブログの各コンテンツで設定する場合


/*ヘッダー*/
#header a:hover{ position:relative;top:2px ;left:2px; }


/*コンテンツ*/
#main-contents a:hover{ position:relative;top:2px ;left:2px; }


/*右サイドバー*/
#sidebar a:hover{ position:relative;top:2px ;left:2px; }


/*左サイドバー*/
#sub-contents a:hover{ position:relative;top:2px ;left:2px; }


CSS設定方法


wordpressダッシュボード左側の
「外観」⇒「テーマ編集」をクリック
css-navi

ダッシュボードの右側の
「design.css」をクリック
css-hyouji


「design.css」が開くことができる。
css-hensyu

一番下までスクロールする。
/*————————————————————
 template created by web-rider
————————————————————-*/
この表示の上に先程のCSSをコピペしてください。

当ブログではブログ全体を一気に設定するやり方です。
css-hensyu 2

数値を変更すれば動かす量も変更できます。
マイナスの値も設定できます。

数値はあなたのお好みで大丈夫ですが、
激しく動くのはウザいです!


これで画像のリンクやテキストリンクにちょっとした
変化をつけることができます。


参考にして試して下さいね。

    コメントを残す

    サブコンテンツ

    ブログ運営者

    tatu


    皆様の応援により
    7日間でランキング
    1位獲得!!

    いつも応援していただきありがとうございます。

    ranking


    ついに40代に突入してしまいました。
    ネットビジネスでは10年間あれやこれやと情報プレナーの方にお金を積んできました。
    いわゆる「ノウハウコレクター」ってやつね。
    私の中ではそんなお洒落な表現ではなく、ただ行動をしなかった、弱虫太郎って感じです(汗)

    しかし、

    ネットサーフィンしか知らないこの私はメチャメチャ成長したんです。
    wordpressで運営しカスタマイズ
    無料レポートを作り
    メルマガを発刊
    するようになりました。

    しかし、私は普通の会社員です。
    子育てにも積極的に参加しています。
    限られた時間で、副業として出来ているのには理由があります。
    そのとんでもなない裏話は

    TATUのプロフィールへ

    お問い合わせは無料だよ(笑)

    mail2
    ワードプレスの導入の仕方など、質問・疑問をお気軽にお問い合わせください。
    お問い合わせはこちら

    このページの先頭へ