ホームページ作成/ホームページ作成テクニック、小技

リンク先のサムネイルを事前に見せるリンク

リンクの上にマウスを載せると、リンク先ページのサムネイル画像やブックマーク数が「吹き出し」に表示される面白いサービスがあります。実際にアクセスすることなくリンク先ページの外観が見えるリンクが作れます。

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

リンク先にアクセスせずにリンク先の内容を確認させられるサービス

HeartRails Glance」というサービスを使うと、 リンクの上にマウスを載せるだけで、リンク先ページのサムネイル画像を「吹き出し」に表示させることができます。

Internet Explorer・Firefox・Operaが対象で、JavaScriptを有効にしていれば動作します。 それらのブラウザを使ってリンクの上にマウスポインタを載せると、下図のように「吹き出し」が現れて、リンク先のサムネイル画像などが表示されます。

HeartRails Glance
▲HeartRails Glanceの表示サンプル

設置方法は非常に簡単で、指定されたHTMLソース(JavaScriptを呼び出すためのソース)をコピーして、設置したいページに貼り付けるだけです。

対象範囲の指定や枠のカスタマイズも可能

ページ内に存在するすべてのリンクを対象にすることもできますし、「サイト外へのリンク」だけを表示対象に絞ることもできます。 また、HTMLのid属性やclass属性を使って対象を制限することもできますから、柔軟に活用範囲を限定できます。
※サムネイルの作成が完了していないページへのリンクには表示されません。

HeartRails GlanceでAll Aboutへのリンクを表示させたところ
▲黄色やピンクを指定したところ

「吹き出し」のデザインは、既に用意されている6色から選択できるほか、自分で作成した画像を使うこともできます。 そのほか、表示する情報やサムネイル画像の大きさなども自由に選択できるため、 設置するページに合ったデザインで表示できるでしょう。

リンク先にアクセスする前に外観を掴める機能は、面白くて便利そうです。 設置は簡単で誰でも無料で利用できます。ぜひ使ってみてはいかがでしょうか。

「HeartRails Glance」の設置方法へ >>

  • 1
  • 2
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます