EDIT

ページャー機能付き最新記事ウィジェット

2019/05/03 ｜2024/01/16 ｜11

全記事遡って表示可能なページャー機能付きの最新記事ウィジェットです。

オリジナルコードを改良して、サムネ画像の WebP 化や loading="lazy" による遅延読み込み仕様になっています。

QooQ、Essential、Emporio でレイアウト調整済です。

ウィジェットの設置

以下のコードを、レイアウト編集ページにて「HTML/JavaScriptガジェット」のコンテンツ内にコピペし、表示させたい位置に設置します。

表示件数を5件以上にするとレイアウトが崩れてしまいますので、<style> 内の
2か所ある#rpcontainerのheightの数値を増やして調整して下さい。

例: 10件にした場合の推奨値

#rpcontainer {
  1130px;
}
@media (max-width: 1024px ) {
  #rpcontainer {
    height: 1530px;
  }
}

var urlblog = ""; は空白のままでも設置されたブログの最新記事が表示されます。
別のブログの URL を入れると、そのブログの記事を表示させることも出来ます。※Blogger 以外のブログは表示できません。

<script>
const numfeed = 5; //表示件数
const charac = 100; //記事概要文字数
const urlblog = ""; //ブログURL(何も入れなくてOK)
let startfeed = 0;
let urlprevious, urlnext;
function arlinafeed(c, d) {
  const a = c.split("<");
  for (let b = 0; b < a.length; b++) {
    if (a[b].indexOf(">") !== -1) {
      a[b] = a[b].substring(a[b].indexOf(">") + 1, a[b].length);
    }
  }
  return a.join("").substring(0, d - 1);
}
function showrecentpostsae(d) {
  let c, e, g, h, i, a = "";
  urlprevious = "";
  urlnext = "";
  for (let b = 0; b < d.feed.link.length; b++) {
    if (d.feed.link[b].rel === "previous") {
      urlprevious = d.feed.link[b].href;
    }
    if (d.feed.link[b].rel === "next") {
      urlnext = d.feed.link[b].href;
    }
  }
  for (let f = 0; f < numfeed && f !== d.feed.entry.length; f++) {
    e = (c = d.feed.entry[f]).title.$t;
    for (let b = 0; b < c.link.length; b++) {
      if (c.link[b].rel === "alternate") {
        g = c.link[b].href;
        break;
      }
    }
    i = "content" in c ? c.content.$t : "summary" in c ? c.summary.$t : "";
    h = "media$thumbnail" in c ? c.media$thumbnail.url : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxIVQEq6xXVGIx0xpJAEYXU2Y94Et6azwn2qk6GG2428pKu5zyJL1z7fW_Axl_yVGGXvOmjJjPRSKVChPVXkIQ5gyFZwsufKkWZzShRffUWJr-rcGNioCa33gq2LGokmCWihp2gNNzATk/s320-e365-rw/noimage.png";
    a += "<a href='" + g + "' title='" + e + "'><div class='recentposarea'>";
    a += "<img loading='lazy' alt='" + e + "' width='160' height='90' src='" + h.replace(/\/s72-.*\//, "/w320-h180-p-rw-e365/").replace(/=s72-.*$/, "=w320-h180-p-rw-e365").replace("default.jpg", "mqdefault.webp").replace("/vi/", "/vi_webp/") + "'/>";
    a += "<div>" + e + "</div>";
    a += "<span>" + arlinafeed(i, charac) + "</span>";
    a += "</div></a>";
  }
  document.getElementById("borpbox").innerHTML = a;
  a = "";
  a += urlprevious ? "<a href='javascript:navigasifeed(-1);' class='previous' title='新しい" + numfeed + "件'>‹ Newer</a>" : "<span class='noactived previous'>‹ Newer</span>";
  a += urlnext ? "<a href='javascript:navigasifeed(1);' class='next' title='古い" + numfeed + "件'>Older ›</a>" : "<span class='noactived next'>Older ›</span>";
  a += "<a href='javascript:navigasifeed(0);' class='home' title='最新" + numfeed + "件'>Top</a>";
  document.getElementById("rpnavigation").innerHTML = a;
}
 
function navigasifeed(c) {
  let a, b;
  if (c === -1) {
    a = urlprevious.indexOf("?");
    b = urlprevious.substring(a);
  } else if (c === 1) {
    a = urlnext.indexOf("?");
    b = urlnext.substring(a);
  } else {
    b = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script";
  }
  incluirscript(b += "&callback=showrecentpostsae");
}
function incluirscript(b) {
  if (startfeed === 1) {
    removerscript();
  }
  document.getElementById("borpbox").innerHTML = "<div id='loadrecentpost'></div>";
  document.getElementById("rpnavigation").innerHTML = "";
  const c = urlblog + "/feeds/posts/default" + b;
  const a = document.createElement("script");
  a.setAttribute("src", c);
  a.setAttribute("id", "arlinalabel");
  document.getElementsByTagName("head")[0].appendChild(a);
  startfeed = 1;
}
function removerscript() {
  const a = document.getElementById("arlinalabel");
  a.parentNode.removeChild(a);
}
onload = function () {
  navigasifeed(0);
};
</script>
 
<div id="rpcontainer">
<div id="borpbox"></div>
<div id="rpnavigation"></div>
</div>
 
<style>
#rpcontainer {
  height: 580px;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2em;
  position: relative;
}
.recentposarea {
  position: relative;
  height: 90px;
  margin-bottom: 20px;
  border-radius: 5px;
  transition: .3s;
  overflow: hidden;
  box-shadow: 1px 1px 2px #ccc;
}
a .recentposarea:hover {
  box-shadow: 5px 5px 8px #ccc;
}
.recentposarea img {
  position: absolute;
  object-fit: cover;
  width: 40%;
  height: 100%;
  border-radius: 5px 0 0 5px;
}
.recentposarea div {
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2;
  color: #333!important;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  height: 2.5em;
  line-height: 1.2;
  left: 42%;
  width: 57%;
  position: relative;
  color: #222!important;
  padding-top: 3px;
}
.recentposarea span {
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 3;
  font-size: 12px;
  line-height: 1.3;
  height: 4.3em;
  overflow: hidden;
  color: #666!important;
  left: 42%;
  width: 57%;
  position: relative;
}
#borpbox a {
  text-decoration: none;
}
#loadrecentpost {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjwJQxRWBVgj0QnVmZFovPNBqgNQkkLs6D_zbZf5Iy76ALKPK_Gz3KXVjWJE2yz7c_abhG7_E7VWLZjmK8DjqSpWQXfhDc2AMY7ZkLqkWCJTgb4zJPOoHMC2wtpO-hMwyG96dqW_-wRsHa/s60-e365-rw/load.gif) 50% 50% no-repeat;
  height: 580px;
}
#rpnavigation {
  position: absolute;
  bottom: 5px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#rpnavigation a {
  color: #fff;
  text-decoration: none;
  background: dodgerblue;
  font-size: .8em;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 3px;
}
#rpnavigation a:hover {
  background: opacity: .8;
}
#rpnavigation .next {
  order: 3;
}
#rpnavigation .previous {
  order: 1;
}
#rpnavigation .home {
  order: 2;
}
#rpnavigation span.noactived {
  color: #666;
  font-size: .8em;
  padding: 2px 5px;
  border: 1px solid transparent;
}
@media (max-width: 1024px ) {
  #rpcontainer {
    height: 780px;
  }
  .recentposarea {
    height: 130px;
  }
  .recentposarea div {
    -webkit-line-clamp: 3;
    height: 3.65em;
    width: 52%;
    left: 47%;
  }
  .recentposarea span {
    padding-top: .7em;
    width: 52%;
    left: 47%;
  }
  .recentposarea img {
    width: 45%;
  }
  #loadrecentpost {
    height: 780px;
  }
}
</style>

