- 2006-10-01
- [カスタマイズ]外部リンク
他のはサブドメインがうまく表示できずグランドトップの画像が作成されていましたが、Mozshotは『そのページ』を画像にしてくれます。
しかもリアルタイムだし。
リアルタイムだけに読み込み時にほんの少し時間がかかってしまいますが、これは全然許容範囲内。
サムネイル画像は、Mozshotで作成です。
これが気に入ったので、『外部リンクのサムネイルを表示する』で表示するサムネイルもMozshotにしてみました。
※この記事を書いた当時はこのままでいけました。
2006/10/27現在、ソースが少し変わっているようです。
変更後のソースの修正については追記をご確認ください。
▼参考
外部リンクのサムネイルを表示する
arc90_linkthumb.js を編集します。
36行目の
m.src = 'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r='+ n;を以下に変更
//m.src = 'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r='+ n;
m.src = 'http://mozshot.nemui.org/shot?'+ h;青文字を、SimpleAPIでの画像作成URLにすればSimpleAPIで作成されたサムネイルで表示されます。
スタイルの変更
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
width: 128px;
height: 128px;
}
.arc90_linkpicIMG {
padding: 0;
/* background: transparent url(http://file.*****.blog.shinobi.jp/linkpic_shadow.gif) no-repeat bottom right;*/
width: 128px;
height: 128px;
}影の画像の使用をやめて、画像のサイズをmozshotに合わせました。
[2006/10/27 追記]
2006/10/27現在、どうもソースが変更されているようです。
以下に2006/10/27現在での修正の仕方を記載します。
※もし、ソースがまた変更されていてこれも使えないよ！できないよ！って事があればコメントいただければと思います。
arc90_linkthumb.js (2006/10/27現在) の、20～23行目に以下が記述されています。
var arc90_linksources = [['http://images.websnapr.com/?url=', 202, 152],
['http://thumbnails.alexa.com/image_server.cgi?size=small&url=', 160, 120],
['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 160, 120]];
var arc90_linksource = 0;
arc90_linksources にサムネイルを作成できるURLと、そのURLで作成される画像サイズがそれぞれ3種類あります。
次の
var arc90_linksource = 0;
で、「0番目のものを使う」と指定しています。
今回のソースは、サムネイルを作成するURLを複数指定でき、その中でどれを使うかを指定するようになっているみたいです。
ではここにMozshotを追加します。
var arc90_linksources = [['http://images.websnapr.com/?url=', 202, 152],
['http://thumbnails.alexa.com/image_server.cgi?size=small&url=', 160, 120],
['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 160, 120],
['http://mozshot.nemui.org/shot?', 128, 128]];
var arc90_linksource = 3;
この例は、arc90_linksources の最後にMozshotを追加し、最初(0番)から数えて3番目なので、arc90_linksource を 3 にしています。
もし、Mozshotしか使わないよ！というのであれば以下でもOK。
var arc90_linksources = [['http://mozshot.nemui.org/shot?', 128, 128]];
var arc90_linksource = 0;
次に arc90_linkthumb.js (2006/10/27現在) の、40行目、
m.src = arc90_linksources[arc90_linksource][0] + n;これを以下に変更します。
m.src = arc90_linksources[arc90_linksource][0] + h;「n と h は何が違うんだ!?」って人は調べてみてください。
「どうでもいいよ、できればいいよ」って人は気にせずこのままで;p
CSSの設定はソース変更前も変更後も変わっていないようなので、CSSに関してはこの記事のままでいけるかと。
もし、「またソースが違ってるよ！」な場合は、コメントをいただければ確認致します。
- Newer: Firefox 閲覧でのエラー
- Older: WEBサイトのサムネイル画像
Comments:10
- なん URL 2007-06-03 (日) 14:50
たびたびすみません。
なるほど、違うサムネイルが表示されることはあるんですね。
自分の設置ミスかと思いましたがこれは共通の症状のようですね。
確かに時間をおくとちゃんと戻ってますのであまり気にせず使おうかと思います。
その他、リンク文字レインボーなどいろいろ参考にさせていただきました。
自分のブログが少し進化したみたいで嬉しいです。
ありがとうございました！- stubborn_brain 2007-06-04 (月) 14:52
そうなんです、たまにあることなので気にしなくていいんじゃないかなーと思います。
いえいえ、こちらこそありがとうございます:)- なん URL 2007-06-02 (土) 21:09
こちらの記事を参考にしてブログをいじりました！
こういうの使いたかったのでとても感謝しています。
リンク部分のサイトにこれを使おうとしてHTMLでちょっと悩みましたが、いろいろなところを読んでなんとか表示されるようになりました！
ありがとうございます。
で、質問なんですが、たまにリンク先と違うサムネイルが表示されてしまうんですが、こういうこともあるんですか？- stubborn_brain 2007-06-03 (日) 12:32
はじめまして。
お役にたてたようでなによりです:)
そうそう、たまに違うサムネイルが表示されてしまうことがありますねー。
これ私には原因がわかりませんデス:(
でもしばらくすると直っていたりしませんか？- すんず 2007-04-06 (金) 00:16
やばいです やばいです
出ました！
本当にありがとうございます！
＞外部リンクのサムネイルを表示する
のコメント欄をコメントした後に読んで、ちょっと焦っていました。教えて君になってるかもしれないと。。。
自分のサイトでも目次のように使えばいい感じになると思って チャレンジしてたんですがなかなかうまく行かずでした
繰り返しますが、本当に感謝してます。
ブログ読ましていただくと、記事の内容も洗練されてますし、たまにお邪魔しようと思ってます。 僕もマルサンCAFFE好きです。
では 失礼いたします。- stubborn_brain 2007-04-06 (金) 11:13
できたようでなによりです。
やばくはないと思いますよ;p
マルサンCAFFE？
ん？
なんでしょう？
なぜでてきたのか不明ですが;p- すんず 2007-04-05 (木) 02:47
こんにちわ はじめまして
かなり参考にさしていただきました。どうもありがとうございます。
自分のHPに組み込みたくて試しているのですが、外部へのリンクは表示されますが自分のHPの別ページへのリンクは表示されないのです？ いろいろ試しても枠すら表示されません。
サーバによってできないとかでしょうか？
ちなみにロリポップを使っています。
何かわかることありましたらご指南いただきたいです。
↓ここでテスト中です
http://www.snz-e.com/wks-flss.html- stubborn_brain 2007-04-05 (木) 11:25
こんにちは、はじめまして。
それはですね、スクリプトの仕様ですね。
「外部リンクのサムネイルを表示する」の記事内で、
『自分のサイト内リンクは class の有無関係なくサムネイルを表示しません。』
と書いているんですが、自サイト内リンクはスクリプトの中でサムネイルを表示しないようになっています。
これは自サイトのサムネイルを表示してもあまり意味がないからじゃないかと思います。
ただ、方法がないわけではありません。
arc90_linkthumb.js の32～33行目付近の
if ((b == '' || h.indexOf(b) < 0) && h.indexOf('://') > 0 && ((arc90_linkThumbUseClassName && a.className.indexOf('linkthumb') >= 0) || !arc90_linkThumbUseClassName)) {
↑この if文を、↓こうすれば
if (((arc90_linkThumbUseClassName && a.className.indexOf('linkthumb') >= 0) || !arc90_linkThumbUseClassName)) {
自サイトへのリンクでも class="linkthumb" が記載されていれば(*)サムネイルが表示されるようになります。
(*)「外部リンクのサムネイルを表示する」の記事内で class="linkthumb" をつける設定にしている場合。
「補足」の箇所で、classをつけない場合の解説があります。
でも・・・。
個人的には自サイトリンクのサムネイルを表示するのは、サイトがウザく見えてしまうのではないかな～と思っちゃったりして・・・。
- Y1S URL 2007-03-07 (水) 00:37
こちらのブログ様の記事を参考に自分のブログに取り入れることが出来ました。
とても便利かつ、かっこいいカスタマイズの紹介、ありがとうございます。
お礼の書込みが不適切な場合、お手数ですが削除をよろしくお願いします。- stubborn_brain 2007-03-07 (水) 13:24
いえいえ、「参考にしました」「使いました」「真似しました」のコメントはけっこう嬉しかったりします:)
こちらこそありがとうございます。- ちかこ URL 2006-12-20 (水) 18:05
ここでいろいろ実装させて頂きます。
- stubborn_brain 2006-12-21 (木) 11:00
はじめまして。
はいぃ、どうぞ～。
現在の忍者ブログの仕様ではとりあえずカスタマイズはこんなものかな～って感じで最近はほとんど更新していませんが、追加機能等が実装されたらまた増えるかもです。
よろしくお願いします。- kisato URL 2006-10-29 (日) 08:08
stubborn_brainさんお墨付きで凄く安心しました:)
それにしても新しい仕様になった場合のことまで書いてくださってるので(頭が下がります)、今この機能を使いたくなった忍ブロの人達にとっても大変参考になりますネ!!
別記事ご紹介の魚拓も随分便利に使えそうデス;)
- stubborn_brain 2006-10-29 (日) 14:45
やー、でも（ソースが違うよと）指摘されない限りはわからなかったのでほったらかし状態だったと思います；
WEBにはいろんなサービスが次々と出てくるので見つけるのも、それを理解して利用するのも大変ですねぇ。
頭が追いつかないデス；- kisato URL 2006-10-28 (土) 11:21
再度ダウンロードしてソース見てみました。
ほんとだ!!変更されてる!!
で、まだ変更前のまま使ってるんですが(前のままのソースのスクリプトのまま)、画像は表示されてるので変更しなくても構わないのでしょうか。- stubborn_brain 2006-10-28 (土) 12:34
じっくりソースを見比べてみたわけではないのですが、おそらくは「サムネイルを作成するURLを指定する部分」が変更になっただけだと思われます。
他になにか機能が追加されたというのであれば、新しい方のスクリプトを使うのもアリだと思いますが、今のところそれもなさそうだし、これまでのものでいいと思います。
ちなみに私も以前のまま使ってたりします;p- すすき 2006-10-28 (土) 00:27
arc90_linksources の最後にMozshotを追加
はだめでしたがMozshotonlyでできました。
ありがとうございました。- stubborn_brain 2006-10-28 (土) 12:32
あら・・・「最後に追加」ではダメでしたか・・・。
一応、私がやってできたものをコピペしたつもりでしたが。。。
でもMozshot onlyでできたようなのでなによりです。
- すすき 2006-10-27 (金) 01:07
ダウンロードしたarc90_linkthumb.jsのなかに
m.src = 'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r='+ n;
って書いてありませんけど・・・
表示はすばらしくすてきだとおもいやってみたかったんですけど・・無理ですね。(^^；)- stubborn_brain 2006-10-27 (金) 12:05
「ソースが変わったのか？」と思って、再度ダウンロードしてみました。
サムネイルを作成するURLを指定するところが変わってますね。。。X(
ちょっと合間見てやってみるのでお待ちください。
#2006/10/27 12:05追記
新しいほうのソースでの修正方法を追記しました。
Trackback+Pingback:5
- TrackBack URL for this entry ※トラックバックは管理人の承認後に表示されます。
- http://shinobibloglab.blog.shinobi.jp/TrackBack/60/
- Listed below are links to weblogs that reference
- 外部リンクのサムネイルをMozshotで from ニンブロラボ.
- Trackback from VineLinuxで自宅サーバ構築 2007-04-07 (土) 13:37
-
外部リンクをサムネイル表示する
ここのサイトを参考に外部リンクのサムネイル表示させてみました。 Mozshot＋ｊａｖａｓｃｒｐｉｔで動作 (more…)
- Trackback from Memo for a Moment 2007-01-05 (金) 08:03
-
リンク先ページのスクリーンショット
SimpleAPIやはてなスクリーンショットを利用してURLで指定したホームページ、サイトのスクリーンショットを取得することができる。これとリンクを組み合わせるとサイトが一目瞭然になっておもしろそうなのでやってみた (more…)
- Trackback from Diary 2006-12-04 (月) 15:03
-
ブログカスタマイズ続行
前回に引き続き、ニンブロラボ．さんの外部リンクのサムネイルをMozshotでの記事を利用させてもらった。やたらとスクリプト増やすのも画面がうるさい動作が重くなりそうだが、面白いものはお遊びで導入していくよ。ほんと、ブログの利点、活用しなきゃね(笑)。タグの追加が面倒だけど、今までのふつーの日記だってやってた・・・なぁ。 そしてもうひとつ、これはHPのほうで導入済みの「Lightbox」をこっちにも入れようと、昨日から格闘。HPの時はわりに簡単だったのよね。ところがうまくいかない。ブログのせい？... (more…)
- Trackback from Bosotto 200X 2006-12-02 (土) 03:12
-
リンク先のサムネイルを表示
ブログカスタマイズ精神に火がつき、昨日のエントリーに続き、再びクールな小技を紹介する。今回のは「外部リンクにカーソルをのせるとリンク先のサムネイルが表示される」という小粋な技。ひとまず「ここ」にカーソルをのせてみてほしい。すぐ下にgoogleトップ画面のスクリーンショットが出てきたかと思う。リンク先に飛ぶ前にスクリーンショットが見えるってのはなんだか安心だ。 (more…)
- Trackback from ニンブロラボ. 2006-10-16 (月) 12:53
-
Thumbnail API
livedoorBlog無料版で外部リンクをサムネイルで表示する 【修正しました】/JavaScript/カスタマイズ/コピペ/ : 下を向いて歩こう また、サムネイル作成サイトもMozshotが不安定なためThumbnail APIに変更しました。残念ながらリアルタイムに画像は作成されませんが一度画像が作成されるとキャッシュされるようです。 上記記事は当ブログの『外部リンクのサムネイルを表示する』と『外部リンクのサムネイルをMozshotで』を参考にしていただいたようです。 私... (more…)
