サラリーマン白書

SimpleAPIを利用してサムネイルを表示させる

まずはSimpleAPIを利用して、Movable Typeのコメントやトラックバックに送信元サイトのサムネイルを表示させるには、下記青字部分を各テンプレートに記述します。ただし、CSS等については各自で修正ください。

送信されたトラックバックにサムネイルを表示

          ：
<div class="trackback-content">
  <p>
    <a href="<$MTPingURL encode_xml="1"$>" title="<MTIfNonEmpty tag="MTPingBlogName"><$MTPingBlogName encode_html="1" remove_html="1"$> - </MTIfNonEmpty><$MTPingTitle$>"><img src="http://img.simpleapi.net/small/<$MTPingURL encode_xml="1"$>" alt="<MTIfNonEmpty tag="MTPingBlogName"><$MTPingBlogName encode_html="1" remove_html="1"$> - </MTIfNonEmpty><$MTPingTitle$>" width="128" height="128" /></a>
    &raquo; <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> <MT_TRANS phrase="from"> <$MTPingBlogName$><br />
    <$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[<MT_TRANS phrase="Read More">]</a>
  </p>
</div>
<p class="trackback-footer">
          ：

送信されたコメントにサムネイルを表示

          ：
<div class="comment-content">
  <MTIfNonEmpty tag="MTCommentURL"><a href="<$MTCommentURL encode_xml="1"$>"><img src="http://img.simpleapi.net/small/<$MTCommentURL encode_xml="1"$>" alt="<$MTCommentAuthor default="Anonymous"$>" width="128" height="128" /></a></MTIfNonEmpty>
  <$MTCommentBody$>
</div>
<p class="comment-footer">
          ：

コメント・プレビューの場合は下記赤字部分のようにMTタグを修正する必要があります。

          ：
<div class="comment-content">
  <MTIfNonEmpty tag="MTCommentPreviewURL"><a href="<$MTCommentPreviewURL encode_xml="1"$>"><img src="http://img.simpleapi.net/small/<$MTCommentPreviewURL encode_xml="1"$>" alt="<$MTCommentPreviewAuthor default="Anonymous"$>" width="128" height="128" /></a></MTIfNonEmpty>
  <$MTCommentPreviewBody$>
</div>
<p class="comment-footer">
          ：

CSS記載例

サムネイルの右側にテキストを回り込ませるためのCSS記載例です。

div.trackback-content img,
div.comment-content img {
  float: left;
}
p.trackback-footer,
p.comment-footer {
  clear: both;
}

Favicon APIを利用してfaviconを表示する

次にFavicon API を利用して、Movable Typeのコメントやトラックバックに送信元サイトのfaviconを表示させるには、下記青字部分を各テンプレートに記述します。ただし、CSS等については各自で修正ください。

送信されたトラックバックにfaviconを表示

          ：
<div class="trackback-content">
  <p>
    <a href="<$MTPingURL encode_xml="1"$>" title="<$MTPingBlogName$>"><img src="http://favicon.aruko.net/m/e/<$MTPingURL encode_xml="1"$>" alt="<$MTPingBlogName$>" width="16" height="16" /></a>
    &raquo; <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> <MT_TRANS phrase="from"> <$MTPingBlogName$><br />
    <$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[<MT_TRANS phrase="Read More">]</a>
  </p>
</div>
<p class="trackback-footer">
          ：

送信されたコメントにfaviconを表示

          ：
<div class="comment-content">
  <MTIfNonEmpty tag="MTCommentURL"><a href="<$MTCommentURL encode_xml="1"$>" title="<$MTCommentAuthor default="Anonymous"$>"><img src="http://favicon.aruko.net/m/u/<$MTCommentURL encode_xml="1"$>" alt="<$MTCommentAuthor default="Anonymous"$>" width="16" height="16" /></a></MTIfNonEmpty>
  <$MTCommentBody$>
</div>
<p class="comment-footer">
          ：

コメント・プレビューの場合は下記赤字部分のようにMTタグを修正する必要があります。

          ：
<div class="comment-content">
  <MTIfNonEmpty tag="MTCommentPreviewURL"><a href="<$MTCommentPreviewURL encode_xml="1"$>" title="<$MTCommentPreviewAuthor default="Anonymous"$>"><img src="http://favicon.aruko.net/m/u/<$MTCommentPreviewURL encode_xml="1"$>" alt="<$MTCommentPreviewAuthor default="Anonymous"$>" width="16" height="16" /></a></MTIfNonEmpty>
  <$MTCommentPreviewBody$>
</div>
<p class="comment-footer">
          ：

CSS記載例

faviconの右側にテキストを回り込ませるためのCSS記載例です。

div.comment-content img {
  float: left;
}
p.comment-footer {
  clear: both;
}

サムネイルとfaviconの両方を表示させるには？

当ブログでは左画像のようにトラックバックでサムネイルとfaviconの両方を表示させるようにしていますが、最後にその方法をご紹介して終わりたいと思います。

といっても基本は先に説明したものを組み合わせているだけで、赤字部分のclass名を追加した以外はほとんど同様となります。具体的には下記例を参考ください。。

          ：
<div class="trackback-content">
  <p>
    <a href="<$MTPingURL encode_xml="1"$>" title="<MTIfNonEmpty tag="MTPingBlogName"><$MTPingBlogName encode_html="1" remove_html="1"$> - </MTIfNonEmpty><$MTPingTitle$>"><img src="http://img.simpleapi.net/small/<$MTPingURL encode_xml="1"$>" alt="<MTIfNonEmpty tag="MTPingBlogName"><$MTPingBlogName encode_html="1" remove_html="1"$> - </MTIfNonEmpty><$MTPingTitle$>" width="128" height="128" class="left" /></a>
    <a href="<$MTPingURL encode_xml="1"$>" title="<$MTPingBlogName$>"><img src="http://favicon.aruko.net/m/e/<$MTPingURL encode_xml="1"$>" alt="<$MTPingBlogName$>" width="16" height="16" /></a>
    &raquo; <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> <MT_TRANS phrase="from"> <$MTPingBlogName$><br />
    <$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[<MT_TRANS phrase="Read More">]</a>
  </p>
</div>
<p class="trackback-footer">
          ：

それに合わせてCSSも下記のように変更します。

div.trackback-content img.left,
div.comment-content img {
  float: left;
}
p.trackback-footer,
p.comment-footer {
  clear: both;
}

もちろんコメントでもサムネイルとfaviconの両方を表示させることは可能でしょうけど、デザインが上手くまとまらなかったので私はやってません。