2022/09/11 追記: F-light テーマ用カスタムコード

F-lightユーザーの方はこちらのコードをお使いください。

<script>
const numfeed = 5; //表示件数
const charac = 100; //記事概要文字数
const urlblog = ""; //ブログURL(何も入れなくてOK)
let startfeed = 0;
let urlprevious, urlnext;
function arlinafeed(c, d) {
  const a = c.split("<");
  for (let b = 0; b < a.length; b++) {
    if (a[b].indexOf(">") !== -1) {
      a[b] = a[b].substring(a[b].indexOf(">") + 1, a[b].length);
    }
  }
  return a.join("").substring(0, d - 1);
}
function showrecentpostsae(d) {
  let c, e, g, h, i, a = "";
  urlprevious = "";
  urlnext = "";
  for (let b = 0; b < d.feed.link.length; b++) {
    if (d.feed.link[b].rel === "previous") {
      urlprevious = d.feed.link[b].href;
    }
    if (d.feed.link[b].rel === "next") {
      urlnext = d.feed.link[b].href;
    }
  }
  for (let f = 0; f < numfeed && f !== d.feed.entry.length; f++) {
    e = (c = d.feed.entry[f]).title.$t;
    for (let b = 0; b < c.link.length; b++) {
      if (c.link[b].rel === "alternate") {
        g = c.link[b].href;
        break;
      }
    }
    i = "content" in c ? c.content.$t : "summary" in c ? c.summary.$t : "";
    h = "media$thumbnail" in c ? c.media$thumbnail.url : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxIVQEq6xXVGIx0xpJAEYXU2Y94Et6azwn2qk6GG2428pKu5zyJL1z7fW_Axl_yVGGXvOmjJjPRSKVChPVXkIQ5gyFZwsufKkWZzShRffUWJr-rcGNioCa33gq2LGokmCWihp2gNNzATk/s320-e365-rw/noimage.png";
    a += "<a href='" + g + "' title='" + e + "'><div class='recentposarea'>";
    a += "<img loading='lazy' alt='" + e + "' width='160' height='90' src='" + h.replace(/\/s72-.*\//, "/w320-h180-p-rw-e365/").replace(/=s72-.*$/, "=w320-h180-p-rw-e365").replace("default.jpg", "mqdefault.webp").replace("/vi/", "/vi_webp/") + "'/>";
    a += "<h2>" + e + "</h2>";
    a += "<p>" + arlinafeed(i, charac) + "</p>";
    a += "</div></a>";
  }
  document.getElementById("borpbox").innerHTML = a;
  a = "";
  a += urlprevious ? "<a href='javascript:navigasifeed(-1);' class='previous' title='新しい" + numfeed + "件'>‹ Newer</a>" : "<span class='noactived previous'>‹ Newer</span>";
  a += urlnext ? "<a href='javascript:navigasifeed(1);' class='next' title='古い" + numfeed + "件'>Older ›</a>" : "<span class='noactived next'>Older ›</span>";
  a += "<a href='javascript:navigasifeed(0);' class='home' title='最新" + numfeed + "件'>Top</a>";
  document.getElementById("rpnavigation").innerHTML = a;
}
 
function navigasifeed(c) {
  let a, b;
  if (c === -1) {
    a = urlprevious.indexOf("?");
    b = urlprevious.substring(a);
  } else if (c === 1) {
    a = urlnext.indexOf("?");
    b = urlnext.substring(a);
  } else {
    b = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script";
  }
  incluirscript(b += "&callback=showrecentpostsae");
}
function incluirscript(b) {
  if (startfeed === 1) {
    removerscript();
  }
  document.getElementById("borpbox").innerHTML = "<div id='loadrecentpost'></div>";
  document.getElementById("rpnavigation").innerHTML = "";
  const c = urlblog + "/feeds/posts/default" + b;
  const a = document.createElement("script");
  a.setAttribute("src", c);
  a.setAttribute("id", "arlinalabel");
  document.getElementsByTagName("head")[0].appendChild(a);
  startfeed = 1;
}
function removerscript() {
  const a = document.getElementById("arlinalabel");
  a.parentNode.removeChild(a);
}
onload = function () {
  navigasifeed(0);
};
</script>
 
<div id="rpcontainer">
<div id="borpbox"></div>
<div id="rpnavigation"></div>
</div>
 
 <style>
#rpcontainer {
  height: 580px;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2em;
  position: relative;
}
.recentposarea {
  position: relative;
  height: 90px;
  margin-bottom: 20px;
  border-radius: 5px;
  transition: .3s;
  overflow: hidden;
  box-shadow: 1px 1px 2px var(--shadow);
}
a .recentposarea:hover {
  box-shadow: 5px 5px 8px var(--shadow);
}
a .recentposarea:hover.recentposarea h2::before {
  color: var(--sub-brand);
}
.recentposarea img {
  position: absolute;
  object-fit: cover;
  width: 40%;
  height: 100%;
  border-radius: 5px 0 0 5px;
}
.recentposarea h2 {
  color: inherit!important;
  display: flex;
  font-size: 1.6rem;
  font-weight: normal;
  overflow: hidden;
  height: 2.5em;
  line-height: 1.3;
  left: 42%;
  width: 57%;
  position: relative;
  color: var(--color)!important;
}
.recentposarea h2::before {
  content: "\25A0";
  color: var(--brand-light);
  transition: .3s;
}
.recentposarea p {
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 3;
  font-size: 1.2rem;
  line-height: 1.4;
  height: 4.5em;
  overflow: hidden;
  color: var(--dark-color);
  left: 42%;
  width: 57%;
  position: relative;
}
#borpbox a {
  text-decoration: none;
}
#loadrecentpost {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjwJQxRWBVgj0QnVmZFovPNBqgNQkkLs6D_zbZf5Iy76ALKPK_Gz3KXVjWJE2yz7c_abhG7_E7VWLZjmK8DjqSpWQXfhDc2AMY7ZkLqkWCJTgb4zJPOoHMC2wtpO-hMwyG96dqW_-wRsHa/s60-e365-rw/load.gif) 50% 50% no-repeat;
  height: 580px;
}
#rpnavigation {
  position: absolute;
  bottom: 5px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#rpnavigation a {
  color: #fff;
  text-decoration: none;
  background: var(--brand);
  font-size: 1.4rem;
  padding: 2px 8px;
  border-radius: 3px;
}
#rpnavigation a:hover {
  background: var(--brand-light);
}
#rpnavigation .next {
  order: 3;
}
#rpnavigation .previous {
  order: 1;
}
#rpnavigation .home {
  order: 2;
}
#rpnavigation span.noactived {
  color: var(--dark-color);
  font-size: 1.4rem;
  padding: 2px 5px;
  border: 1px solid transparent;
}
@media (max-width: 1024px ) {
  #rpcontainer {
    height: 780px;
  }
  .recentposarea {
    height: 130px;
  }
  .recentposarea h2 {
    height: 4em;
    width: 52%;
    left: 47%;
  }
  .recentposarea p {
    padding-top: .5em;
    width: 52%;
    left: 47%;
  }
  .recentposarea img {
    width: 45%;
  }
  #loadrecentpost {
    height: 780px;
  }
}
</style>

