ブログのコメント・トラックバックのURLをMozShot(サムネイル化)でページの画像を表示する方法
- 2008年07月20日 at 10:53
- Comment(6)
- TrackBack(1)
- Seesaa Blog(シーサー ブログ)
HTMLソースを書き加えるだけなので簡単に行うことができます。
また、MozShot(サムネイル化サービス)は無料なので気軽に行うことができます。
今回はコメントには"300x300"（拡大）をトラックバックには"128x128"を使用しました。また、コンテンツの「リンク集」にも"128x128"を対応させました。
Mozshotとは？
Mozshotとは、WebサイトのURLを入力するだけで簡単にページ画像のサムネイル表示をさせることができる無料のウェブサービスです。
サムネイル表示できるツールは「SimpleAPI」や「WebToJpe」がありあますが、私は「Mozshot」が気に入っています。理由は以下の2点、
1.「SimpleAPI」はサムネイル表示の枠線が角丸で表示されるに対し、「Mozshot」は枠線が影付きで表示されるため少しオシャレになります。
2.「SimpleAPI」は、昔のサイト画像がそのまま残ることがあります。これは一度呼び込んだ画像を次回以降のキャッシュで呼び込むためのようです。このため表示は早くなりますが、最初にサムネイル画像を呼び込む際には時間がかかることがあります。
一方、「MozShot」はWebページのURLをリアルタイムに表示させることができます。このため画像を呼び込む際に少し時間かかることがあります。
サムネイル画像のサイズはいずれもタグ内の数値を変えることで拡大縮小できます。カスタマイズページで影無しやキャッシュ呼び込みなどを行うこともできます。
MozShot
タグは以下の通り、
Sample HTML code
<a href="http://mozshot.nemui.org/">
<img alt="" width="256" height="256" border="0" src="http://mozshot.nemui.org/shot/large?http://mozshot.nemui.org/">
</a>
これを利用して、URLの部分を変更すればタイトルの通り、コメントやトラックバックなど変数を利用したURLにも対応させることができます。
また、以下のように雛形化しておけばURLさえわかれば、いつでもサムネイル表示することができます。
256x256:
<a href="URL"><img alt="" width="256" height="256" border="0" src="http://mozshot.nemui.org/shot/large?URL"></a>
128x128:
<a href="URL"><img alt="" width="128" height="128" border="0" src="http://mozshot.nemui.org/shot?URL"></a>
64x64:
<a href="URL"><img alt="" width="64" height="64" border="0" src="http://mozshot.nemui.org/shot/small?URL"></a>
コメントしてくれた方のサイトURLをMozShot(サムネイル化サービス)を利用してウェブサイトの画像（サムネイル）を表示する方法
<div id="comments">内を以下のように変更します。
<a name="comment"></a>
<div class="comments-head">この記事へのコメント</div>
<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
</div>
<% /loop -%>
↓↓↓↓↓
<a name="comment"></a>
<div class="comments-head"><b>この記事へのコメント</b></div>
<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><img alt="<% comment.writer | html | tag_strip %>" title="<% comment.writer | html | tag_strip %>" width="300" height="300" border="0" src="http://mozshot.nemui.org/shot/large?<% comment.homepage | html | tag_strip %>"></a><% /if %>
<div class="comments-post"><b>Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %></b><br /><br /></div>
</div>
<% /loop -%>
トラックバックしてくれた方のサイトURLをMozShot(サムネイル化サービス)を利用してウェブサイトの画像（サムネイル）を表示する方法
この記事へのトラックバック<br />
<% loop:list_individual_article_tb -%>
<hr />
<a href="<% tb.url %>" target="_blank" rel="nofollow"><% tb.title | html %></a><br />
Excerpt: <% tb.excerpt | text_summary | html %><br />
Weblog: <% tb.blog_name | html %><br />
Tracked: <% tb.createstamp | date_format('%Y-%m-%d %H:%M') %><br />
<% /loop -%>
↓↓↓↓↓
<b>この記事へのトラックバック</b><br />
<% loop:list_individual_article_tb -%>
<hr />
<table><tr><td>
<a href="<% tb.url %> target="_blank" rel="nofollow"">
<img alt="" width="128" height="128" border="0"
src="http://mozshot.nemui.org/shot?<% tb.url %>">
</a>
</td><td>
<a href="<% tb.url %>" target="_blank" rel="nofollow"><% tb.title | html %></a><br />
Excerpt: <% tb.excerpt | text_summary | html %><br />
Weblog: <% tb.blog_name | html %><br />
Tracked: <% tb.createstamp | date_format('%Y-%m-%d %H:%M') %><br />
</td></tr></table>
<% /loop -%>
コメントのサムネイル画像を"300x300"に拡大した理由は、コメントしてくれた方に対する気持ちとでもいいましょうか・・・。
コンテンツの「リンク集」にも"128x128"を対応させる
デザイン＞コンテンツ＞リンク集＞コンテンツHTML編集
<div class="sidetitle"><% content.title %></div>
<% content.header -%>
<div class="side">
<% loop:list_link -%>
<a href="<% content_link.url %>" <% if:content_link.target %>target="_blank"<% /if %>><% content_link.title %></a><br />
<% /loop -%>
<% content.footer -%>
</div>
↓↓↓↓↓
<div class="sidetitle"><% content.title %></div>
<% content.header -%>
<div class="side">
<% loop:list_link -%>
<a href="<% content_link.url %>" <% if:content_link.target %>target="_blank"<% /if %>><img alt="<% content_link.title %>" title="<% content_link.title %>" width="128" height="128" border="0" src="http://mozshot.nemui.org/shot?<% content_link.url %>"></a><br />
<a href="<% content_link.url %>" <% if:content_link.target %>target="_blank"<% /if %>><% content_link.title %></a><br />
<% /loop -%>
<% content.footer -%>
</div>
関連サイト
おもしろ便利サイト紹介andフリーソフト【omoroブログ】
| おもしろ便利サイト紹介andフリーソフト【omoroブログ】 おもしろいサイトやフリーソフトが紹介されています。その他ブログのカスタマイズやインターネット全般の気になるネタがアップされています。 |
タグ：ブログ コメント トラックバック MozShot サムネイル化 画像 ウェブサイト
スポンサード リンク
【Seesaa Blog(シーサー ブログ)の最新記事】
