カーソルをもっていく(マウスオーバー)とへこむリンク・画像!どうやるの?方法は?

office-381228_640

 

 

カーソルをもっていくと

「ペコ」っとへこむリンク。

 

「なんだこれ!?」

と思ったことはありませんか?

 

WordPress で賢威6.2を使っていますが,

意外と簡単にできました。コピペだけ。

 

HTML がわからなくても大丈夫。

ホームページでも簡単です。

 

あなたも設定してみませんか?

 

 

1.「 <head> ~ </head> 」 タグを見つける。

 

HTML の上部に<head>~</head>

タグはあります。</head>を探します。

 

賢威6.2 の場合は,

「外観」 → 「エディター」 → 「ヘッダー」

(header.php)とすすんで選択します。

 

下から見ていって, </head>を探します。

 

 

2.以下のタグを貼り付ける。

 

<style type=”text/css”>
<!–
a {text-decoration:none;}
a:hover {position:relative;top:2px;right:2px;}
–>
</style>

 

 

headerphp

 

 </head>タグの上に,上記のコードを

貼り付けて,保存すれば終了です。

 

※注意!

⇒ 「 header.php 」 のバックアップをとっておくこと。

① テンプレート内のどこかをクリックし,

「 Ctrl+A 」で全範囲指定し,「 Ctrl+C 」でコピー。

② メモ帳などに,「 Ctrl+V 」 で貼り付けて

保存すればOK!

 

 

3.ちょっと設定を変えるときは!

 

<style type=”text/css”>
<!–
a {text-decoration:none;}
a:hover {position:relative;top:2px;right:2px;}
–>
</style>

 

コード内の

「top:2px」 とは,「下に2ピクセル動く」こと。

「right:2px」とは,「左に2ピクセル動く」こと。

 

なので,数字を大きくすれば大きく動きます。

 

「 bottom 」 にすれば 「上に動く」 ,

「 left 」 にすれば 「右に動く」 というわけです。

 

※注意!

⇒ 数字を大きくすると,マウスオンしたときに

動きすぎてリンクをクリックできなくなるので,

1~2px にしておきましょう!

 

 

まとめ

 

この設定をしておくと,リンクにアクセントが

つくので,クリック率アップにつながります。

 

「ただの画像ではなく,リンクが貼ってあるよ!」

 

アピールしたいときは,とても効果的ですね。

 

ただし,リンクや画像がほとんどへこむので,

リンクがありすぎると嫌われる可能性があるかも?

 

私のサイトでは,サイドバーのリンクが動くものと

動かないものがありました。なぜかは分かりません。

 

また,

一部のリンクだけへこませる方法もあるようなので,

飽きてきたらチャレンジしてみたいと思います。

 

「マウスオーバーで色が変わる」方法もあるしね。

 

まだまだ面白いモノがありそうなので,

これからも紹介していきたいと思っています。

 

 

あなたの★応援クリック★をお願いします!

  ↓  ↓  ↓

ただ今のランキングは何位?

 

コメントを残す

QLOOKアクセス解析

このページの先頭へ

ライブチャット 人妻