マウスオーバー時に画像が動く設定（賢威6.2）

本日は、画像やリンク先、グローバルメニューに

マウスオーバーした時に、画像がズレるように動く

設定をします。

作業前に必ずバックアップをとって下さい！（1回目）

当ブログでは、賢威6.2コーポレート版を使用しています。

 

非常に簡単なのでご安心を＾＾

では、早速始めます。

 

 

管理画面から

外観 → テーマ編集 → desin.css と進みます。

 

 

それでは次にdesin.cssの一番下の

/*————————————————————
template created by web-rider
————————————————————-*/

の前に以下のタグを貼り付けて下さい。

 

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

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

/*-グローバルメニュー-*/
#global-nav a:hover{ position:relative;top:2px ;left:2px; }

/*-パンくず-*/
#breadcrumbs a:hover{ position:relative;top:2px ;left:2px; }

/*-サイドバー2カラムの場合-*/
#sidebar a:hover{ position:relative;top:2px ;left:2px; }

/*-サイドバー3カラム時の左側-*/
#sidebar1 a:hover{ position:relative;top:2px ;left:2px; }

/*-サイドバー3カラム時の右側-*/
#sidebar2 a:hover{ position:relative;top:2px ;left:2px; }

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

 

 

貼り付けましたら「ファイルを更新」をクリックで完了です。

「top:2px ;left:2px;」の数字を大きくすれば

大きく動きます。

 

「ヘッダーは動かしたくない」や

「コンテンツだけ動かしたい」場合は、

動かしたいものだけ選んで貼り付けて下さい。

 

どうでしたか？簡単でしたね＾＾

ここで注意！

作業前に必ずバックアップをとって下さい！（2回目）

 

少し動くだけでちょっとカッコよくないですか？

少しのことでも差別化に繋がります。

設定方法も非常に簡単でおススメ！です＾＾

 

最後までありがとうございました。

ヒロ