ホームで非表示にする手順

当ブログではこのウィジェットはホームで非表示(記事・固定ページでのみ表示)にしてありますが、この方法を教えてほしいとのコメントを頂きました。他の方の参考になるかもしれないかな、と思いましたので記事内に追記しておきます。

HTML を編集しますので、必ずテーマのバックアップを取ってから行って下さい。

まず、HTML 編集画面にて検索で以下のコードを探します。※ウィジェット名 (最新記事) や id (HTML1) が異なる場合は type='HTML' で検索すると見つけやすいです。

<b:widget id='HTML1' locked='false' title='最新記事' type='HTML'>

このコードに赤文字の部分を追記します。

<b:widget cond='data:view.isSingleItem' id='HTML1' locked='false' title='最新記事' type='HTML'>

ちなみに cond='!data:view.isHomepage' にすると、検索結果ページやトップページの2ページ目以降等も含め、ホーム以外全てで表示されるようになります。

ウィジェット提供元

2020年6月12日現在、Bloggers Origin のサイトがリンク切れになっています。(Internet Archive も残っていません)

~~5+ Recent Posts Widget for Blogger: Latest and Stylish Widgets - Bloggers Origin~~

ふじやん闇に隠れて生きるブロガラーです。
Bloggerer in the Dark.
テーマは一日にして成らず。

