作成開始 : 平成22年11月03日(水) 最終更新 : 平成23年03月08日(火)
オンマウスでサイトのサムネイルを表示する。
平成23年03月08日(火) 追記
websnaprで仕様変更があったようです。
Link Thumbnailがそれに対応していないので、リンクしたサイトのサムネイルが表示できなくなっています。 |
サイトのリンクにマウスを置いた時にサムネイル表示してくれるものは結構ありますが使い勝手はそれぞれ一長一短です。
サムネイル表示をサービスとして提供しているサイトもありますが、今回は自サイトに設置する方法をしてみました。
これも、プラグインやスクリプトなど検索すると結構あります。
その中から Link Thumbnail を紹介します。
テキストリンクにマウスを乗せるとサムネイル画像が表示されます。(このページに書いてあるリンクの上にマウスを乗せてみて!)
設置方法と効果は大きく分けて２種類あります。
- 別サイトへのリンクを全てサムネイル表示させる方法
- リンク一つ一つにclassで埋め込む方法
簡単なのは別サイトへのテキストリンク（サイト内はサムネイル表示されません）全てをサムネイル表示させる方法ですが、場合によっては見づらく場合もあるので両方で説明してみます。
Link Thumbnail の 1) Download the Code から linkthumb.zip (5.07KB) をダウンロードします。
解凍すると以下の3つが展開されます。
1.arc90_linkthumb.js
2.linkpic_shadow.gif
3.example.html
実際に使うのは 1 と 2 です。
この2つを好きな場所にアップします。今回は両方とも /work (Document Root
直下の work ディレクトリ)に入れます。
次にページの<head>部分に下記を記述します。
そして普段使ってるCSSに下記を加えてます。または、これ用のcss作ってもいいでしょう。
ページの<head>内に入れても良いです。
今回は thumb.css として /work (Document Root 直下の work ディレクトリ)に入れます。
以上でOKです。
あとは、ページを表示させて確認します。
最初はサムネイル画像がキャッシュされていないせいか、表示されにくいですがすぐ表示されるようになります。
ページ全部のリンクをサムネイル化でなく、個別のリンクをしたい時は以下のように該当リンクを記述します。
1.以下の記述を無くします。
<script type="text/javascript">
<!--
arc90_linkThumbUseClassName = false;
-->
</script>
2.該当リンクを以下のように書きます>
<p><a href="http://サイトURL" class="linkthumb">サイト名</a></p>
※リンクに<strong>とか付けてると何故か表示されないようです。
結局は、Link Thumbnail で提供するサイトのサムネイルサービスを利用する形式のようですね。
他にちらっと探してみました。
1.ASCII.jp：最終日：リンク先のサムネイルを自動的に表示しよう｜【短期集中連載】この冬作ろう！jQueryプラグイン講座
次に、講座の説明どおりに 前記で作成した、/work/thumb.css に以下を追加します。
position:absolute
display:none
そして、講座にある【サムネイル表示プラグインのソース】をコピーして thumbnail.js としてファイルを作成し /work に保存します。
サイトリンクのサムネイルを表示したいページの <head> 〜 </head> に以下を組み込みます。
<link rel="stylesheet" type="text/css" href="/work/thumb.css">
<script type="text/javascript" src="/work/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/work/thumbnail.js"></script>
以上で終わりです。こちらが サンプル ページです。
2.css や プラグインを使わなくてもできる方法
検索してみたら、こんなのもありました。
サービスは以下のとおりです。Free利用してみました。
ここにはないですが、一時間あたりに利用できる snapshot は 80個 とのことです。
Supportのページで「1. websnapr free services」の下にある「Click here to register」をクリックすると以下の入力フォームが表示されます。
これに必要項目を入力して「let's go」をクリックします。
すると「An activation link has been sent to your email address.」なんてのを表示します。
メール確認してみると、アカウント案内のURLが書かかれたものが送られてきます。
*****************************************************************
Hello!
You are receiving this email because you've registered at websnapr.com.
Please click here to verify your account:
http://www.websnapr.com/activate/ここがアカウントへの場所/
Best regards
Your websnapr team
*****************************************************************
どうやら、ここにアクセスしてアクティベーションしてくださいと言っているようです。
アクセスしてみると。「Your developer key is: アクセスキー」という形でアクセスキーが取得できます。
メールでもアクセスキーのお知らせが届きます。
これで、準備ができました。
次に実際の使い方です。
(1). 以下のコードをブラウザのurlボックスに入れてキャプチャーし､またこのurlにできた画像を使う。
http://images.websnapr.com/?size=TかS&key=ユーザキー&url=キャプチャーしたいページのurl
size=T (92x70 pixels)
size=S (202x152 pixels)
(2).あるいはページ上のリンクに websnapr というクラスを設定することによって､リンク先のサムネールが自動的に作成され､マウスオーバーで表示される。
<a class="websnapr" href="http://サイトURL">サイト名</a>
そのとき､下のリンクもページ内に置く。(<head> 〜 </head>の間かな!)
<script src="http://bubble.websnapr.com/ユーザキー/sah/"
type="text/javascript"></script>
↑
これ書いただけでもページ内の全リンクがサムネイル表示されます。
※sahはSサイズの場合で､Tサイズならtahにします。(この違いが見た目よくわからないっ!)
サンプルは こちら です。
Websnapr の場合は、自サイトリンクのサムネイルも表示してしまいます。
平成23年03月08日(火) 追記
仕様変更に伴い、websnapr のサイトでチェックしてみました。
サンプルのページでは、<head>〜</head>に以下のように書いています。
<script src="http://bubble.websnapr.com/ユーザキー/sai/" type="text/javascript"></script>
詳しくは同サイトへどうぞ。 |
【戻る】
