外部リンクのサムネイルを表示する

Comments:19

連 URL 2009-01-24 (土) 09:21

他のテンプレートに変えたら出来ました＾＾；
ご迷惑おかけいたしました。
色々と丁寧にサポートさせていただきありがとうございました。

stubborn_brain 2009-01-26 (月) 23:43

いえいえー、お役に立てたのか立てなかったのかわかりませんが；

連 URL 2009-01-18 (日) 16:52

追記　
エラーの方は見落としがあったので直りました。
すみません。

stubborn_brain 2009-01-20 (火) 10:36

りょうかいしました:-)

連 URL 2009-01-18 (日) 16:43

返事が遅くなってすみません。
ボストンというテンプレートを参考にして画像を変えたりしました。
記述してみると左下に△エラーが出てきてしまっています。
MozShotで画像URLを出したのですがそれはどこに挿入すればいいのでしょうか?
新規記事投稿のソースに入れても画像になるだけですし汗・・・。

stubborn_brain 2009-01-20 (火) 10:39

>MozShotで画像URLを出したのですがそれはどこに挿入すれば
ぬ？？これはどういうことでしょう？
ご質問の意味がわかりませんです；

あと、やっぱりお使いのテンプレートとすんごい相性が悪いようです。
背景を固定にして、エントリー部分やプラグイン部分のみスクロールするようになっていますが、これだとサムネイルを表示する位置がずれてしまうんですね。
そういうテンプレートでもどうにかすればうまく表示できるのかもしれませんが、いろいろと試してみる時間はちょっと取れそうにありません。すみません。
今のテンプレートでうまく表示できたらその方法を逆に私に教えてほしいです;-p

エントリー部分やプラグイン部分のみのスクロールをやめて、ブログを普通(?)の表示にするとサムネイルはうまく表示されるんですよねー…。

お役に立てず申し訳ないです。

連 URL 2009-01-16 (金) 19:01

今晩は。
色々提供してくださってありがとうございました。
申し訳ないのですがダウンロードしてもエラーで開けません。
そのため展開して、プログラムをワードパッドに変えました。
編集してブログのアップロードでアップしてきたという状態です。
その後HTMLテンプレートを記述してきたところなのですが
出てきませんでした。やっぱりstubborn_brainさんに頼っても難しそうです・・・。
せっかくアドバイスしてくださったのに無駄にしてすみません。

stubborn_brain 2009-01-16 (金) 20:00

> ダウンロードしてもエラーで開けません。
> そのため展開して、プログラムをワードパッドに変えました。

ちょっと全然わからないのですが、エラーで開けないってのはなんなんでしょう？
展開してワードパッドに変えた？？とは？？

ダウンロードファイルはzipなので、そのままでは当然テキストエディタでは開けません。
解凍してからテキストエディタで開きます。ワードパッドで開けるのなら他のテキストエディタでも当然開けます。

それと、ブログを確認してみたんですがかなりhtmlとcssがすごいことになっています。
タグが閉じてないとか途中で切れてるとか、cssには全角スペースがあるとか、その他もろもろあってこれではいったい何が悪くてできないのかを探ろうにも探れない状態ではないかと思います。

で、パッと見、サムネイルが表示されてないっぽいですが実は表示されています。
「テスト」で書いている「arc90 lab : tools : Link Thumbnail 」にマウスオーバーするとブラウザにスクロールバーがでると思います。
そのまま「PageDown」キーをおすと画面から見えてない下の方にサムネイルが表示されているんです。

http://file.shinobibloglab.blog.shinobi.jp/sample_van.jpg
↑こんな感じでとんでもないところに表示されています。

サムネイルが表示されている＝スクリプトはきちんと設置されている
表示場所がおかしい＝スタイルシートの問題

なので、htmlとcssをきちんと書けばOKではないかなと思います。

連 URL 2009-01-14 (水) 20:53

