記事本文
コメント・トラックバック表示欄にサムネイルを表示してみました
i d e a * i d e a - トラックバックにサイトの縮小画像を入れてみたを参考に、コメント・トラックバック表示欄にサムネイルを表示してみました。 恥ずかしながら Simple API - ウェブサイト・サムネイル化ツール自体を知らなかったので、今更ながら「おおすげー」と感心していたり。 ( 何度かリファラに残っていたのは確認していますが、実際に使ってはいなかったのです。 )
Simple API のサムネイル表示ソースは微妙……
i d e a * i d e a - トラックバックにサイトの縮小画像を入れてみたでは実際のソースや実現方法は書かれていないので、まずは hxxk.jp のサムネイルを作ってみました。
すると、サムネイルを表示するためのソースが
<a href="http://hxxk.jp/"><img src="http://img.simpleapi.net/small/http://hxxk.jp/" alt="" width=128 height=128 hspace=4 vspace=4 align=left border=0></a>
のように表示されました。
HTML 4.01 Transitional ならともかく、 ( 本当はこの言葉自体使いたくありませんが ) Web 2.0 なこの時勢に、いかにも Web 1.0 的なソースだなあと思いました。
- alt 属性の値が未指定
-
HTML 4.01 であろうと XHTML 1.0 であろうと必須です。
- hsapce 属性、 vspace 属性、 align 属性、 border 属性
-
transitional DTD では認められていますが、推奨はされていません。 このあたりは利用者に任せることにして、 Simple API 側では何も指定しなくて良いのではと思います。
ちゃんとテキストが右側に回り込む URL を出力してくれるところが親切。 回り込みの解除は、<br clear="all"> で。
なんていう誤解をしている人が出てきてしまいますし。 ( 完全に間違いではないけど、ちゃんとしたソースとは言えません。 ) - 空要素の閉じ方
-
これはターゲットが HTML であるか XHTML であるかによってこだわるべきか否かが変わりますが、 img 要素は空要素であるため、終了タグの書き方に気を付けなければなりません。 HTML ( というか SGML ) では空要素は終了タグを省略しなければならないのに対し、 XHTML ( というか XML ) では終了タグの省略はできない ( ただし、省略形を用いることがはできる ) ようになっています。 いわゆるブログサービスでは XHTML を用いていることが多いので、
/>形式の閉じ方をしておいた方が良いと思います。 - 属性値の引用符
-
これもターゲットが HTML であるか XHTML であるかによってこだわるべきか否かが変わりますが、属性値を引用符で囲うか囲うわないかという点にも気を付けなければなりません。 HTML ( というか SGML ) では属性値が name token であれば属性値の引用符は省略できるのに対し、 XHTML ( というか XML ) では属性値の引用符の省略はできないようになっています。 ただ、空要素の場合と違い、 HTML で name token である属性値を引用符で囲ってはならないわけではないので、引用符で囲んでおいた方が良いと思います。
よって、 HTML で用いるのなら
<a href="http://hxxk.jp/"><img src="http://img.simpleapi.net/small/http://hxxk.jp/" alt="hxxk.jp" width="128" height="128"></a>
のように、 XHTML で用いるのなら
<a href="http://hxxk.jp/"><img src="http://img.simpleapi.net/small/http://hxxk.jp/" alt="hxxk.jp" width="128" height="128" /></a>
のように記述した方が良いと思います。
hxxk.jp で用いたソース
さて、サムネイル表示ソースを改善したところで、まずは自分のテンプレートに組み込んだ場合のソースをメモ。 Individual Entry Archive のコメント・トラックバック部分を次のような感じにしました。
<MTIfCommentsActive>
<div class="section comment" id="comment-<$MTEntryID$>">
<h4>コメント</h4>
<MTIfNonZero tag="MTEntryCommentCount">
<p>
<$MTEntryCommentCount$> 件のコメントが寄せられています。
<MTEntryIfCommentsOpen>
<a href="<$MTEntryPermalink$>#comment-form-<$MTEntryID$>" title=""<$MTEntryTitle encode_html="1"$>" にコメントを投稿する">コメントを投稿する</a>
<MTElse>
現在、コメント投稿は受け付けていません。
</MTElse>
</MTEntryIfCommentsOpen>
</p>
<MTElse>
<p>
まだコメントは寄せられていません。
<MTEntryIfCommentsOpen>
<a href="<$MTEntryPermalink$>#comment-form-<$MTEntryID$>" title=""<$MTEntryTitle encode_html="1"$>" にコメントを投稿する">コメントを投稿する</a>
<MTElse>
現在、コメント投稿は受け付けていません。
</MTElse>
</MTEntryIfCommentsOpen>
</p>
</MTElse>
<MTComments>
<dl id="c<$MTCommentID$>">
<dt><$MTCommentID$> : <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1" show_email="0"$><MTCommentAuthorIdentity> : <$MTCommentDate format="%Y/%m/%d %H:%M"$></dt>
<dd><MTIfNonEmpty tag="MTCommentURL"><a href="<$MTCommentURL encode_xml="1"$>"><img src="http://img.simpleapi.net/small/<$MTCommentURL encode_xml="1"$>" width="128" height="128" alt="<$MTCommentAuthor default="Anonymous"$>'s website" /></a></MTIfNonEmpty><$MTCommentBody$></dd>
</dl>
</MTComments>
</MTIfNonZero>
</div><!-- div#comment-<$MTEntryID$> END -->
</MTIfCommentsActive>
<MTIfPingsActive>
<div class="section trackback" id="trackback-<$MTEntryID$>">
<h4>トラックバック</h4>
<MTIfNonZero tag="MTEntryTrackbackCount">
<p>
<$MTEntryTrackbackCount$> 件のトラックバックが寄せられています。
<MTIfPingsAccepted>
<a href="<$MTEntryPermalink$>#trackback-form-<$MTEntryID$>" title=""<$MTEntryTitle encode_html="1"$>" にトラックバックを送信する">トラックバックを送信する</a>
<MTElse>
現在、トラックバック送信は受け付けていません。
</MTElse>
</MTIfPingsAccepted>
</p>
<MTElse>
<p>
まだトラックバックは寄せられていません。
<MTIfPingsAccepted>
<a href="<$MTEntryPermalink$>#trackback-form-<$MTEntryID$>" title=""<$MTEntryTitle encode_html="1"$>" にトラックバックを送信する">トラックバックを送信する</a>
<MTElse>
現在、トラックバック送信は受け付けていません。
</MTElse>
</MTIfPingsAccepted>
</p>
</MTElse>
<MTPings>
<dl id="p<$MTPingID$>">
<dt><$MTPingID$> : <cite><a href="<$MTPingURL encode_xml="1"$>"><MTIfNonEmpty tag="MTPingBlogName"><$MTPingBlogName encode_html="1" remove_html="1"$> - </MTIfNonEmpty><$MTPingTitle$></a></cite> : <$MTPingDate format="%Y/%m/%d %H:%M"$></dt>
<dd><p><a href="<$MTPingURL encode_xml="1"$>" title="<$MTPingTitle remove_html="1" encode_html="1"$>"><img src="http://img.simpleapi.net/small/<$MTPingURL encode_xml="1"$>" width="128" height="128" alt="<MTIfNonEmpty tag="MTPingBlogName"><$MTPingBlogName encode_html="1" remove_html="1"$> - </MTIfNonEmpty><$MTPingTitle$>" /></a><$MTPingExcerpt$></p></dd>
</dl>
</MTPings>
</MTIfNonZero>
</div><!-- div#trackback-<$MTEntryID$> END -->
</MTIfPingsActive>これだけではサムネイルに続く <$MTCommentBody$> や <$MTPingExcerpt$> がそのまま配置されてしまうので、 CSS を使ってサムネイルの横に回りこませました。
div.comment img,
div.trackback img {
border : none ;
float : left ; /* <q cite="http://www.w3.org/TR/REC-CSS2/visuren.html#floats" title="Visual formatting model - 9.5 Floats">A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).</q>なので、 img 要素に float プロパティを指定する場合は width プロパティの指定は不要 */
margin-bottom : 1.5em ; /* img 要素の方にも margin-bottom で余裕を持っておかないと、コメントやトラックバックの概要が短いときに、その下のコメントやトラックバックとの隙間が無くなる */
}
div.comment dt,
div.trackback dt {
clear : left ;
margin-top : 1.5em ;
}ノンカスタマイズの Movable Type 3.2-ja-2 のテンプレートに適用するソース
次に、ノンカスタマイズの Movable Type 3.2-ja-2 のテンプレートに組み込む場合のソースも考えてみます。 エントリー・アーカイブのコメント・トラックバック部分 ( 64 行目～ 168 行目 ) を次のように書き換えてください。 なお、実際の weblog 上でのテストは行っていませんが、前項の時にうまく行ったので、大丈夫だと思います、たぶん。
<MTIfPingsActive>
<div class="trackbacks">
<h3 id="trackback" class="trackbacks-header">トラックバック</h3>
<div id="trackbacks-info">
<MTIfPingsAccepted><p>このエントリーのトラックバックURL: <br /><$MTEntryTrackbackLink$></p></MTIfPingsAccepted>
</div>
<div class="trackbacks-content">
<MTPings>
<MTPingsHeader>
<p>この一覧は、次のエントリーを参照しています: <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>:</p>
</MTPingsHeader>
<a id="p<$MTPingID pad="1"$>"></a>
<div class="trackback" id="ping-<$MTPingID$>">
<div class="trackback-content">
<p>
» <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> from <$MTPingBlogName$><br />
<a href="<$MTPingURL encode_xml="1"$>" title="<$MTPingTitle remove_html="1" encode_html="1"$>" rel="nofollow"><img src="http://img.simpleapi.net/small/<$MTPingURL encode_xml="1"$>" width="128" height="128" alt="<MTIfNonEmpty tag="MTPingBlogName"><$MTPingBlogName encode_html="1" remove_html="1"$> - </MTIfNonEmpty><$MTPingTitle$>" /></a><$MTPingExcerpt$>
</p>
</div>
<p class="trackback-footer">
トラックバック時刻: <a href="#ping-<$MTPingID$>"><$MTPingDate$></a>
</p>
</div>
</MTPings>
</div>
</div>
</MTIfPingsActive>
<MTIfCommentsActive>
<div id="comments" class="comments">
<div class="comments-content">
<MTComments>
<MTCommentsHeader><h3 class="comments-header">コメント</h3></MTCommentsHeader>
<a id="c<$MTCommentID pad="1"$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">
<div class="comment-content">
<MTIfNonEmpty tag="MTCommentURL"><a href="<$MTCommentURL encode_xml="1"$>"><img src="http://img.simpleapi.net/small/<$MTCommentURL encode_xml="1"$>" width="128" height="128" alt="<$MTCommentAuthor default="Anonymous"$>'s website" /></a></MTIfNonEmpty><$MTCommentBody$>
</div>
<p class="comment-footer">
投稿者:
<$MTCommentAuthorLink default_name="Anonymous"$> <$MTCommentAuthorIdentity$> |
<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a>
</p>
</div>
</MTComments>
</div>
<MTEntryIfCommentsOpen>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">コメントを投稿</h2>
<div class="comments-open-content">
<script type="text/javascript">
<!--
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
//-->
</script>
<MTIfCommentsModerated>
<p class="comments-open-moderated">
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
</p>
</MTIfCommentsModerated>
<div id="comments-open-data">
<div id="name-email">
<p>
<label for="comment-author">名前: </label>
<input id="comment-author" name="author" size="30" />
</p>
<p>
<label for="comment-email">メールアドレス: </label>
<input id="comment-email" name="email" size="30" />
</p>
</div>
<p>
<label for="comment-url">URL: </label>
<input id="comment-url" name="url" size="30" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
この情報を登録しますか?</label>
</p>
</div>
<p id="comments-open-text">
<label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="10" cols="30"></textarea>
</p>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" />
<input type="submit" accesskey="s" name="post" id="comment-post" value="投稿" />
</div>
</div>
</div>
</form>
</MTEntryIfCommentsOpen>
</div>
</MTIfCommentsActive>サムネイルに続く <$MTCommentBody$> や <$MTPingExcerpt$> をサムネイルの横に回りこませたい場合は、 CSS のテンプレートに次のように記述。
div.trackback-content img,
div.comment-content img {
border : none ;
float : left ; /* <q cite="http://www.w3.org/TR/REC-CSS2/visuren.html#floats" title="Visual formatting model - 9.5 Floats">A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).</q>なので、 img 要素に float プロパティを指定する場合は width プロパティの指定は不要 */
margin-bottom : 1.5em ; /* img 要素の方にも margin-bottom で余裕を持っておかないと、コメントやトラックバックの概要が短いときに、その下のコメントやトラックバックとの隙間が無くなる */
}
div.trackback,
div.comment {
clear : left ;
margin-top : 1.5em ;
}メリットとデメリット
コメント・トラックバック表示欄にサムネイルを配置する場合のメリット・デメリットは次のような感じでしょうか。 あまり深く考察していないので、まだまだあるかもしれません。
- メリット
-
- 誰からのコメントか、どこからのトラックバックが容易に判別できる
- SpamLookup が、万一海外のポルノサイトからの SPAM トラックバックを取りこぼしても、うっかりクリックしちゃう可能性が減
- 文字ばかりになりがちな weblog に彩りが !
- 誰からのコメントか、どこからのトラックバックが容易に判別できる
- デメリット
-
- 画像を外部 API から取得して表示する分、サイズ的にも表示時間的にも重くなる
- SimpleAPI開発日記 » SimpleAPIシリーズ第１弾 サムネイル生成ツール利用上の注意につきましてによると、
1ページあたりの新規生成サムネイルが5枚を超える場合、ページの表示がもたつくことがございます
とのことなので、コメントやトラックバックが頻繁に寄せられる weblog には向かない
サムネイルが煩わしいと思う貴方に
このサムネイル表示は私が便利だ ! と思って導入したもので、閲覧者の視点で導入したわけではありません。 「勝手に重くすんなよ、うぜー」という場合は次のような方法で無効化することができます。
- Firefox の拡張機能 "Adblock Plus" で非表示にする
-
はてなのプロフィール画像によって表示は遅くなるのかという検証と、プロフィール画像を非表示にするいくつかの方法 - Firefox の拡張機能 "Adblock Plus" で非表示にするで紹介した方法です。 フィルタに http://img.simpleapi.net/small/* と指定すれば、 Simple API によるサムネイルへの HTTP Request を行わなくなり、これまでと変わらぬページ表示時間となります。 ( これは hxxk.jp に限らず、全てのサイトでの Simple API によるサムネイルに適用されます。 )
- ユーザ CSS で非表示にする
-
はてなのプロフィール画像によって表示は遅くなるのかという検証と、プロフィール画像を非表示にするいくつかの方法 - ユーザ CSS で非表示にするで紹介した方法です。
body#hxxk.jp div.comment img, body#hxxk.jp div.trackback img, { display : none ; }ユーザ CSS にこのように記述すれば、サムネイルを非表示にします。 この例では hxxk.jp 内のサムネイル画像のみを非表示にしますが、記述を工夫すれば他の weblog にも適用できます。 なお、非表示にするだけで HTTP Request 自体は行うため、ページの表示が遅くなる問題は解消できません。
トラックバック送信先
- i d e a * i d e a - トラックバックにサイトの縮小画像を入れてみた
-
i d e a * i d e a のアイデアを参考に、実際にサムネイル画像を配置するためのテンプレート記述例を書きました。 併せて、コメント欄のコメンターの weblog のサムネイルも表示する例も書いています。
をよく見ると、日本語で「ビール」と書いてあるんですよね。
ショップのカタログを見るとメーカー直輸入と書いてあるので、日本向けということでそういうラベルにしているのかなあ。
