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

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他

新サイトのご紹介

SIRIUSの大型バージョンアップ(ver1.5)によってシステム内部に様々な改良が加えられました。

これにより当サイトでご紹介している独自の機能拡張の一部が【新】SIRIUSテンプレートに標準で搭載されるようにもなってます。

反対に大型バージョンアップによって、これまでご紹介してきたTipsの中にはうまく作動しないものも出てきてます。

よって今後このサイトの更新はストップすることにしました。(サイトはしばらくは残しておきます)

これに伴い、【新】SIRIUSテンプレートに対応した『SIRIUSでホームページ作成』サイトを新規公開しました。

さらに【新】SIRIUSテンプレートをベースにしたカスタムテンプレート【Volar】も公開中です。(※SIRIUS購入の特典になります)

【Volar】はこれまで私がご紹介してきたTipsが最初から組み込まれたカスタムテンプレートであり、当サイトではご紹介してない新機能も追加搭載してます。

※当サイトの更新ストップにより、一部の記事は自動的に新サイトの同記事に自動転送されます。

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

サンプル画像

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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


てっぺん