またのお返事ありがとうございました。
＞arc90_linkthumb.js を編集します。
と書かれているようですが私のところではなぜかエラーで開けなくて
編集が出来ないのですがどうしたらよいのでしょうか？
英語のサイトにも探してみましたが見当たりませんでした。
失敗連続ということはIEの関係が影響しているのでしょうか?
よろしければアドバイスをください・・・。

stubborn_brain 2009-01-15 (木) 09:56

>私のところではなぜかエラーで開けなくて
>編集が出来ないのですがどうしたらよいのでしょうか？

arc90_linkthumb.js を開くのにエラーがでるって何でしょう？
何で開いてるかわかりませんが、フリーのエディタですと下記あたりがオススメなのでどれかで開いてみてください。

▼for Windows
ez-HTML
TeraPad
窓の杜 - EmEditor

▼for Mac
mi
CotEditor

連 URL 2009-01-13 (火) 22:17

SIMPLE SQUAREというテンプレートを参考にしています。

websnaprの方法をやってみましたところ

var bubbleImagePath = 'http://yourdomain/bg.png';

Also insert your developer key here:

var developerKey = 'key';
3.- Include previewbubble.js in your header.

script type="text/javascript" src="previewbubble.js"/script


4.- Add class="previewlink" attribute to the links you wish to bind the preview event to. For example:

a class="previewlink" href="http://www.cnn.com"CNN/a

<script src="http://yourdomian/previewbubble.js" type="text/javascript"></script>

と現在と違うテンプレートで入れてみました。
keyやdomainは書き換えてあります。
それでもサムネイルが表示されることはなかったようです。
websnaprを削除できるのであれば
stubborn_brainさんの方法でやってみたいのですけれども･･･汗

突然の質問で不快を与えてしまったのでしたら本当にすみません。

stubborn_brain 2009-01-14 (水) 10:48

websnapr は arc90_linkthumb.js がデフォルトで使ってたんですね、失礼しました。

で、えーーと、このコメントでは何をどうしたのかがまったくわからないのですが…。
とりあえず、

>stubborn_brainさんの方法でやってみたい
であれば、この記事の最後にも記載しています、
ニンブロラボ. - 外部リンクのサムネイルをMozshotで
こちらの記事で、サムネイルを Mozshot で表示する方法を試していただけますでしょうか。

連 URL 2009-01-12 (月) 16:35

初めまして。
サムネイルで表示できるとは驚きました。
私もそのように造りたいと思いやってみたのですが思い通りに出来ません。
headの中に
<script language="JavaScript" type="Text/JavaScript" src="http://file.****.blog.shinobi.jp/arc90_linkthumb.js"></script>

<style type="text/css" media="screen">
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
width: 160px;
height: 120px;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: transparent url(http://file.****.blog.shinobi.jp/linkpic_shadow.gif) no-repeat bottom right;
width: 160px;
height: 120px;
}
</style>

<script language="JavaScript" type="Text/JavaScript" src="http://file.****.blog.shinobi.jp/arc90_linkthumb.js"></script>

<script>arc90_linkThumbUseClassName = false;</script>

を入れてみました。しかし、文字リンクのままです。****のところも書き換えてあります。
どなたか提供していただけないでしょうか?

stubborn_brain 2009-01-13 (火) 09:55

こんにちは、ブログを拝見いたしました。

まず、arc90_linkthumb.jsが2つ記載されているので1つを削除しましょう。
…ですが、サムネイル表示に websnapr を使っていらっしゃるようですが、websnapr には websnapr の設置方法があるようなのでこの記事のやりかたではなくそちらのやりかたで設置する方がいいと思います。

リンク先のスクリーンショットを表示するjavascript「websnapr」｜skuare.net

リンク先のプレビューを吹き出し方式のポップアップでサムネイル表示「WebSnapr」:phpspot開発日誌

お試しください。

xandlla URL 2008-05-08 (木) 09:28

お返事ありがとうございます！こんなにすぐお返事頂けるなんて！

