MTブログに関連記事一欄の作り方

当ブログはMovableTypeを利用しているのですが、カスタマイズ性にすぐれているCMSですので、エントリーの直下に関連記事一欄を設置することにしました。
MTブログの関連記事の作り方についてご紹介します。

Movable Typeに関連記事を設置する方法としては、タグ機能を利用する方法がありますが、当ブログではすでに「タグ」をdescriptionの部分で使用しているので、かわりにトラックバック機能を利用することにしました。

他の作り方と比較すると、トラックバックをする手間がかかりますので若干の面倒くささがあります。
けれども、自分で関連性の強い記事同士を結びつけることになので、精度についてはかなり高いものとなりますし、ひいてはSEO対策やユーザビリティーの面でも利点があるものと思うのです。

ただ、トラックバック機能をすでに利用している場合は使えませんので、タグ機能などを利用することをおすすめします。

■作り方の手順

１．まず、「設定 - コミュニケーション」でトラックバック機能を有効にします。
さらに、「URLのnofollow指定」を解除し、承認後に公開する設定にします。

２．次に、下のhtmlが記事の直下に表示されるよう、「個別エントリーのテンプレート」や「ブログ記事の詳細モジュール」などの適当な箇所に組み込みます。

<mt:IfPingsActive>
<div id="trackbacks" class="trackbacks">
<div class="trackbacks-header">関連記事</div>
<ul><mt:Pings>
<li id="ping-<$mt:PingID$>">
<a href="<$mt:PingURL$>"><$mt:PingTitle$></a></li>
</mt:Pings></ul>
</div>
</mt:IfPingsActive>

３．エントリーの方でも「トラックバックを許可」に設定し、関連していると思われる記事から、その記事へトラックバックします。

４．「コメント - トラックバック」の箇所で、トラックバックされたエントリーを公開に設定します。

５．もし、トラックバックＵＲＬがわからない場合は、一旦、エントリーテンプレートの適当な箇所に<$mt:EntryTrackbackLink$>を挿入してみれば分かります。
番号順の規則性がありますので、次からはその番号にトラックバックしましょう。

６．上のhtmlタグはスタイルシートを設定してカスタマイズしましょう。

当ブログでの例

#trackbacks {
padding:0px 10px 0px 10px;
}
#trackbacks ul {
margin: 12px 0px 12px 0px;
}
#trackbacks li {
margin: 3px 0px 3px 14px;
font-size:13px;
}
.trackbacks-header {
background-color:#F0F0F0;
font-weight:bold;
font-size:13px;
color: #000000;
padding:3px 5px 3px 10px;
border:1px solid #cccccc;
}

そうすると、このような関連記事一欄が表示されるはずです。