twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > Tips > リンク先のサイトのサムネイル画像を表示する

リンク先のサイトのサムネイル画像を表示する

Webサイトはリンクから成り立っているものですが、ほかの人のサイトへリンクをした場合に、外部リンクであることを明確にしたいとか、訪問前にどのようなサイトかパッと見で判断ができれば……とか思うことがあるかもしれません。ここでは無料サービスを利用して簡単にリンク先のサイトのサムネイル画像を表示する方法を紹介します。

snap shotsを利用する

検索エンジンのsnapが提供しているsnap shotsを利用して実現します。snap shots今すぐ登録をを押して登録を行ないましょう。どのように表示されるのかはリンクの上にマウスカーソルを移動させるとわかります。

Setp1ではポップアップする画面の配色とそこに表示する項目とサイズ、必要であればお持ちのWebサイトのロゴを100x20pixelsで登録します。下のほうにある高度な設定の前にあるマークをクリックしてオプションを展開し、言語をEnglishに変更してください。2007-06-28現在は日本語に設定するとInternet Explorerで動作しません。OperaとFirefoxは大丈夫なのですが……。検索ボックスは不要であればチェックを解除し、サイト内のリンクにもサムネイル表示をしたいならば内部リンクのプレビューにチェックをつけます。設定は好みに合わせて試してみるとよいかもしれません。準備ができたら、次へを押して先に進んでください。

Step2としてWebサイトのアドレスと連絡先のメールアドレスを聞かれるので、Webサイトのアドレスを間違いのないように登録してください。snapはマイナーとはいえ検索エンジンなので登録しておいて損はないはずです。メールアドレスは申告したくなければ捨てアドレスを使うなどしてください。「下記の使用許諾契約に同意します。」にチェックをつけて次へを押しましょう。

Step3ではHTMLに記述するべきJavaScriptのコードが表示されるので、テキストの選択を押してコードを選択し、リンク先のサイトをポップアップでサムネイル表示したいHTML文書に貼り付けます。以前は<HEAD>~</HEAD>内に貼り付けるよう指示されていましたが、現在では</BODY>直前にコードを記述するよう指示されているので注意してください。どちらでも通常は問題が発生しませんが、万一サービスを提供しているサーバーがメンテナンスなどで落ちていると、JavaScriptの読み込みに失敗してJavaScriptを読み込む記述がある部分より後ろをブラウザが処理できずに、ページが表示されなくなることがあります。したがって、特別な事情でもない限りは</BODY>直前に記述するべきです。

なお、サムネイルを表示したくないリンクがある場合は、A要素のclassにsnap_noshotsを指定します。例えば、サムネイルを表示したくないリンクは<a class="snap_noshots" href="http://~">という記述です。そのあたりはよくある質問に記載されているので一読しておくとよいかもしれません。

このようなサービスが無料で提供されているのは、おそらくsnapの検索エンジンのデータベースにインデックスされていないページへのリンクがあった場合にインデックスに追加できるメリットがあることと、デフォルトで有効になっているポップアップ画面内にある検索ボックスを利用してもらうことでトラフィックを集められる可能性があるからといったあたりでしょう。

相手側のサーバー負荷が高くて表示が遅くなったことがあったので、それは困るだろうということで当Webサイトでは使用を取りやめました。そのようなリスクがあることを考慮してメリットとデメリットからどうするか判断してくださいませ。