・サムネイルのサイズの変更 (
"/s140-c/"
の数字を変えると、いろいろできる。)と、
・横4列
に変更してみた。
<ul style="display: inline-block; list-style-type: none; margin: 0; padding: 0;">
<script type="text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postdate = json.feed.entry[i].published.$t;
var pyear = postdate.substring(0,4);
var pmonth = postdate.substring(5,7);
var pday = postdate.substring(8,10);
var pudate = pyear + '/' + pmonth + '/' + pday + '<br />';
var pimgurl;
if (typeof(json.feed.entry[i].media$thumbnail) !== "undefined") {
pimgurl = json.feed.entry[i].media$thumbnail.url;
pimgurl = pimgurl.replace("/s72-c/","/s140-c/");
}else{
pimgurl = "http://1.bp.blogspot.com/xxxxxxxx/logo.jpg";
}
var pimg = '<img src=' + pimgurl + ' width=180>';
var scrw = '145px';
if (window.innerWidth > 320){ scrw = '195px';}
var item = '<li style="display:inline-block; width:' + scrw + '; text-align:center; float:left; ">';
item += '<a href=' + postUrl + '>' + pimg + '<br />' + pudate + postTitle + '</a></li>';
document.write(item);
}
}
</script>
<script src="http://xxxxxxxx.blogspot.jp/feeds/posts/summary?category=xxxxxx&orderby=published&max-results=30&alt=json-in-script&callback=mycallback"></script>
</ul>
赤文字は、適宜変更して下さい。
<li>を使っているので、[作成]モードで編集すると、行がズレて表示できなくなります。
そのときは、[HTML]モードで、行ズレを直して下さい。
追記:20220220 Blogger側の仕様変更で、
画像のURLが、「1.blogspot.com」から「googleusercontent.com」に
変更になった。
で、パラメータの書き方も、変更。
上記のAPIを使うのなら、pimgurl = pimgurl.replace("/s72-c/","/s140-c/");
の後ろに、
pimgurl = pimgurl.replace("s72-w320-h320","s140-w140-h140-l80-c"); が必要。(しないとサムネがボケる)
(画像を含まない投稿時の代替画像のURLも要変更)
0 件のコメント :
コメントを投稿