賢威6.2でマウスオーバー時に画像をへこませる方法
賢威はデフォルトではクリックできる画像に
マウスを合わせても（マウスオーバー）画像に
変化はありません。
そこで
マウスオーバー時に画像をへこませることで、
特に意識することなくポインタを画像の上を通過させた時でも、
興味を引きつけることができます。
そこで、
今回は賢威6.2でマウスオーバー時に
画像をへこませる方法を紹介します。
賢威6.2でマウスオーバー時に画像をへこませる方法
設定方法はワードプレス管理画面より
『外観』⇒『テーマの編集』へ行き
『design.css』を開きます。
そして下記コードを追加することで画像が凹むようになります。
場所はどこでも良いので自分がわかりやすい場所に入力しましょう。
（僕は一番下に入力しています。）
|
1 |
a:hover{ position:relative;top:3px ;left:3px; } |
数値は大きければ大きいほど動きが大きくなります。
自分の好みの動きの大きさにしてみてください。
へこませる場所を選択できる。
また、
全ての画像をへこませるのではなく、
各サイトパーツごとに凹ませたい場所を指定したい場合は
下記コードのように場所のコードを足すことで
適用する場所を選ぶことができます。
ヘッダー
|
1 |
#header a:hover{ position:relative;top:3px ;left:3px; } |
グローバルナビ
|
1 |
#global-menu a:hover{ position:relative;top:3px ;left:3px; } |
パン屑
|
1 |
#breadcrumbs a:hover{ position:relative;top:3px ;left:3px; } |
コンテンツ
|
1 |
#main-contents a:hover{ position:relative;top:3px ;left:3px; } |
サイドバー2カラム
|
1 |
#sidebar a:hover{ position:relative;top:3px ;left:3px; } |
サイドバー3カラム時左
|
1 |
#sidebar1 a:hover{ position:relative;top:3px ;left:3px; } |
サイドバー3カラム時右
|
1 |
#sidebar2 a:hover{ position:relative;top:3px ;left:3px; } |
フッター
|
1 |
#footer a:hover{ position:relative;top:3px ;left:3px; } |
光らせることも
更に
コードの最後に
『opacity: 0.6;』
と追加することで、マウスオーバーした際に
半透明になり光ったようになります。
|
1 |
a:hover{ position:relative;top:3px ;left:3px; opacity: 0.6; } |
こちらの数値は小さいほど透明度が上がり
より光ったようになります。
是非効果的に利用して、
クリック率を上げていきましょう。
また、
賢威6.2の全パーツカスタマイズ一覧まとめページを作成しましたので、
他の箇所をカスタマイズされたい場合は一度見てみて下さいね。
⇒賢威6.2【全カスタマイズを一覧まとめ】ワードプレステンプレート