今いろいろ試していますが、hight:100%がキモなんでしょうか？
これをautoにしてみると固定が解除されるもののサムネイルはついてくるみたいなんですよね
がんばってみますが、もしお時間に余裕がありましたらお力を貸してください。どうにも分からなくて～；

stubborn_brain 2008-05-17 (土) 18:00

がんばってくださーい。
私の方はちょっと時間がとれそうにないですorz

xandlla URL 2008-05-07 (水) 12:31

はじめてコメントさせていただきます。
色々なスクリプトの使い方など、初心者の私でも分かりやすく説明してあってとても参考になっています。
ありがとうございます。

質問させてください。
下のほうのコメントでritoさんも似たような症状が出ていたようなのですが、

＞表示位置が変になります（画面の中央付近に出て、スクロールしても変わらない）。
＞常にリンクの下に表示するにはどうしたらいいのでしょうか。

私もこの状態になっていて、どうしたらいいのか分からず困っています。

忍者の共有テンプレの「crosswise」というテンプレートをもとに色々改変しているのですが

#mainInner

htmlかCSSでこの指定が普通と違っているせいなのかと勝手に推測しております。
良かったらお知恵を拝借させてください<(_ _)>
かなり前の記事なのにすいません。

stubborn_brain 2008-05-07 (水) 19:06

はじめまして～。
ブログを拝見しました。
FirefoxやSafariでは正常に表示できていますが、IE6ではリンクのサムネイルがスクロールしてもついてきませんねぇ。

まったくもって原因の検討がつかなかったのでいろいろこちらでいじってみました。
そうするとですね、固定表示している部分があやしそうです。
背景の固定表示は関係ないんですが、主にタイトルの固定表示のところが。

CSS内を『expression』で検索すると、body{}のと#mainBlock{}と#TopBlock{}の中にoverflowやらpositionやらと一緒に記載されています。
これらをひとまず削除するとリンクのサムネイルがIE6でも正常に表示されます。
が、タイトルがスクロールしてしまいます。

なので、今お使いのテンプレートでやっている「タイトルの固定表示」ではなくて別の方法でタイトルを固定表示すればよさそうです。

「じゃあ一体どうすれば？」ってのはちょっとまだ時間がなくて私も試していません。
xandllaさんの方でもいろいろと試してみてください。

#…時間があれば私の方でもいろいろ試してみます。
とりいそぎ。

まに URL 2007-05-30 (水) 13:56

こんにちは。こちらの記事で拝見して以来、ずっと試し
てみたいと思っていた外部リンクのサムネイル表示を
やっと設置しました。

設置完了後も投稿済み記事のサムネイルが表示されず
「？」と思いましたが、新規記事と別のサイトへの
リンクでテストしてみたところ問題なく表示されました。
リンク先の問題だったようです。

これでまたちょっぴり私のブログがバージョンアップ
しました。本当にいつもありがとうございます ＾＾

stubborn_brain 2007-05-31 (木) 14:43

お役にたてたようでなによりです:)
リンク先が前もって確認できると何もわからないよりかはちょっと安心できますもんね:)

reva URL 2007-04-27 (金) 22:54

ありがとうございます。他のも試してみます

stubborn_brain 2007-04-28 (土) 15:56

たくさんあるので迷いますよね～。
ご自身で使いやすいものが見つかるといいですね:)

reva URL 2007-04-27 (金) 06:38

始めまして・・
初心者なのです。
一様手順にそってしてみたのですが、表示できるものもあったり出来なかったりするのですが・・FLASHだと表示しないのですか？
アドバイスお願いします。

stubborn_brain 2007-04-27 (金) 12:02

はじめまして。

それは私にはわかりかねます。。。
サムネイルを作成するサービス側とWEBページ、両方の問題かと思われます。

例えば。。。

TheStreetFighters
↑このサイトは、WebSnaprではサムネイルを作成できないようですが、IgWebCapやMozshotなら作成できました。

