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

2024/10/1711
アイキャッチ

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

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

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

最新記事ウィジェット
CONTENTS

ウィジェットの設置

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

表示件数を5件以外にするとページャーの位置がズレてしまいますので、<style> 内の
2か所ある#rpcontainerheightの数値で調整して下さい。

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

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

const 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;
min-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;
min-height: 0;
overflow: hidden;
color: #666!important;
left: 42%;
width: 57%;
position: relative;
}
#borpbox a {
text-decoration: none;
}
#loadrecentpost {
border: 4px solid #666;
border-top-color: transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin .7s linear infinite;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 40px);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#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: 0 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%;
}
}
</style>

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

最新記事ウィジェット(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;
min-height: 0m;
overflow: hidden;
color: var(--dark-color);
left: 42%;
width: 57%;
position: relative;
}
#borpbox a {
text-decoration: none;
}
#loadrecentpost {
border: 4px solid var(--dark-color);
border-top-color: transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin .7s linear infinite;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 40px);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#rpnavigation {
position: absolute;
bottom: 5px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#rpnavigation a {
color: var(--brand-font);
text-decoration: none;
background: var(--brand);
font-size: .8em;
line-height: 1.4;
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: 0 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%;
}
}
</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 のサイトがリンク切れになっています。(Wayback Machine にも残っていません)

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