FC2 スマホ用テンプレートに関連記事リストを追加する方法【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

この記事に含まれるタグ（Keyword） :
関連記事リスト FC2ブログスマートフォンテンプレート javascript

FC2 スマホ用テンプレートに関連記事リストを追加する方法

2012/07/11 (水) カテゴリー：ブログカスタマイズ中級

PC用テンプレートでは定番となった関連記事リスト（多くは同じカテゴリーの新着記事などを表示しているもの）、PC用では管理画面の設定や FC2の変数を使うことで簡単に利用できるようになりましたが、スマートフォン用テンプレートではその機能が~~まだ使えません。~~

そのうち仕様が変わるかなという気がしなくもありませんが、先日ユーザーさんから「関連記事を表示できたら...」と質問がありましたので、その方法を探して2つ試してみました。

追記（2012/07/12）：
関連記事リストスマホ用でも動くように変わったようです(^_^;) そのうち.. は翌日でしたｗ

最終的に「Google AJAX Feed API」を利用して同一カテゴリーの新着記事を表示するという方法がスッキリしましたので、紹介します。

リストに “表示中の記事” が含まれている場合には区別できるようにもしてみました。カテゴリーのRSSフィードと javascript を使っていますが、PC用で使う関連記事リストとほぼ同様に使えると思います。

関連記事リストの設置方法（FC2ブログスマートフォン版）

1.　スマートフォン用テンプレートの表示したい場所にソースを追加

個別記事ページ表示エリア（）の  ～  の間に入れておけばOKです。

// でコメントアウトしている部分はサンプルでは使っていないので、削除してOKです。関連記事リストに日付を追加したい場合などにはそれを利用してください。

記事数が少ない場合（50件以下など）や記事番号が変則的になることの多い場合、この条件式 if(entry.link.match(/blog-entry-<%topentry_no>/)) では足りないかもしれませんが、その場合は blog-entry-<%topentry_no>.html まで追加しても良いかも。ただ、テストした感じだと .html まで加えると何故か重くなってしまうようなので、デフォルトでは省略して書いてます。取得できる日付データは 2012年7月7日のような形式で FC2の 2012年07月07日とは形式が異なるので、条件を追加するなら記事タイトルくらいかも。。

入れる位置のイメージ

スマホ用共有テンプレート『sp_custom』『sp_ari_custom』『sp_pattern』
の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。

それ以外のテンプレートでも似たような場所があるはずなので探してください。




（中略）

<div id="entry_box">

（中略：記事内容など）

<div class="entry_category">
（カテゴリー名）
【候補地：1 】
（コメント数・トラバ数）
</div>

</div>

【候補地：2 】





2.　スマートフォン用テンプレートの CSS 一例

特に何も設定しなくてもOKですが、共有テンプレート『sp_custom』『sp_ari_custom』『sp_pattern』の場合の設定例を載せておきます。以下のような項目が入っているので緑文字部分のみをスタイルシートに追加してください。

/*================================
記事装飾（削除可，自由に追加してください）
================================*/

.kanrenbox,
blockquote {
margin: 20px 5px 20px 10px;
padding: 10px;
overflow: auto;
background: #f5f5f5;
font-size: 13px;
line-height: 1.3;
border-left: 4px solid #ccc;
}

もしくは ↓ こんな感じの設定でもいいかも。。私のは大体こんな感じです。一行分だけ表示してはみ出す部分は ... と省略されます。

実際のページ

.kanrenbox ul {
margin: 0 !important;
}
.kanrenbox ul li {
list-style: none;
margin: 10px;
padding-left: 19px;
background: url(リスト用の画像のパス) no-repeat left center;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}