Blogger

#カスタマイズ

コメントを投稿

ログインせずにコメントされる場合は、匿名ではなく
名前/URL で何かしら名前を入れて頂けると
他の匿名さんと区別できるので助かります。
URL は空白でも構いません。埋め込みフォームが開きます埋め込みフォームでコメントできない場合はこちらからどうぞ。別ページに移動します

11 件のコメント (新着順)

ふじやん

お役に立てたようで良かったです。
新UIに完全移行されて、もう大きく仕様が変わるようなことはないと思いますが、細かい修正は順次されていくと思いますので、フィードバックを送ってみるのもいいかもしれません。

2020/10/03 12:26

とーげ

回答ありがとうございます！
さっそく試してみた所、HTMLビューのレイアウトの選択からであれば手直しせずにウィジェットで認識されるようです。
Bloggerは最近ころころ仕様が変わる上に使い辛い所もあるので、早めに改善して欲しいですね…

2020/10/03 5:53

ふじやん

とーげさん、お久し振りです。
作成ビューにて⚙アイコンからサイズを変更すると、画像URLのサイズパラメータの部分が例えば w400-h300 というようになるのですが、このパラメータだと、一部のウィジェットで認識されなくなってしまいます。これを回避するには、パラメータを s400 というふうに直せば認識されるようになります。
不具合か仕様変更かはわかりませんが、他にも困っているユーザーが結構いるようですね。
とりあえずの対処法としてはHTMLビューで画像挿入して、手動でサイズ変更するしかないようです。
こちらのインドアの日々さんの記事もご参考になさってみてください。
https://indoor-days.blogspot.com/2020/08/Blogger.QooQ.thumbnail-error.html

