賢威|リンク画像の上にカーソルを置いたときに”へこませる”設定方法を解説

こんにちは、ユウトです。

今回は、ユーザーがリンクの貼られた画像の上にカーソルを合わせたときに、画像をペコッとへこませる設定方法について解説します。

例えば、以下の画像には、メールフォームへのリンクが貼られており、画像にカーソルを合わせると、下にへこむような動きをします。

このような設定を行うことで、画像にリンクが繋がっていることを相手に気づかせられるので、クリックされやすくなります。

では、早速、設定方法について説明します。

 

ワードプレス管理画面から、外観、テーマの編集へと進み、design.cssを開きます。

次に、以下のコードをどこでもよいので、追加します。

一番最後に追加するのが、分かりやすいでしょう。

もちろん、追加する前に、シートのバックアップをとっておきます。


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

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

/*–グローバルメニュー—*/
#global-menu 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; }

/*–フッター—*/
#footer a:hover{ position:relative;top:2px ;left:2px; }

 

追加したら、ファイルを更新ボタンをクリックしましょう。

トップページに戻って、設定が反映されているか確認してください。

これで、設定は完了です。



コメントを残す

サブコンテンツ

このページの先頭へ