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

モード変更

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

スポンサーサイト

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

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

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

2012/07/11 (水)  カテゴリー: ブログカスタマイズ中級
関連記事の表示 ,スマートフォン用テンプレート

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

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

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

最終的に 「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です。

それ以外のテンプレートでも 似たような場所があるはずなので探してください。
<!--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,
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の設定」 で設定している表示件数以内なら指定可能です。

RSS 表示件数の設定,FC2ブログ 管理画面

キーワード検索 : 関連記事リスト  FC2ブログ  スマートフォン  テンプレート  javascript  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-225.html

2012/07/11 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-0 Comment

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


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。