今回は『少しでもリンクをクリックしてもらうための小さなテクニック』として、マウスオーバー(リンクにマウスのポインタを乗せる)でリンクをピコッと(ピョコっと？)動かすための方法をご紹介します。
お問合せはこちら ←ここにマウスのポインタを合わせてみてください(^-^)
ピコッと動くのが分かりますか？？凹む感じですかね。
ブログを見ている方は、ここが『クリックできる』という事が視覚的にも分かりやすくなりますよね！
これをするかしないかで、クリック率も微量ながら変わってくることもありますので、ぜひ取り入れてみてください。
ただ、この『ピコッ』がうっとうしい！と思う方もいらっしゃると思うので、ここはあなたのお好みで・・・
もちろん画像リンクでも同じように『ピコッ』とできます(^-^)
リンクにマウスを乗せた時にピコッとさせる方法・・・の前に
ではやり方をご説明していきますね。
調べるとこのやり方はたくさんあるようで、テーマ(テンプレート)によっても異なります。
正しくはテンプレートごとにCSS(文字装飾など、視覚的構造を記述する枠組み)を書き換える必要があるようですが、それではブログごとに、テンプレートごとに、タグを調べて書き換えて確かめて・・・
と、大変ですよね(^^;)
どんなテンプレートでも『ピコッ』ができる方法を学んだので、その方法をご紹介します。
※この方法はソースとしては若干正しくないやり方になるらしいのですが、簡単な方法ですし、このブログでも他のブログでも問題なく使えています。
正しい方法じゃないと絶対にイヤ！！という方は、それぞれのテンプレートにあった方法を探してみてくださいね。
リンクにマウスを乗せた時にピコッとさせる方法
①WordPressダッシュボードの『外観』から【テーマの編集】をクリック
②右側の【テーマヘッダー(header.php)】をクリック
※ここの書き方はテーマによって違うかもしれません。(header.php)という英語表記も確認してください。
HTMLを編集する画面を開きます。
このあとHTML(文書の理論構造を記述する部分)をいじっていきますので、『テーマヘッダー(header.php)』を開いたら、記述を全部メモ帳などにコピーしておきましょう。
万が一間違えた時に元に戻せなくなると大変なので(^^;)
※より安全なテーマの編集方法はこちら(^-^)→テーマの編集はFileZilla(FTPソフト)でを使って安全に！
③この中から『</head>』という記述を探します
【Ctrl】+【F】でこの中の検索ができるようになりますので
</head>
を検索して探しましょう。
※<head>と間違えないように！スラッシュがついた</head>です！
④この</head>の直前にこの↓記述をコピー＆ペーストで貼り付けます
|
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css"> <!-- a:hover { position: relative; top: 2px; left: 2px; text-decoration: none; } --> </style> |
このようになります。
⑤1番下の【ファイルを更新】をクリックして完了！
これで『ピコッ』となっているはずです(^-^)
プレビューを見てリンクにマウスを乗せて確認してみましょう。
もしならなかったら【F5キー】を押して画面を更新してみてください。
注意とおまけ
先程も書きましたが大事なことなので改めて・・・
『テーマヘッダー(header.php)』を開いたら、何かする前に必ず全文をメモ帳などにコピーしておきましょう。
- 【Ctrl】+【A】で全文選択
- 【Ctrl】+【C】で全文コピー
- 【Ctrl】+【V】で全文メモ帳に貼り付け
保存したら分かりやすい名前をつけて、バックアップファイルなどと一緒に保存しておくとより安心ですね(^-^)
※くどいようですが・・・
より安全なテーマの編集方法はこちら(^-^)→テーマの編集はFileZilla(FTPソフト)でを使って安全に！
それからこの追加した記述の↓青線部分の数字を変更すると『ピコッ』となる動き具合が変わります。
数字を大きくすると『ビョコッ』となったり・・・お好みに合わせて変更してみてください。
まとめ
リンクを『ピョコッ』とできましたか？
今回はWordPressで説明しましたが、FC2ブログなどの無料ブログでもHTMLを編集する画面がありますので、そこで同じように記述の追加をしてみてください。(本当にしつこいですが、バックアップを！！)
今回のようなブログのカスタマイズは、作業を進めていく上で必須ではありませんが、
これで微量でもクリック率が上がるなら私はやっておきたいと思いますし、何より『ピョコッ』としたかったので・・・(^^;)
では！以上です。お疲れ様でした！
