今回は、リンクが貼られた画像や文字にマウスを合わせた時に(マウスオーバー)、

画像や文字が【ぴょこっ】と凹むようにする方法を、

図解入りで解りやすく解説したいと思います^^

 

マウスが画像や文字の上を通過するときに、(これをマウスオーバーと言います)

その文字や画像が【ぴょこっ】と凹むことで、

読者さんの目に止まりやすくなり、リンクがかけられている事が

よくわかるようになります。

 

そうする事で、見てもらいたい記事や情報を、より沢山見てもらえる、

ブログの滞在時間を長くすることに一役かってくれます♪♪

 

では、早速作業に入って行きましょう(^^)/

 

【賢威6.2】マウスオーバー時に画像を凹ませる方法

 

WordPressのダッシュボードにログインしておきます。

①【外観】にマウスを合わせ、

②【テーマの編集】をクリックします。

マウスオーバー

 

テーマの編集の画面が開きます。

マウスオーバー

 

画面を下にスクロールしていきます。

右側に【design.css】という項目があるのでクリックします。

マウスオーバー

 

【design.css】が開きます。

画面を下にスクロールしていきます。

下の画像の矢印で示した部分に、コードを挿入します。

マウスオーバー

 

挿入するコードがコチラです。

このままコピーして貼り付けてください♪♪

 

貼り付けるとこのようになります。

左下の【ファイルを更新】ボタンをクリックしておきましょう。

マウスオーバー

 

これで出来上がりです♪

ブログのプレビュー画面を表示させたら、

キーボードの【F5キー】を押して更新してみてください。

画像が【ぴょこっ】と動くはずです♪♪

 

もしも、動かない時は、【キャッシュの削除】を試してみてくださいね^^

 

注意点

WordPressで画像を挿入する際に、画像の配置を【なし】以外

(右寄せ、左寄せ、中央など)にしていると、

この設定をしても、反映されませんので、ご注意くださいね♪♪

 

それでは、今回はこの辺で^^

 

PS.
いかがでしたでしょうか?

もし、【ここが分かりにくい!】とか
【こんな記事も書いて欲しい!】とか
【こんな事も教えて!】とかいう事がありましたら

どうぞ、遠慮なくマルコにメッセージをくださいませ♪
 ↓↓↓
マルコにメールしてみる(#^.^#)


PPS.

マルコは、パソコン1台でインターネットで収入を得て暮らしています。

自宅で家事をこなしながら、毎月自動でも20万円、
頑張った時には月収100万円以上を達成して
家庭を犠牲にして働きづめだった生活から、救われました。
そんなマルコのゼロからの道のりをメルマガでお話しています。

メルマガ内でマニュアル等のプレゼントも行っていますので
良ければ詳細をご確認くださいませ^^
(強引な勧誘などはおこなっていませんのでご安心くださいね)
 ↓↓↓
マルコのメルマガを読んでみる(#^.^#)