スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

FC2ブログの関連記事リスト自動表示機能を試してみた

結論から言うと私の目的とは一致しないため使わないことにした。試した結果分かったのは、その記事のカテゴリ内の記事を指定した数だけ表示するというもので、この機能自体は今年の8月末頃に追加されていたものらしい(FC2総合インフォメーション | 【ブログ】「関連記事リスト」を追加しました!)。使わないことにしたが折角いろいろと試してみたのでメモしておくことに。

基本設定

管理画面にログインし『環境設定の変更』 → 『ブログの設定』 → 『記事の設定』 → 『関連記事リストの設定』 で好きなように設定する。詳細は記事の設定 | FC2ブログ公式マニュアルを参照。

ただ表示させるだけなら以上終了。

表示形式のカスタマイズ

デフォルトの形式の確認

さてここからが本題。この関連記事リストはFC2テンプレート変数によって自動生成されているので、予めテンプレートに記述しておくことで自由に表示させることができる。その前にデフォルトのマークアップを確認しておく。以下にHTML部分のみ引用する。


<dl class="relate_dl">
    <dt class="relate_dt">関連記事</dt>
    <dd class="relate_dd">
        <ul class="relate_ul">
            <li class="relate_li"><a href="http://exsample.blog999.fc2.com/blog-entry-1.html">記事タイトル1</a></li>
            <li class="relate_li"><a href="http://exsample.blog999.fc2.com/blog-entry-2.html">記事タイトル2</a></li>
            <li class="relate_li"><a href="http://exsample.blog999.fc2.com/blog-entry-3.html">記事タイトル3</a></li>
        </ul>
    </dd>
</dl>
	

公式のものにはこのように各要素にclass属性が指定されているので、スタイルシートに追記・指定する事で見栄えを変更できる。

利用できるテンプレート用変数の確認

関連記事リスト表示用の変数の確認として、以下にテンプレート用変数一覧 | FC2ブログ公式マニュアルより引用する。なお、これらの変数は全てブロック変数 <!--topentry--><!--/topentry--> 内でのみ有効となる。

<!--relate_list_area--> ~ <!--/relate_list_area-->
関連記事がある場合にリストを表示させるブロック。下記のブロック変数(<!--relate_list--> ~ <!--/relate_list-->)を囲むように設置して使用する。
<!--relate_list--> ~ <!--/relate_list-->
関連記事リストを表示させるブロック

<!-- このブロック変数以下で有効になる単変数があるが、ここでは省略する。詳細は上記リンク先を参照のこと。 -->

<!--relate_entry_now_showing--> ~ <!--/relate_entry_now_showing-->
・リストの項目が、現在表示中の記事と同じ場合のみ表示されるブロック。<!--relate_list--> ~ <!--/relate_list-->の中で有効。※関連記事リストで、表示中の項目を装飾する場合などに利用できます。
<!--relate_entry_other--> ~ <!--/relate_entry_other-->
・リストの項目が、現在表示中の記事と同じではない場合のみ表示されるブロック。<!--relate_list--> ~ <!--/relate_list-->の中で有効。※関連記事リストで、表示中の項目をリンクしないまたは除外する場合に利用できます。

変更例

準備


参考画像: 『関連記事リストの設定』のスクリーンショット

まず管理画面の『環境設定の変更』 → 『ブログの設定』 → 『記事の設定』 → 『関連記事リストの設定』 で、関連記事リスト 表示場所の設定項目を リストをテンプレート変数のみに表示する に変更し、その他の設定項目については適宜設定しておく。今回の設定を以下に一覧しておく。

変更例1: リスト形式

デフォルトのdl>ul要素ではなくul要素やol要素のみの場合で、現在の記事を表示させない場合の記述例を以下に示す。


<!--topentry-->
<!--relate_list_area-->
<h3>関連記事リスト(最新5件)</h3>
<ul>
<!--relate_list-->
<!--relate_entry_other-->
<li><a href="<%topentry_relate_url>"><%topentry_relate_title></a> (<%topentry_relate_year>-<%topentry_relate_month>-<%topentry_relate_day>)</li>
<!--/relate_entry_other-->
<!--/relate_list-->
</ul>
<!--/relate_list_area-->
<!--/topentry-->

このブログでは以下のように表示される(リンクは省いている)。

関連記事リスト(最新5件)

変更例2: テーブル形式


<!--topentry-->
<!--relate_list_area-->
<table summary="この表は、この記事と同じカテゴリに属する記事を時系列順に示したものです。左から順に、記事名、投稿年月日を示し、上の記事ほど新しくなります。">
    <caption>関連記事テーブル(最新5件)</caption>
    <tr>
        <th axis="title" scope="col">記事名</th>
        <th axis="publish" scope="col">投稿年月日</th>
    </tr>
<!--relate_list-->
<!--relate_entry_other-->
    <tr>
        <td><a href="<%topentry_relate_url>"><%topentry_relate_title></a></td>
        <td><%topentry_relate_year>-<%topentry_relate_month>-<%topentry_relate_day></td>
    </tr>
<!--/relate_entry_other-->
<!--/relate_list-->
</table>
<!--/relate_list_area-->
<!--/topentry-->

このブログでは以下のように表示される(リンクは省いている)。

関連記事テーブル(最新5件)
記事名投稿年月日
ブログ改装メモ(3) パンくずナビゲーションの実装とFC2ブログにおける問題点2010-11-30
ブログ改装メモ(2) トップページの固定2010-11-24
ブログ改装メモ(1) 計画2010-11-21
jQuery導入メモ2010-10-17
画像表示に便利なスクリプト Highslide JS 導入メモ2010-09-01

その他、見栄えを変更したい場合はスタイルシートで指定する。class属性は必要に応じて適宜設定すればいい(デフォルトのように要素全てに設定しなくてもいいと思うけど)。

さて、メモの割に長くなったが最後に何故この機能を使わないことに決めたのかについて書いておく。関連記事リストと謳われてはいるが、同一カテゴリの記事を表示しているだけなので全く関連のない記事が混ざる場合があること。これは自動生成の仕組上のことで別に文句を言っているわけではないし、記事分類の精度によっても変化するだろうけど、このブログで見ると繋がりの薄い記事が混ざる比率が多くなる。

それに私は元々自分で関連のあると思う記事へのリンクは(内外部問わず)用意するようにしていたこともある。今後楽をするために乗り換えようかとも考えたけど、関係ないリンクを示しておいて『関連記事リスト』とかいう紛らわしいナビゲーションみたいな何かにしたくなかったので今後も手動で書いていく事にした。

きめ細かく分類ができているなら読者に対して文書にとって有用なリンクを提供できると思うので、そういう人にとっては役立つ機能ではないかというのが私の感想。

以上終了。

更新: 2010-12-09T00:00:00+09:00

公開: 2010年12月02日, カテゴリ: ぶろぐいじり