[Blog PC版]『人気記事（画像付）』…画像付き記事ランキングを表示

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

表示イメージ

ブログパーツを使った設定
ブログ設定 の デザイン/ブログパーツ設定 欄にある ブログパーツ のページから設定ができます。

★スマートフォン版ブログに人気記事ランキングを表示する方法はこちら

通常のブログパーツと同様にドラッグで追加したあと、詳細設定が可能です。

独自タグを使った設定

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

使用タグ

<$PopularArticlesWithImageList$>

オプションタグ

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

生成されるタグの構成

<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>

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

記事に画像がない場合は 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("https://livedoor.blogimg.jp/hoge/imgs/1/d/1d60f3dd.png");
/* ↑アップロードした画像のURLに差し替えて下さい */
height: 112px;
width: 150px;
}
</style>

※タグ構成は異なる可能性があります。
※カスタマイズでの不具合はサポート対象外のため、各自責任の元調整をお願いします。

4.設定を反映すると、画像がないときに任意の画像を表示させることができます。

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