サイトをサムネイル表示してくれるものは結構ありますが個性はそれぞれ。結構有名らしいんですがLink Thumbnailを紹介します。
テキストリンクにマウスを乗せるとサムネイル画像が表示されます。カチカチ変な音しないしスムーズに表示されるので気に入ってます。今このサイトの外部リンクは全てサムネイルが表示されるようにしてるんで適当にリンクにオンマウスして貰えれば効果が分かると思います。設置方法と効果は大きく分けて２種類あります。
- 別ドメインへのリンクを全てサムネイル表示させる方法
- リンク一つ一つにclassで埋め込む方法
簡単なのは別ドメインへのテキストリンク（サイト内はサムネイル表示されません）全てをサムネイル表示させる方法ですが、場合によっては邪魔になりすぎる場合もあるんで２パターン説明してみます。ちなみにサムネイル表示させる注意点が１つあります。
- リンクに<strong>とか付けてると何故か表示されません。
理由はよく分かりませんが表示されませんでした。取り合えずLink Thumbnailを見れば何となく分かるんですが①のDownloadをクリックしてlinkthumbスクリプトをゲットして下さい。
- arc90_linkthumb.js
- linkpic_shadow.gif
この二つを使います。この二つを好きな場所にアップして下さい。今回はMovable Typeでjsフォルダ、imgフォルダがトップディレクトリにあると想定してみます。まず<head>部分に下記を記述して下さい。
- <head>
- <script type="text/javascript"
- src="<$MTBlogURL$>js/arc90_linkthumb.js"></script>
- ↓↓↓↓↓↓これを入れると全部サムネイル表示↓↓↓↓↓↓
- <script type="text/javascript">
- <!--
- arc90_linkThumbUseClassName = false;
- -->
- </script>
- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
- </head>
次に普段使ってるCSSに下記を加えて下さい。<head>内に入れても良いです。
- .arc90_linkpic {
- display: none;
- position: absolute;
- left: 0;
- top: 1.5em;
- }
- .arc90_linkpicIMG {
- padding: 0 4px 4px 0;
- background: url(画像保存先フォルダ/linkpic_shadow.gif) no-repeat bottom right;
- }
これで終わりです。これ専用にCSSファイル作っても良いですがそれもま~人それぞれって事で。ちなみに【↓↓↓↓↓↓これを入れると全部サムネイル表示↓↓↓↓↓↓】って部分を入れないで個々に設定する場合は<p>タグに囲まれたリンクテキストに、
- <p><a href="http://www.～.～/" class="linkthumb">サイト名</a></p>
を加えてください。ま、Movable Type等のブログであれば勝手に記事書いてるだけで<p>タグが付加されているケースが多いんで大丈夫でしょう。ちなみに<p>タグはarc90_linkthumb.js内でインライン要素にしてくれてるんで勝手に改行も入らないです。
最初はサムネイル画像がキャッシュ化されていないのか、表示されにくいですがすぐ表示されるようになります。他にもSimple APIを使ったのがありましたが私は設置出来ませんでした（謎）
ま、大体あってると思うんで後は試して見てください♪
Posted by kazuking on
2007年02月22日
javascript
