(1) 基本
当サイトに登録されているRSS情報の中から、最新の100件を対象に8件をランダム表示します。
画像の表示はOGPに画像情報が含まれているサイトのみとなります。
サイズは高さ150px固定、横幅は175pxですが親要素に合わせ多少伸び縮みします。
レスポンシブ対応なのでPC、スマホ共にご利用できます。

設置したい箇所に下記タグを挿入して下さい。
<script type="text/javascript" charset="utf-8" src="//imgrss.com/pbanner/co_1823.js"></script>




(2) オプション
・pbanner_max_view : 表示数 (min:1 max:20、default:8)
・pbanner_noimg_skip : 画像がないアイテムを表示しない(無効:0、有効:1、default:1)
・pbanner_order_limit : 表示対象を100件より狭める、10以上で有効(無効:0、有効:10over、default:0)
・pbanner_sort : 並び替え(最新順:0、人気順(クリック数):1、default:0)
・pbanner_random : ランダム表示(無効:0、有効:1、default:1)
・pbanner_img_height : 画像1枠の縦幅ピクセル値(min:60、max:600、default:150)
・pbanner_img_width : 画像1枠の横幅ピクセル値(min:60、max:600、default:175)
↑数値のみ設定、単位やクォーテーションは不要です。

設置したい箇所に下記タグを挿入して下さい。
※default値で良い項目は省略出来ます。
※コメントやHTMLタグが入ると上手く動作しない場合があります。
<script type="text/javascript"> var pbanner_max_view = 5; var pbanner_noimg_skip = 1; var pbanner_order_limit = 50; var pbanner_random = 1; var pbanner_sort = 1; var pbanner_img_height = 200; var pbanner_img_width = 200; </script> <script type="text/javascript" charset="utf-8" src="//imgrss.com/pbanner/co_1823.js"></script>


↑を例とした評価順としては(※画像が無い場合は表示されません)
1.登録されている最新100件をpbanner_sortで人気順にソート
2.表示対象を100件からpbanner_order_limitで50件に絞る(人気順上位50件が残る)
3.pbanner_randomで残った50件をシャッフル
4.pbanner_noimg_skipで画像がないアイテムを除外
5.pbanner_max_viewに指定された5件を表示
6:指定されたサイズで表示

(※1)ソートについて
pbanner_sortでの人気順はクリック数が基準ですので、pbanner_order_limitで対象を絞ると
最新記事が表示され難くなります。
鮮度が重要なNEWS系、スポーツ系などは最新順で絞る方が向いています。
pbanner_randomを無効にするとソート上位(最新or人気)から順番に固定して表示されます。

(※2)レスポンシブの挙動について
縦幅は固定ですが横幅は親要素にフィットするよう隙間を埋めます。
例えば親要素の横幅が400pxであった場合に
pbanner_max_view = 3;
pbanner_img_width = 150;
と設定した場合、横幅400pxに3枠入らないので
400 - (154px(画像150px+左右マージン4px) × 2) = 92px
この余った92pxを2枠で分け合い一行目の2枠の画像サイズは各width:196pxとなります。
そして2行目は3枠目のみなので3枠目画像はwidth:396pxとなります。