■ ピックアップリスト

[全カテ] [NEWS] [VIP] [芸能] [スポーツ] [アニ漫] [ゲーム] [YouTube] [生活] [翻訳] [その他]
全カテゴリー、カテゴリー毎も用意しております

サイト名:旅のろぐ


(1) 基本
当サイトに登録されているRSS情報の中から、最新の100件を対象に8件をランダム表示します。
画像の表示はOGPに画像情報が含まれているサイトのみとなります。
サイズは縦幅は設定可能ですが、横幅は親要素に依存しますので、必要に応じてブロック要素で囲って下さい。
レスポンシブ対応なのでPC、スマホ共にご利用できます。

デフォルト設定では8件表示、黒枠、黒文字、白背景、ランダム表示、高さ50px、画像表示(画像無skip)、一時間内の記事にNEWマークです。
設置したい箇所に下記タグを挿入して下さい。


Sample (枠の右下をドラッグしてお試し下さい)



(2) オプション (必須ではありません)
・plist_max_view : 表示数 (min:1 max:20、default:8)
・plist_img_view : 画像を表示する、無効の場合テキスト表示のみ (無効:0、有効:1、default:1)
・plist_noimg_skip : 画像がないアイテムを表示しない、(無効:0、有効:1、default:1) ※ plist_img_viewの有効が前提
・plist_sort : 並び替え(最新順:0、人気順(クリック数):1、default:0)
・plist_order_limit : 表示対象を100件より狭める、10以上で有効(無効:0、有効:10over、default:0)
・plist_random : ランダム表示(無効:0、有効:1、default:1)
・plist_new_mark : 指定秒数内の記事に「NEW」マークを付ける(有効:秒数、無効:0、default:3600)
・plist_height : 画像1枠の縦幅ピクセル値(min:25、max:250、default:50)、横幅はアスペクト比4:3で自動調節
・plist_add_style : 上書きCSS(背景色、ボーダー、フォントサイズ、行間などの調整用)
	以下 default
	margin-bottom:2px; // 枠と枠との上下隙間調整
	padding:0px; //枠の中の隙間調整
	background-color:white; //背景色
	border-radius:4px; //角の丸さ
	border:1px solid black; //枠の色、太さなど
	color:black; //文字の色
	font-size:15px; //フォントサイズ
	font-weight: normal; //フォントの太さ、重み
	line-height:1.5; //行間調整(複数行の場合、一番下の行が切れる時に調整)

※default値で良い項目は省略出来ます。
※コメントやHTMLタグが入ると上手く動作しない場合があります
設置したい箇所に下記タグを挿入して下さい。


Sample(枠サイズ iphone11 width:414px)

↑を例とした評価順としては(※画像が無い場合は表示されません)
1.登録されている最新100件をplist_sortで人気順にソート
2.表示対象を100件からplist_order_limitで50件に絞る(人気順上位50件が残る)
3.plist_randomで残った50件をシャッフル
4.plist_img_viewで画像表示を選択
5.plist_noimg_skipで画像がないアイテムを除外
5.plist_max_viewに指定された5件を高さ、テキスト色などを指定どおり表示

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




縦幅をdefault以外に変えるとfont-sizeやline-heightを調整しないと右側の文字列が半切れになったりします。
以下に大まかなサイズと調整のサンプルを表示します、参考にして下さい。



Sample(枠サイズ iPad mini width:768px)

縦幅25px、右側の文字列は1行となります





Sample(枠サイズ iPhone12 width:390px)

縦幅はdefaultの50px、文字列は2行となります、画像を非表示にしています。borderを取り消した後に下線だけ設定しました。





Sample(枠サイズ iPhone 13 width:390px)

縦幅75px、右側の文字列は3行となります、画像と枠の間に隙間を設けています。





Sample(枠サイズ iPhone 14 Pro Max width:430px)

縦幅100px、右側の文字列は最大4行となります、角の丸みを強くしています。






- 更新履歴 -
2022/10/04 plist_noimg_skipを有効にしていてもnoimage画像が表示される事がありますが、OGPにnoimage画像が使用されている為です
2022/10/01 アクセス数が増大した為、CDN導入しました。環境により最新データの遅延が発生する場合がございますがご容赦下さい
2022/09/30 ホストをdameparts.comへ変更しました、従来のものでも当面の間は使用可能です(リダイレクトします)
2022/09/26 公開