しかし、
球舞 | フリースタイルフットボール | freestyle football
↑このサイトは、どのサービスを使ってもサムネイルを作成できませんでした。
IgWebCapやMozshotは、できないわけではなくサイトの背景の黄色のみですね。
球舞サイト自体が読み込みを要するものなので・・・。

#さきほどチラっとですが試してみました。

WEBページによってはサムネイルが作成されない場合もあり、サムネイルを作成するサービスも「全てのWEBページのサムネイルを作成できる」というわけではないというか完璧なものはないと思うので、ご自身に合った（気に入った）サービスを使うのがよろしいかと思います。

きくみ URL 2006-10-25 (水) 18:15

よくわかっておらず、失礼なことをしてしまったんですね。
反省します。
すみませんでした。

stubborn_brain 2006-10-25 (水) 18:44

う～～んと、う～～んと・・・。

かなり突き放したような冷たい返信をしたと思っているので、きくみさんの方も不快に感じたかと思います。
以前に「自分でやろうとしてますか？」という記事を書いたときも、これを読まれた方々の中には、
「うん、もっともだ」と思った人もいると思いますし、
「おいおい、こいつは何言ってんだ」と思った人もいると思っています。

そのため、その記事のコメントでも指摘されましたが、質問しづらくしている部分もあるかと思います。

ただ、ある質問に対して何から何まで手取り足取り懇切丁寧にそのものズバリの回答をする対応をしていると、みんながみんな
「ここに質問すれば何でも答えてもらえる」
みたいな感じに思ってしまうと私自身が困ることになるのです。
「自分くらいは・・・」と「みんなが思ってしまう」と私自身が困ることになるのです。

このブログはそんなにアクセスがあるわけではありませんが、それでもこのサイトで質問されたことは私が答える義務があると思っているので、極端に負担がかかるとたぶん私自身がこのブログ自体をやめたくなると思います。

ご自身で調べればわかることはご自身でやってほしいし、調べる努力をしてほしいし、それでもわからないことがあるということも当然わかるのでせめて「どこがわからないのか」の切り分けをできるようになっていただくとありがたいのです。

先の質問は、単純に<!--$comment_homepage_link-->を<!--$comment_url-->に変えればお望みの事ができます。。。

きくみ URL 2006-10-24 (火) 23:02

わたしにはむずかいので無理でした。
ソースを見たとき<a hrefの部分が二重になってたのは確認できましたが、独自タグの中にclass="previewlink"とtarget="_blank"をどういれたらいいかやっぱりわかりませんでした。

stubborn_brain 2006-10-25 (水) 11:36

まず・・・何から書いたらいいのやら・・・なのですが。

> 独自タグの中に
独自タグの中にユーザがタグを入れることはできません。不可能です。
ユーザが書くタグの中に、それに応じた独自タグを使用するのです。

前のコメントの私の返信をよく確認していただいてるのでしょうか。

>忍者ブログには忍者ブログ独自構文解説書というものがあるので、こちらを確認することをおすすめします。
>
><!--$comment_homepage_link-->
>URLが登録されている場合にリンクする
>
><!--$comment_url-->
>コメント投稿者のＵＲＬ

きくみさんが書いている<!--$comment_homepage_link-->の他に、忍者ブログ独自構文解説書の中の数ある独自タグの中から、なぜ私は<!--$comment_url-->を書いているのでしょうか。
こちらを無視あるいはスルーしたのはなぜか逆に質問したいです。


当ブログは、私が記事にしたことについての質問に対しては当然答えていくつもりですが、忍者ブログ特有の独自タグのことを私が全て説明する義務は私にはありません。
誰もが「カスタマイズしたい」と思うのは当たり前ですが、それには多少なりともHTMLやCSSの知識が必要です。
それに「忍者ブログ」というサービスを利用している以上、そのサービス独自のもの──独自タグだとか──を理解することも必要だと思います。

それと、このサイトにきていても自分の必要な記事しか読まないのでしょうか？
下記記事はご覧になりましたか？
マルチポスト
きくみさんはPavさんのところにもコメントしてますよね？
しかもここでコメントした後に。
それがマルチポストだと認識していてやってるのでしょうか。。。

