このページの記事目次 （2012年07月 の記事 3 件）
← 前の月へ 2012年07月 次の月へ →
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）
// var publishedDate = entry.publishedDate;
// var pubDD = new Date(publishedDate);
// yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
// mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
// var pubDate = yy +'年'+ mm +'月'+ dd +'日';
// 表示する部分を整形
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』
の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。
それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--▼▼個別記事ページ▼▼-->
<!--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,
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;
}
3. 関連記事の表示件数設定 は RSS の件数以内で
各カテゴリーのRSSフィード 例えば → ./?xml&category=22 を利用して表示していますので、最大表示件数は 「RSSの設定」 で設定している表示件数以内なら指定可能です。
キーワード検索 ： 関連記事リスト FC2ブログ スマートフォン テンプレート javascript
スポンサーリンク
前回の記事 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』
の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。
それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--▼▼個別記事ページ▼▼-->
<!--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,
blockquote {
margin: 20px 5px 20px 10px;
padding: 10px;
overflow: auto;
background: #f5f5f5;
font-size: 13px;
line-height: 1.3;
border-left: 4px solid #ccc;
}
もしくは ↓ こんな感じの設定でもいいかも。。 私のは大体こんな感じです。 一行分だけ表示して はみ出す部分は ... と省略されます。
実際のページ
.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ブログ スマートフォン テンプレート
スポンサーリンク
カテゴリーの一覧（カテゴリーリスト）は どのサイトでも表示されていると思いますが、それが カテゴリー毎の画像（もしくはアイコン等）になっていたら どのような内容なのか一目で分かるので、文字だけの時よりも目立つようにできますね。
以前、コメントで似たような質問を受けたことがありますが、最近また FC2ユーザーフォーラム でトピックが上がっていたので、それにも回答し 記事に残しておくことにしました。
図は 完成イメージの一例です。
画像部分とテキスト全体をリンクにしてあります。 背景画像を使っているので、サイズ次第で アイコンのようにすることもできますし、一部のカテゴリーを非表示 にすることも簡単です。 （非表示の方法は 「CSS で見えなくする方法」 と、「FC2ブログの仕様と変数を利用し、ソース自体にそのカテゴリーを載せないようにする方法」 があります。）
色々応用できると思いますが、図を例にして 方法を紹介します。
FC2ブログ カテゴリーリストに それぞれの画像を入れる方法
1. プラグイン「カテゴリー」 の 【 HTMLの編集 】
環境設定： プラグインの設定 で 該当するプラグイン の 【 詳細 】 をクリック → プラグインの改造 【 HTMLの編集 】 をクリックで 表示される内容を書き換えます。 プラグインを使わず、テンプレートに直接記入してもOK です。
<ul class="catlist">
<!--category-->
<li class="
cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category-->
</ul>
2. スタイルシートの設定
環境設定： テンプレートの設定 で スタイルシートに以下を追加します。 （テスト中は 複製のテンプレートなどで作業をすると良いと思います。）
/* 画像の大きさが （幅200px） 高さ38px の場合 */
ul.catlist {
list-style:none;
margin:auto 0;
padding:0;
font-size:12px;
}
.catlist li a {
display:block;
margin:0 2px 12px 2px;
padding:40px 2px 0 2px;
color:#999; /* リンクの色を他と変える必要がなければ不要 */
}
.cat24 { background:url(A画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat0 { background:url(http://blog-imgs-53.fc2.com/a/r/i/arinogotokuatumarite/test_cat_img0.png) no-repeat center top; } /* テスト用 */
.cat19 { background:url(C画像のパス) no-repeat center top; } /* カテゴリー名メモ */
.cat20 { background:url(D画像のパス) no-repeat center top; } /* カテゴリー名メモ */
/* 以下同様 */
/* 非表示にしたいカテゴリーがある場合 */
.cat31 { display:none; }
応用： 親子カテゴリーの場合
親子カテゴリーを利用している場合で、親と子に見た目の変化をつけたい場合には 以下のようなソースを利用すると良いと思います。 この場合にも 非表示カテゴリー が利用可能です。
<ul class="catlist">
<!--category-->
<!--category_parent-->
<li class="
c_oya cat<%category_no>"><b><a href="<%category_link>" title="親カテゴリー: <%category_name> へ [ total <%category_count> 件 ]"><%category_name></a></b></li>
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> -<%category_count></a></li>
<!--/category_sub_end-->
<!--/category-->
</ul>
- 親カテゴリー部分のスタイルに c_oya を追加してある以外は 基本形と同じです。
- 必要に応じて li.c_oya { 親カテゴリーの時のスタイル } を追加してください。
この記事では スタイルシートで各カテゴリーの背景画像を設定する方法 を紹介しましたが、背景ではなく 直接画像タグ（<img>）を使うことも可能です。 ここで紹介していないものについては、フォーラムのコメントなどを参考にしてみてください。
キーワード検索 ： 画像 カテゴリー FC2ブログ プラグイン 変数
スポンサーリンク
![【送料無料】0さいー4さい こどもずかん (4冊セット)英語つき [よしだじゅんこ]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d80x80)
共有テンプレート PC用：3作， スマートフォン用：3作， 携帯用：2作 を公開しています。
