Dropchest

FC2ブログのテンプレート制作・カスタマイズをしています。

スポンサーサイト

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

特定カテゴリーの最新記事をサイドバーに表示する方法

特定カテゴリーの最新記事をサイドバーに表示する方法

FC2ブログで特定カテゴリーの最新記事をサイドバーに表示する方法を紹介します。 前提としてHTMLの知識がないと少し難しい内容になっています。

1. Yahoo! Pipesでフィードを作成する

FC2ブログの機能だけでは今回やりたいことはできないのでYahoo! Pipesを使います。 Yahoo! Pipesは指定したページの内容からRSSフィードを作成することができるサービスです。

Pipesの作成画面で↓みたいな感じに作成していきます。

Pipes

1–1. XPath Fetch Page

まず、[Sources] → [Xpath Fetch Page] を追加して、作成したいカテゴリーのURLを指定します。

次に Extract using XPath に記事を指すHTMLをXPathで指定するわけですが、 例えば記事1つのHTMLが

<div class="entry">
    ...
</div>

みたいな感じになってる場合、

//div[@class="entry"]

と入力します。

1–2. Rename & Regex

データが使いやすいように加工します。 上にある画像みたいな感じでリネームしたり、Regexでサムネイル用の画像を小さい画像のURLに直したりして、最後にPipe Outputにつなぎます。

2. プラグインを追加する

FC2ブログの管理画面のほうでフリーエリアのプラグインを追加します。 内容はこんな感じにします。

<ul id="my-category-list"></ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script defer>
;(function(obj, eventType, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(eventType, fn, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('on' + eventType, fn);
  }
}.call(this, window, 'load', function() {
  var doc = document;

  var ul = doc.getElementById('my-category-list');

  var src = 'ここに作ったPipesのJSONフィードのURLを入れる';

  $.getJSON(src + '&_callback=?', function(data) {
    var items = data.value.items;
    $.each(items, function() {
      var li = doc.createElement('li'),
          link = doc.createElement('a'),
          thumb = doc.createElement('img'),
          title = doc.createElement('h4'),
          description = doc.createElement('p');
      link.href = this.link;
      thumb.src = this.thumbnail;
      title.appendChild(doc.createTextNode(this.title));
      description.appendChild(doc.createTextNode(this.description));
      link.appendChild(thumb);
      link.appendChild(title);
      link.appendChild(description);
      li.appendChild(link);
      ul.appendChild(li);
    });
  });
}));
</script>

めんどくさかったのでAJAXにjQuery使ってるけど、DOM操作は速度重視なコードにしてます。大して変わらないだろうけど。

最後にスタイルシートを好きなように書いて完成です!

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