ブログに貼ったリンクをピョコピョコ動かす方法

 

ネットサーフィンして、いろいろなサイトを見ていると

 

ありますよね。

 

文字や画像がピョコピョコっと動くやつ。

 

マウスのカーソルを合わせたときにです。

 

リンクなんですよね。

 

そういうとき、ついついクリックしてしまっているのでは?

 

 

私のこのブログでも

 

私のアバターをはじめ、クリックできる文面には、その仕掛けを入れています。

 

 

その仕掛けとは、

 

こちら の HTMLタグを <head> 〜 </head>の間に入れるだけです。
場所は、<head> 〜 </head> の間だったら、どこでもかまいません。

 

<style type="text/css"> <!-- a:hover {position:relative; top:2px;left:2px;} -->
</style>

 

 

シリウスでは、「編集」メニューの中にある HTMLテンプレート
直接、挿入することができます。

 

コピペして入れてみてください。

 

入れてアップロードすれば、
今まで動かなかった文章や画像のリンクが、カーソルを置くと浮き沈みする感じで動きますよ。

 

 

 

あっ、このタグをシリウスのHTMLテンプレート画面に入れた時、
注意することがあります。

 

まあ、このタグに限らず、どんなHTMLタグを入れてもいえることですが、

 

それは・・・

 

テンプレートを変えないことです。

 

テンプレートを変えたら
HTMLテンプレート画面の中身がリセットされます。

 

そうです、追加入力したHTMLタグは消えてしまうんです。

 

 

「ん!? そんなこと言うってことは、お前、やっちゃったのかあ?」

 

するどいですね。

 

はい、やっちゃいましたぁ (笑)

 

 

記事のタイトルバーに矢印のつく
デフォルト・タイプのテンプレートに変えてみようかと思ったんです。

 

結局、やめましたけどね。(笑)

 

 

 

それともうひとつ。

 

同じくシリウスの「編集」メニューにあるスタイルシート画面も同じですよ。

 

 

こちら の記事で紹介している内容は、
シリウスのスタイルシート画面にちょっとしたHTML構文を追加するんですが、
追加したあと、
ブログのカラーを変えてみようとかで、テンプレートを変更したりしたら、
追加したHTML構文は消えてしまいますからね。

 

 

気をつけてくださいね。

 

 

 

あっ、私のチョンボ話で話が横道に逸れてしまいましたが

 

 

こうして、ピョコピョコ動くことで
文面や画像がリンクであるということが一発でわかりますから
クリック率のアップが見込めます。

 

HTMLタグの中にある 2px という部分の数字を大きくすると、
リンクの動く幅も大きくなります。

 

試してみてください。

 

 

 

ということで、今日は

 

シリウスで作ったブログ、ホームページのリンク箇所が動く仕掛けの話をしましたが
今回、ご紹介したことは、トップページに貼ったリンクについてです。

 

やっぱり、トップページだけでなく、どのページに行っても
そこにあるリンクに同じような仕掛けをつけたいですよね。

 

 

ハイ、いろいろ調べてみます。

 

 

わかったら、お伝えしますね。

 

 



*-----------------------------------------------------------------------------------*

   最後までお読みいただき、ありがとうございます。
   記事が少しでも参考になれば幸いです。

                  ブログランキング・にほんブログ村へ