このページの記事目次 （タグ: 関連記事リスト の検索結果 4 件）
前回の記事 FC2 スマホ用テンプレートに 関連記事リストを追加する方法 では、「スマートフォン用テンプレートでは FC2ブログの関連記事リスト がまだ使えないので、Google Feed API を利用して...」 と書いていたのですが、その投稿翌日には（2012/07/12～ ）仕様が変更されたようで、スマートフォン用テンプレートでも FC2ブログの関連記事リスト が使えるようになっていました。
(^_^;) という訳で、前回の方法ではなくてもOK になりましたので、FC2の変数を使う方法なども 一応紹介しておきます。 前回の方法と殆ど違いはないと思いますが、多少軽くはなるかも。。 好きな方を選んでご利用ください。
上図は「テンプレート変数のみ」としていますが、それ以外の場合（「個別ページの記事下」など テンプレートに自分で変数を追加しない場合）でも利用できます。
FC2ブログ 関連記事リストの設置方法 （スマートフォン版）
1. スマートフォン用テンプレート の表示したい場所に ソースを追加
※「テンプレート変数」 を使う場合のみ追加。
個別記事ページ表示エリア（<!--permanent_area-->） の <!--topentry--> ～ <!--/topentry--> の間に入れておけばOKです。
※「テンプレート変数」 を使わない場合、関連記事リストの設定｜FC2ブログ公式マニュアル に載っているようなソースが 自動で追加されます。 表示場所を選べない上に、PCと同じ表示項目（日付の有無など）になるので、自由度は少し低くなると思います。
<!--relate_list_area-->
<div class="relate_dl">
<ul>
<!--relate_list-->
<li>
<!--relate_entry_other--><a href="<%topentry_relate_url>
&sp "><!--/relate_entry_other--><%topentry_relate_title><!--relate_entry_other--></a><!--/relate_entry_other--></li>
<!--/relate_list-->
</ul>
</div>
<!--/relate_list_area-->
リンクは ?no=記事番号 に張られます。 &sp を追加しておくと ?no=記事番号&sp になりますので、必要に応じて入れてみてください。不要なら削除してOK。 （デフォルトでは入っていませんが、私の共有テンプレートであれば 入れておいた方が自然かも。。）
変数の詳細 や これ以外の設定方法 については以下を参考に
入れる位置のイメージ
スマホ用共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』
それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<!--topentry-->
（中略）
<div id="entry_box">
（中略：記事内容など）
【 自動表示での表示場所 】
<div class="entry_category">
（カテゴリー名）
【 候補地 ：1 】
（コメント数・トラバ数）
</div>
</div><!--/class=entry_box-->
【 候補地 ：2 】
<!--/topentry-->
<!--▲▲個別記事ページ▲▲-->
<!--/permanent_area-->
2. スマートフォン用テンプレート の CSS 一例
※「テンプレート変数」 を使う場合， 使わない場合 共通です。
特に何も設定しなくてもOKですが、共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』 の場合の設定例 を載せておきます。 以下のような項目が入っているので 緑文字部分 のみを スタイルシートに追加してください。
/*================================.relate_dl,
もしくは ↓ こんな感じの設定でもいいかも。。 私のは大体こんな感じです。 一行分だけ表示して はみ出す部分は ... と省略されます。
実際のページ
.relate_dl ul {
margin: 0 !important;
}
.relate_dl 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;
}
キーワード検索 ： 関連記事リスト 変数 FC2ブログ スマートフォン テンプレート
スポンサーリンク
PC用テンプレートでは 定番となった 関連記事リスト（多くは 同じカテゴリーの新着記事などを表示しているもの）、PC用では 管理画面の設定 や FC2の変数を使うことで簡単に利用できるようになりましたが、スマートフォン用テンプレート では その機能がまだ使えません。
そのうち仕様が変わるかな という気がしなくもありませんが、先日 ユーザーさんから 「関連記事を表示できたら...」 と質問がありましたので、その方法を探して2つ試してみました。
追記 （2012/07/12） ：
最終的に 「Google AJAX Feed API 」 を利用して 同一カテゴリーの新着記事を表示する という方法がスッキリしましたので、紹介します。
リストに “表示中の記事” が含まれている場合には 区別できるようにもしてみました。 カテゴリーのRSSフィード と javascript を使っていますが、PC用で使う 関連記事リスト とほぼ同様に使えると思います。
関連記事リストの設置方法 （FC2ブログ スマートフォン版）
1. スマートフォン用テンプレート の表示したい場所に ソースを追加
個別記事ページ表示エリア（<!--permanent_area-->） の <!--topentry--> ～ <!--/topentry--> の間に入れておけばOKです。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var xmlUrl = "<%url>?xml&category=<%topentry_category_no>"; // feedのURL
var setNum = 7; // 表示件数
var setID = "feed"; // 表示させる箇所のID
google.load("feeds", "1");
function initialize() {
var html = '';
var feed = new google.feeds.Feed(xmlUrl);
feed.setNumEntries(setNum);
feed.load(function(result) {
if (!result.error){
var container = document.getElementById(setID);
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var title = entry.title; // 記事タイトル取得
var link = entry.link; // 記事のリンクを取得
// 日付を取得し年月日を整形（使ってないので削除してOK）
// 表示する部分を整形
if(entry.link.match(/blog-entry-<%topentry_no>/)) {
html += '<li>' + title +'</li>';
}
else {
html += '<li><a href="' + link + '
?sp ">' + title +'</a></li>';
// ?sp はお好みで... PC からでもスマホ版で開きたい場合には 入れておく。
}
}
container.innerHTML = html;
}
});
}
google.setOnLoadCallback(initialize);
</script>
<div class="kanrenbox">このカテゴリーの新着記事
<ul id="feed">
<li>読み込み中</li>
</ul>
</div>
// でコメントアウトしている部分 はサンプルでは使っていないので、削除して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』
それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<!--topentry-->
（中略）
<div id="entry_box">
（中略：記事内容など）
<div class="entry_category">
（カテゴリー名）
【 候補地 ：1 】
（コメント数・トラバ数）
</div>
</div><!--/class=entry_box-->
【 候補地 ：2 】
<!--/topentry-->
<!--▲▲個別記事ページ▲▲-->
<!--/permanent_area-->
2. スマートフォン用テンプレート の CSS 一例
特に何も設定しなくてもOKですが、共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』 の場合の設定例 を載せておきます。 以下のような項目が入っているので 緑文字部分 のみを スタイルシートに追加してください。
/*================================.kanrenbox,
もしくは ↓ こんな感じの設定でもいいかも。。 私のは大体こんな感じです。 一行分だけ表示して はみ出す部分は ... と省略されます。
実際のページ
.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;
}
3. 関連記事の表示件数設定 は RSS の件数以内で
各カテゴリーのRSSフィード 例えば → ./?xml&category=22 を利用して表示していますので、最大表示件数は 「RSSの設定」 で設定している表示件数以内なら指定可能です。
キーワード検索 ： 関連記事リスト FC2ブログ スマートフォン テンプレート javascript
スポンサーリンク
2010年9月10日～ このブログで導入した FC2ブログの関連記事リスト 。 過去記事 [ 関連記事リスト が 「変数」 でも出力可能に！ ] にも書いたとおり、「テンプレート変数のみに」 「前後の記事を古い順に」 「5件」 表示するという設定で、<!--permanent_area--> （個別記事ページ） の任意の場所に表示するようにしていたのですが。。。
この影響で 「一覧ページまで 重くなってしまったので、泣く泣く外すことにしました」 という話です。
実は、この関連記事リスト現在の仕様では この時の仕様では（↓ 2010/11/10 追記参照） 「変数 」 を使ってテンプレートに適応させると 「設定したページエリアだけでなく、一覧ページ の表示速度にまで影響を及ぼしてしまう」 という状態なのです。
※あくまでも 変数 を使った場合なので 「個別ページの記事の下」 を選んでいる場合など （変数を適応させないもの） では この影響は受けないようです。
図は Googleウェブマスターツール クロールの統計情報 です。 関連記事リストの適応期間は 9/10 ～ 10/6 朝頃までで、「重くなった」 と自覚もありましたが... グラフを見ても明確。。。
関連記事リストの変数適応 は一覧ページの表示にも影響を及ぼす
関連記事リスト で定義されている 「一覧ページ」 とは<!--page_area--> (含む <!--index_area-->)， <!--date_area-->， <!--tag_area--> なのだそうです。 （※ <!--search_area--> と <!--category_area--> 及び その他のエリア は ここで定義される 一覧ページ には含まれません。）
このことに最初に気付き、FC2さんに確認をとってくれたのは Paroday さんです。
ちなみに、Paroday さんのサイトでは 「変数」 を使って関連記事リスト を出力しています。 意外にも．．．殆ど重さを感じないのですが、テスト用に作られたサンプルブログ を見るとその重さにぞっとしてしまいます。
ちなみに、私もテスト用ブログがあるのですが、そこで実験しても その違いは一目瞭然。 一番残念なのは 記事を表示させていない 「トップページ」 が重くなってしまうことです。 何も表示されない状態で クルクルクルクル待たされる感じ。。。
Parodayさん 曰く、「条件によっては 極端に重くはならないよ・・・」 とのことで、私も 「この程度なら仕方ないかな」 と思っていた時期もあるし、マイナーな記事 や これまで孤立していたような記事 への移動，ページビュー が増えてメリットも感じてはいたのですが 、一旦外して しばらく様子をみることにしました。
関連記事リストの変数、私の要望も結構反映されているんですが．．．残念
重くなる原因は これだけに限った話ではないし、最近は 「軒並み FC2ブログのサーバー負荷が高い」 という報告もあるようなので一時的なものかもしれません。また、いつか。。。
追記 ： 2010/11/10 （画像追加：2010/12/03） 関連記事リスト使用時の表示速度を改善しました。 初回表示のみ遅くなることがあるかもしれませんが、それ以降は快適にご覧いただけます。（@fc2info 2010/11/10）
FC2スタッフさんより 改良の連絡を頂きましたので、再適応してみました♪
キーワード検索 ： 関連記事リスト 変数 FC2ブログ
スポンサーリンク
2010年8月中旬頃～ 試験運用されていた FC2ブログの 関連記事リスト 機能。 8/25 に公式アナウンス があったものですが、コレ ↓ 9/9 に、さらにバージョンアップされました。
変更点は 個別記事の下に自動挿入されるタイプ に加え、一覧ページにも対応可能になったこと、及び 「変数」を使って 任意の場所にも表示できるようになったこと です。
詳しいことは 追って追記予定ですが （←スミ） 、「新変数」 が登場したので、早速この方法を導入してみました。 「同じカテゴリ中の 最新記事を 表示する」 と迷ったのですが、「同じカテゴリ中の 前後の記事を古い順に 表示する 」 と設定してあります。
私の共有テンプレユーザーさんであれば、以下の 黄色背景範囲 をテンプレートの該当場所に入れれば 私と同じ状態のものが利用できます。
※使っている 新変数 は、関連記事リストの設定 （表示順など） を問わず共通です。
<!--permanent_area-->
<!-- ▽ページ移動 (1)▽ -->
<div class="entry_m nextentry">
<!--topentry-->
<!--relate_list_area-->
CATEGORY... この記事を含む前後の記事
<ul>
<!--relate_list-->
<li>
<a href="<%topentry_relate_url>"><%topentry_relate_title> -<%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day></a><!--relate_entry_now_showing--> ««<!--/relate_entry_now_showing--></li>
<!--/relate_list-->
<li style="margin-top:14px"><!--parent_category--><a href="<%topentry_parent_category_link>" title="親カテゴリー : <%topentry_parent_category> へ"><%topentry_parent_category></a> » <!--/parent_category--><a href="<%topentry_category_link>" title="カテゴリー : <%topentry_category> へ"><%topentry_category></a></li>
</ul>
<!--/relate_list_area-->
<!--/topentry-->
</div>
<div class="nextentry">
<!--preventry-->この次の記事 : <a href="<%preventry_url>"><%preventry_title></a><br /><!--/preventry-->
<!--nextentry-->この前の記事 : <a href="<%nextentry_url>"><%nextentry_title></a><br /><!--/nextentry-->
</div>
<!-- △ページ移動（1）△ -->
<!--/permanent_area-->
↑ 上のものは 「記事内の決まった位置以外 に表示したい場合」 に利用します。
ポイント
<!--topentry--> ～ <!--/topentry--> に入れたものは、私のテンプレートでなくても そのまま利用できると思います。 エリア変数 を正しく設定してご利用ください。 （↑ このケースのように、既に エリア変数 が入っている場所 では 不要です。）
<!--relate_list_area--> ～ <!--/relate_list_area--> は、<!--topentry--> と <!--/topentry--> で囲まれている必要があります。カテゴリーページへの移動リンク は 入れても入れなくてもOKです。 親カテゴリーを使っていなくても そのままのソースで利用できます。
※その記事には リンクを張りたくない 場合には、
<!--relate_list-->
<li>
<!--relate_entry_other--><a href="<%topentry_relate_url>"><!--/relate_entry_other--><%topentry_relate_title> -<%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day><!--relate_entry_other--></a><!--/relate_entry_other--><!--relate_entry_now_showing--> ««<!--/relate_entry_now_showing--></li>
<!--/relate_list-->
該当部分を 例えばこんな感じ に書き換えればOKです。
<!--relate_entry_other--> ～ <!--/relate_entry_other-->
<!--relate_entry_now_showing--> ～ <!--/relate_entry_now_showing-->
逆に、記事内の決まった位置（← 拍手ボタンの表示位置の設定 に左右されるようです。）に自動挿入されるもので良ければ、その機能を使うのが一番簡単です。 私のテンプレートであれば そのままでも使えると思いますが、スタイルシートで装飾することも可能です。
いずれにしても、これまではスクリプトを使わなければ実装できなかったことが、スクリプトを使わず 簡単に使えるようになったことは 嬉しい発展ですね！
FC2ユーザーサポート 川野様，他 FC2スタッフ様 ありがとうございました！
追記 （2010/10/04） ：
関連記事リストの出力に 「テンプレート変数」 を利用する場合、その表示エリアに関わらず、一覧ページの表示時間 にも影響が出てしまうようです。 1ページの記事数が多い場合、「記事をランダムに表示する」とした場合など、 条件によっては かなり表示時間が掛ってしまうこともあるようです。
追記 （2010/11/10） ：
FC2スタッフさんより 改良の連絡を頂きましたので、再適応してみました♪
キーワード検索 ： 関連記事リスト 変数 FC2ブログ テンプレート
スポンサーリンク
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