2020/10/03 2:10

とーげ

お久しぶりです
最近、記事内に画像が含まれていても最新記事ウィジェットにのみNoImageが表示され続ける現象が起こっていたので自分なりに軽く試してみた所、
画像のサイズ変更機能を使用した画像をこのウィジェットが認識しない？ように見えました
（画像をクリックして歯車マークから変更する機能です）

NoImageが出るようになったのは9月7日の投稿からで、それ以前のサムネイル画像に変化はありませんでした。
(その前の記事が9/1なので正確ではありませんが）

おそらくBlogger側の仕様変更の影響だと思うのですが、対処法はありますか…？
もし既に解決済でどこかに記載されていたら申し訳ないです

2020/10/03 1:06

ふじやん

とーげさん、ご指摘とアドバイスありがとうございますm(_ _)m
早速修正しました！(赤文字にもしてあります)

関連記事ウィジェットで使ってる No Image 画像(横長)を正方形に変換して使い回すつもりでいたのですが、URL を直すのを忘れておりました(~_~;)

また何かお気づきの所がありましたら、遠慮なくツッコミ入れてください(^^)丿

2020/04/27 2:59

とーげ

画像が含まれない記事での表示がおかしくなっていたので確認した所、
HTMLコード内に含まれるURL(画像が無い場合に入る物？）へのリンクが切れているようです。
URL部分も赤字で強調表示と説明をしていただけると自分で画像を用意する時にわかりやすいと思います～

2020/04/27 0:51

ふじやん

お役に立てたようで何よりです(^^)

2020/04/20 13:20

とーげ

ありがとうございます！
自分ではどう変えればいいのか全くわからなかったので、とても助かりました！

2020/04/20 11:55

ふじやん

とーげさん、はじめまして。
たぶん「ホームで非表示」という意味だろうなと解釈しましたが、訂正のコメント頂いたおかげで間違いでないとわかり安心しました(^^)

さて、お尋ねの件ですが、スクショ画像でも説明したかったのと、ひょっとしたら他の方の参考になるかも？と思い、記事に追記してみましたので御覧ください。
ご質問ありましたらまたお気軽にコメントくださいね。

2020/04/20 3:49

とーげ

すみません、日本語がおかしくなってました
ホームを開いている時に最新記事ガジェットを表示しないようにするには
です

2020/04/20 1:46

とーげ

はじめまして
ホームを開いている時に最新記事ガジェットを非表示しないようにするには、
どのように設定すればいいのでしょうか？

2020/04/20 0:04

コメントフォームにジャンプ