JavaScript

$(function() {
	$('.pagination').fc2().pager();
});

HTML

<div class="pagination" data-total="<%total_pages>" data-current="<%current_page_num>"></div>

オプション

$(function() {
	$('.pagination').fc2().pager({
		'range': '10', // 表示幅
		'totalData': 'total', // ページ合計用のdata
		'currentData': 'current', // 現在のページ用のdata
		'dataName': 'pagination', // キャッシュ用データ
		'skip': true, // 1ページ目と最後のページのリンクを表示するかどうか
		'prev': "\u00ab", // 前のページへのリンクの文字列
		'next': "\u00bb", // 次のページへのリンクの文字列
		'className': null // <ol>にclassを追加したい場合は指定
	});
});

JavaScript

記事の本文を囲む要素に対してeyecatch()してやります。

$(function() {
	$('.post > .body').fc2().eyecatch();
});

HTML

記事の本文を囲む要素にdata-enoを設定します。

<div class="body" data-eno="<%topentry_no>" data-title="<%topentry_title>">
	<%topentry_body>
	...
</div>

アイキャッチ画像のURLの設定の仕方

記事の本文(追記でなく本文)の中に次のようなタグを記述します。

<aside data-eyecatch="画像URL"></aside>

記事ページ用の画像と他で表示する画像を分けたい場合は、 画像のURLを%%で区切って記述してください。

<aside data-eyecatch="記事ページ用の画像URL%%記事ページ以外の画像URL"></aside>

オプション

$(function() {
	$('.post > .body').fc2().eyecatch({
		'className': 'img-eyecatch', // <img>のclass
		'linkClassName': 'link-eyecatch', // 記事ページへの<a>のclass
		'enoData': 'eno', // 記事番号用のdata
 		'titleData': 'title', // 記事タイトル用のdata
		'dataName': 'eyecatch', // キャッシュ用data
		'fade': false, // アイキャッチ画像をフェードインして表示するかどうか
		'fadeSpeed': 300 // フェードインのスピード(ms)
	});
});

カルーセルの設置 (Bootstrap依存)

簡単なJavaScriptとHTMLコードを追加するだけでアイキャッチと連携したカルーセルを設置することができます。

$(function() {
	$('.carousel').carousel();
});
	

<!--index_area-->
<section id="index-carousel" class="carousel slide fade">
  <div class="carousel-inner">
    <!--topentry-->
    <div class="item" data-target="<%topentry_no>">
      <a href="<%topentry_link>" rel="bookmark" title="<%topentry_title>"><img class="img-eyecatch" alt="<%topentry_title>" /></a>
      <div class="carousel-caption">
        <h4><a href="<%topentry_link>" rel="bookmark"><%topentry_title></a></h4>
        <p><%topentry_discription></p>
      </div>
    </div>
    <!--/topentry-->
  </div>
  <a class="carousel-control left" href="#index-carousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#index-carousel" data-slide="next">&rsaquo;</a>
</section>
<!--/index_area-->