ブログパーツか独自タグを使用し、人気記事の画像付きランキングにソーシャルカウントとしてRT(リツイート)数かブログのコメント数を選んで一緒に表示させることができます。
表示イメージ
ブログパーツを使った設定
「ブログ設定」の「デザイン/ブログパーツ設定」欄にある「ブログパーツ」のページから設定ができます。
通常のブログパーツと同様にドラッグで追加したあと、詳細設定が可能です。
独自タグを使った設定
サイドバー以外の任意の場所に表示したい場合などは独自タグを使用します。
※独自タグとは
使用タグ
<$PopularArticlesWithImageList$>
オプションタグ
以下のタグは、<$PopularArticlesWithImageList$>の上に
<SetVar タグ名>ここに指定の値</SetVar>
の形で追記することで詳細設定を行うことができるものです。
| タグ名 | 説明 |
|---|---|
| popularArticlesListWithImageCount | 人気記事表示数 default: 4件 |
| popularArticlesListWithImageWidth | 表示領域の幅 default: 指定無し |
| popularArticlesListWithImageRetweet | RT数を表示 (1: 表示, 0: 非表示) default: 表示 |
| popularArticlesListWithImageComment | コメント数を表示(1: 表示, 0: 非表示) default: 非表示 |
| popularArticlesListWithImagePV | PVを表示 (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>
画像非表示の時のスペースホルダーを追加する記事に画像がない場合は 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>
- 代替用の画像を作ります。 (画像サイズは標準値150px×112px前提で作成しています)
- 代替画像をアップロードし、画像のURLを取得します。
- カスタム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>
※タグ構成は異なる可能性があります。
※カスタマイズでの不具合はサポート対象外のため、各自責任の元調整をお願いします。 - 設定を反映すると、画像がないときに任意の画像を表示させることができます。
※RT(リツイート)数はTwitterのAPIの仕様に基づいてカウントされています。
※期間指定のない独自タグの人気記事は直近7日間のデータを元にして表示しています。
