ブログパーツか独自タグを使用し、人気記事の画像付きランキングにソーシャルカウントとしてRT(リツイート)数かブログのコメント数を選んで一緒に表示させることができます。

表示イメージ

ブログパーツを使った設定

「ブログ設定」「デザイン/ブログパーツ設定」欄にある「ブログパーツ」のページから設定ができます。
ninki02
通常のブログパーツと同様にドラッグで追加したあと、詳細設定が可能です。

独自タグを使った設定


サイドバー以外の任意の場所に表示したい場合などは独自タグを使用します。
※独自タグとは

使用タグ
<$PopularArticlesWithImageList$>

オプションタグ

以下のタグは、<$PopularArticlesWithImageList$>の上に
<SetVar タグ名>ここに指定の値</SetVar>
の形で追記することで詳細設定を行うことができるものです。

タグ名説明
popularArticlesListWithImageCount人気記事表示数 default: 4件
popularArticlesListWithImageWidth表示領域の幅 default: 指定無し
popularArticlesListWithImageRetweetRT数を表示 (1: 表示, 0: 非表示) default: 表示
popularArticlesListWithImageCommentコメント数を表示(1: 表示, 0: 非表示) default: 非表示
popularArticlesListWithImagePVPVを表示 (1: 表示, 0: 非表示) default: 非表示
popularArticlesListWithImageImageWidthイメージの横幅 default: 150px
popularArticlesListWithImageImageHeightイメージの縦幅 default: 112px
popularArticlesListWithImageForegroundColor文字色(カラーコード・色名で指定)
popularArticlesListWithImageBackgroundColor背景色(カラーコード・色名で指定)
popularArticlesListWithImageRangeType
人気記事取得の期間
custom … カスタム(FromとRangeの指定が必要)
week0 … 今週分
week1 … 先週分
week2 … 先々週分
month0 … 今月分
month1 … 先月分
popularArticlesListWithImageFrom
n日前から (RangeTypeがcustomの場合) default: 0
(0=今日、最大70日まで指定可能)
popularArticlesListWithImageRange
n日間 (RangeTypeがcustomの場合) default: 0
(0=当日のみ、1=当日と前日、6=一週間分、最大35日まで指定可能)

生成されるタグの構成
<div class="popularArticlesWithImage tag A" id="...">
 <ul>
   <li class="popularArticleWithImage">
    <div>
    <a href="..." target="_blank">
     <div class="image"><img src="..." alt=""/></div>
     <div class="title"><%== article.title %></div>
     <div class="retweet" id="...">150RT</div>
     <div class="comment" id="...">150コメント</div>
    </a>
   </div>
  </li>
 </ul>
</div>

TIPS 画像非表示の時のスペースホルダーを追加する

記事に画像がない場合は class="image" に noimage クラスが追加されます。
noimage クラスに代替画像になるイメージを設定することで任意の画像を表示させることができます。
画像が取得できなかった時のタグ構成

<div class="popularArticlesWithImage tag A" id="...">
 <ul>
   <li class="popularArticleWithImage">
    <div>
    <a href="..." target="_blank">
     <div class="image noimage"><img src="..." alt=""/></div>
     <div class="title"><%== article.title %></div>
     <div class="retweet" id="...">150RT</div>
     <div class="comment" id="...">150コメント</div>
    </a>
   </div>
  </li>
 </ul>
</div>
  1. 代替用の画像を作ります。 (画像サイズは標準値150px×112px前提で作成しています)
  2. 代替画像をアップロードし、画像のURLを取得します。
  3. カスタムJS機能を使い、独自のCSSを追加します。
    CSSサンプル

    <style tyle="text/css">
    div.popularArticlesWithImage.A li div.image.noimage {
      background-image: url("http://livedoor.blogimg.jp/hoge/imgs/1/d/1d60f3dd.png");
      /* ↑アップロードした画像のURLに差し替えて下さい */
      height: 112px;
      width: 150px;
    }
    </style>

    ※タグ構成は異なる可能性があります。
    ※カスタマイズでの不具合はサポート対象外のため、各自責任の元調整をお願いします。
  4. 設定を反映すると、画像がないときに任意の画像を表示させることができます。
    0a2e9098efc4a0cc389ab67d823cfc9a

※RT(リツイート)数はTwitterのAPIの仕様に基づいてカウントされています。
※期間指定のない独自タグの人気記事は直近7日間のデータを元にして表示しています。