カスタマイズの前にもっと知っておかなければならない事があるような気がしますが・・・・。

きくみ URL 2006-10-24 (火) 18:02

<div class="CommentFooter">の中の
<span class="CommentURL"><!--$comment_homepage_link--></span>を
<span class="CommentURL"><a class="previewlink" href="<!--$comment_homepage_link-->" target="_blank"></a></span>
にしてみたのですがうまくいきませんでした。
ここはどう書いたらいいのでしょうか？
できれば教えて頂きたいです。

stubborn_brain 2006-10-24 (火) 19:31

> うまくいきませんでした
うーん、もう一息でしたね～。
うまくいかなかった時にその部分のソースを確認してみましょう。

<span class="CommentURL"><a class="previewlink" href="<!--$comment_homepage_link-->" target="_blank"></a></span>

↑この部分が、実際に表示されたときにどんなソースになっているか確認してみてください。

忍者ブログには忍者ブログ独自構文解説書というものがあるので、こちらを確認することをおすすめします。

<!--$comment_homepage_link-->
URLが登録されている場合にリンクする

<!--$comment_url-->
コメント投稿者のＵＲＬ

きくみ URL 2006-10-23 (月) 23:32

このサイトのように「コメントとトラックバックにも」のところでclass="linkthumb" をつけておけばサムネイルが表示されるとありますが、設置の仕方がわからなのです。
ＨＴＭＬのソース
<td class="CommentFormTh">URL：</td>
<td class="CommentFormTd"><input class="CommentForms" type="text" name="url" value="<!--$g_cookie_url-->"></td>のどこに入れたらいいのでしょうか？
それとshinobi.jpで作ったＨＰのサムネイルリンク表示はできないのでしょうか？

stubborn_brain 2006-10-24 (火) 10:24

そのソースは『コメント（URL）を入力する』ときのものですよね。
投稿されたコメントを『表示する』ときのソースを確認してみてください。

rito 2006-10-10 (火) 12:40

