賢威7でマウスオーバーで画像を上下に動かす方法

スクリーンショット 2016-02-25 6.04.23

 

今回ご紹介するのが、賢威7でコンテンツ画像にマウスオーバーした時にその画像が上下に動く設定方法を解説していきます。

めちゃくちゃ簡単なのでぜひやってみてください!
⇩賢威についての詳しい情報は下記から⇩
賢威公式サイト
 

マウスオーバーで画像を動かす方法!

やり方は簡単で以下のコードをbase.cssに記述していきます。

 

a:hover { top:10px;  position:relative; }

 

記述する場所はどこでもいいですが、一番下が見やすくていいでしょう。

スクリーンショット 2016-02-08 11.25.13

 

この設定ではサイトの全ての画像にマウスオーバーした時に動くようになっているので任意の場所だけ動かしたい場合が以下のように設定します。

 

a:hoverの前に設定したい箇所名を入れてください。

例えばヘッダーだけ動かしたいのであれば

#header a:hoverという感じです。

 

#global-menu a:hover(グローバルナビ)

#breadcrumbs a:hover(パン屑)

#main-contents a:hover(コンテンツ)

#footer a:hover(フッター)

 

などなど

 

まとめ

マウスオーバーをした部分を白くぼんやりさせたり、今回のように画像を動かしたりとすることでコンテンツを目立たせることができます。

表面的なところに特定の箇所だけ立体する(動かす)ことでより、サイト自体のクオリティも上がってくるので、賢威7のカスタマイズとして実践してみてください。

 

これ以外の賢威7カスタマイズ方法は以下からご覧になれます。

 

賢威7カスタマイズ大図鑑へ戻る

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

2 Responses to “賢威7でマウスオーバーで画像を上下に動かす方法”

  1. SANO より:

    賢威ユーザーなので、大変参考になります。

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