SIRIUS(シリウス)のリンクにマウスオーバーした際にプチ情報を表示させてみる

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

リンクにマウスオーバーした際にプチ情報を表示させてみる

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

今回のカスタマイズは、リンクにマウスを載せたときに(マウスオーバーとも言います)
様々なプチ情報を表示させて、そのリンクがどんなものかを事前にわからせてあげるというものです。

 

一般的には『ツールチップ』と呼ばれているものです。

 

たとえば当サイト最上部のヘッダー画像にマウスを乗せると
「トップページに戻ります」というツールチップが表示されるようになっています。(PCのみ)

 

ちなみにこのリンクにマウスを乗せると
「これがツールチップ」というテキストが表示されます。(PCのみ)

 

この手のものは数多く存在しますが、
当サイトで使っているのはシンプルかつ簡単に応用のきくものです。

 

またこの方法は基本的にテキストでの表示であり、リンクごとに内容を変えられるので、
例えば「最安値はコチラ!」とか「入荷日予定は○日」「裏情報も満載!」といった
別の表現に変えることもできます。

 

背景色や枠の大きさも自由に変更できます。
(CSS の知識が多少必要になりますけど)

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


てっぺん