初めまして。ritoと申します。
何度か拝見させていただいてます。追記やカテゴリクリックなど色々参考にさせていただきました！丁寧に解説してくださっているのでとてもわかりやすいです(^^

質問なのですが、このサムネイルが表示される位置を一定の場所に設定することは出来るのでしょうか。

それとインラインフレーム式だと表示位置が変になります（画面の中央付近に出て、スクロールしても変わらない）。常にリンクの下に表示するにはどうしたらいいのでしょうか。

それではよろしくお願いいたしますm(_ _)m

stubborn_brain 2006-10-10 (火) 14:52

はじめまして。

>質問なのですが、このサムネイルが表示される位置を一定の場所に設定することは出来るのでしょうか。
一定の場所に設定する、、、とは？？
例えば画面の右上だとか右下だとかに固定して表示する。。とかでしょうか？

こちらはCSSやJavaScriptを使えばできると思います。

>それとインラインフレーム式だと表示位置が変になります（画面の中央付近に出て、スクロールしても変わらない）。常にリンクの下に表示するにはどうしたらいいのでしょうか。

具体的にritoさんがどのように指定して、どのような表示になっているのかがわからないのですが、、、

私の方でもインラインフレームで表示しようとしてみましたが、そのままでは表示できません。
インラインフレーム内に表示するHTMLに、スクリプトとCSSを組み込めば普通に表示できました。

こういうことではないのでしょうか・・・？

kisato URL 2006-09-26 (火) 20:21

「BlogPeopleでのリンク」この言葉が気になっていたら、なんとリンク先の新着がわかるようになってるんですね!! 早速登録してみたんですが、リンクのプラグインにjavascriptを入れてみたのですが、これをツリー化することができなくて困ってしまいました。

stubborn_brain 2006-09-27 (水) 10:42

BlogPeopleリストのツリー化はまた違うんです・・・。
記事を書きましたが、説明サイトの紹介です。
詳しく書かれていますよ。

kisato URL 2006-09-23 (土) 22:40

なんと、さっそく書いてくださってありがとうございます!!!
ご紹介のところと見比べてみると、やっぱり自分では出来ないレベルです。助かります。
コメントやラックバックをいただいたときのURL表示ってのもいいですね。。なるほど、全部にやると重くなる～自サイトのは表示しない。。あとでゆっくり取り組んでみます。。

stubborn_brain 2006-09-24 (日) 11:36

自分では記事の内容で合ってると思ってはいるんですが、もしできないとかどこかおかしいとかあれば教えてくださいね。。。
きっと、たぶん、おそらくはいけるはず・・・。

Trackback+Pingback:6

TrackBack URL for this entry ※トラックバックは管理人の承認後に表示されます。

http://shinobibloglab.blog.shinobi.jp/TrackBack/50/

Listed below are links to weblogs that reference

外部リンクのサムネイルを表示する from ニンブロラボ.

Trackback from Bosotto 200X 2006-12-02 (土) 03:12

リンク先のサムネイルを表示

ブログカスタマイズ精神に火がつき、昨日のエントリーに続き、再びクールな小技を紹介する。今回のは「外部リンクにカーソルをのせるとリンク先のサムネイルが表示される」という小粋な技。ひとまず「ここ」にカーソルをのせてみてほしい。すぐ下にgoogleトップ画面のスクリーンショットが出てきたかと思う。リンク先に飛ぶ前にスクリーンショットが見えるってのはなんだか安心だ。 (more…)

Trackback from お米を洗剤で洗うイメージと言われた女Ⅱ 2006-11-25 (土) 10:20

外部リンクをサムネイルで表示

引越しして色々とカスタマイズに挑んでますが これだけがなじぇかうまくできないんですよねぇ・・・   (more…)

Trackback from ニンブロラボ. 2006-10-16 (月) 12:53

Thumbnail API

livedoorBlog無料版で外部リンクをサムネイルで表示する　　【修正しました】/JavaScript/カスタマイズ/コピペ/ : 下を向いて歩こう また、サムネイル作成サイトもMozshotが不安定なためThumbnail APIに変更しました。残念ながらリアルタイムに画像は作成されませんが一度画像が作成されるとキャッシュされるようです。 上記記事は当ブログの『外部リンクのサムネイルを表示する』と『外部リンクのサムネイルをMozshotで』を参考にしていただいたようです。 私... (more…)

Trackback from 下を向いて歩こう 2006-10-15 (日) 17:38

livedoorBlog無料版で外部リンクをサムネイルで表示する

えーと、またカスタマイズネタです。 最近、たまに見かけるのですがリンクの所にポインタを持っていくとリンク先のサイトのサムネイルが表示されるという奴です。 ギミックとしてはかなり派手で面白いと思います。 ニンブロラボ.さんの外部リンクのサムネイルを表示す... (more…)

Trackback from ニンブロラボ. 2006-10-01 (日) 12:03

外部リンクのサムネイルをMozshotで

Mozshot、イイです。 他のはサブドメインがうまく表示できずグランドトップの画像が作成されていましたが、Mozshotは『そのページ』を画像にしてくれます。 しかもリアルタイムだし。 リアルタイムだけに読み込み時にほんの少し時間がかかってしまいますが、これは全然許容範囲内。 ... (more…)

Trackback from kisatonomori blog 2006-09-24 (日) 08:58

外部リンクサムネイル

わーいわーい 外部リンクサムネイルのやり方をニンブロラボの stubborn_brainさんが紹介してくれました >>memo：Ajaxライブラリの記事に Ajaxライブラリのお薦めとして arc90 lab : tools : Link Thumbnailの記事が 紹介されてましたが 忍者でどのように設置するか紹介してくださいました　感謝です やり方はこちら>> 外部リンクのサムネイルを表示する で、私もコメントやラックバックをいただいたときのURL表... (more…)