グーグルブロガーにはデフォルトでこのページャナビゲーションが装備されていませんが、このコードを教えてる数少ないブログを見つけました。令和3年の現時点で、ページャーナビゲーションは更新しているので、新たな変更点と元に戻す作業などが必要になってるので、ご覧になってください。
コードを貼り付け
以下のコードを、テーマのHTML編集ページにて </body> の上にコピペします。
<!--番号ページャー-->
<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>
<script>
//<![CDATA[
const postperpage=10;
//設定している1ページ当たりの表示件数に合わせて下さい
const numshowpage=5; //表示ボタン数
const upPageWord="<"; //次のページアイコン
const downPageWord=">"; //前のページアイコン
const home_page="/";let
nopage,jenis,nomerhal,lblname1,urlactivepage=location.href;function
loophalaman(a){let
e="";nomerkiri=parseInt(numshowpage/2),nomerkiri==numshowpage-nomerkiri&&(numshowpage=2*nomerkiri+1),mulai=nomerhal-nomerkiri,mulai<1&&(mulai=1),maksimal=parseInt(a/postperpage)+1,maksimal-1==a/postperpage&&(maksimal-=1),akhir=mulai+numshowpage-1,akhir>maksimal&&(akhir=maksimal),e+="<span
class='showpageOf'>Page "+nomerhal+" of
"+maksimal+"</span>";const
s=parseInt(nomerhal)-1;for(nomerhal>1&&(e+=2==nomerhal?"page"==jenis?'<span
class="showpage"><a
href="'+home_page+'">'+upPageWord+"</a></span>":'<span
class="showpageNum"><a
href="/search/label/'+lblname1+'">'+upPageWord+"</a></span>":"page"==jenis?'<span
class="showpageNum"><a href="#" onclick="redirectpage('+s+');return
false">'+upPageWord+"</a></span>":'<span
class="showpageNum"><a href="#" onclick="redirectlabel('+s+');return
false">'+upPageWord+"</a></span>"),mulai>1&&(e+="page"==jenis?'<span
class="showpageNum"><a
href="'+home_page+'">1</a></span>':'<span
class="showpageNum"><a
href="/search/label/'+lblname1+'">1</a></span>'),mulai>2&&(e+="
… "),f=mulai;f<=akhir;f++)nomerhal==f?e+='<span
class="showpagePoint">'+f+"</span>":1==f?e+="page"==jenis?'<span
class="showpageNum"><a
href="'+home_page+'">1</a></span>':'<span
class="showpageNum"><a
href="/search/label/'+lblname1+'">1</a></span>':e+="page"==jenis?'<span
class="showpageNum"><a href="#" onclick="redirectpage('+f+');return
false">'+f+"</a></span>":'<span
class="showpageNum"><a href="#" onclick="redirectlabel('+f+');return
false">'+f+"</a></span>";akhir<maksimal-1&&(e+="…"),akhir<maksimal&&(e+="page"==jenis?'<span
class="showpageNum"><a href="#"
onclick="redirectpage('+maksimal+');return
false">'+maksimal+"</a></span>":'<span
class="showpageNum"><a href="#"
onclick="redirectlabel('+maksimal+');return
false">'+maksimal+"</a></span>");const
n=parseInt(nomerhal)+1;nomerhal<maksimal&&(e+="page"==jenis?'<span
class="showpageNum"><a href="#" onclick="redirectpage('+n+');return
false">'+downPageWord+"</a></span>":'<span
class="showpageNum"><a href="#" onclick="redirectlabel('+n+');return
false">'+downPageWord+"</a></span>");const
t=document.getElementsByName("pageArea"),l=document.getElementById("blog-pager");for(h=0;h<t.length;h++)t[h].innerHTML=e;t&&t.length>0&&(e=""),l&&(l.innerHTML=e)}function
hitungtotaldata(a){const
e=a.feed;b=parseInt(e.openSearch$totalResults.$t,10),loophalaman(b)}function
halamanblogger(){const
a=urlactivepage;if(-1!=a.indexOf("/search/label/")&&(lblname1=-1!=a.indexOf("?")?a.substring(a.indexOf("/search/label/")+14,a.indexOf("?")):a.substring(a.indexOf("/search/label/")+14,a.length)),-1==a.indexOf("?q=")&&-1==a.indexOf(".html"))if(-1==a.indexOf("/search/label/")){jenis="page",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1;const
a=document.createElement("script");a.setAttribute("src",home_page+"feeds/posts/summary/?max-results=1&alt=json-in-script&callback=hitungtotaldata"),document.body.appendChild(a)}else{jenis="label",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1;const
a=document.createElement("script");a.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?alt=json-in-script&callback=hitungtotaldata&max-results=1"),document.body.appendChild(a)}}function
redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;const
e=document.getElementsByTagName("head")[0];b=document.createElement("script"),b.type="text/javascript",b.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(b)}function
redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;const
e=document.getElementsByTagName("head")[0];b=document.createElement("script"),b.type="text/javascript",b.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(b)}function
finddatepost(a){post=a.feed.entry[0];const
e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);d=encodeURI(e).replace("+","%2B"),c="page"==jenis?"/search?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage:"/search/label/"+lblname1+"?updated-max="+d+"&max-results="+postperpage+"#PageNo="+nopage,location.href=c}halamanblogger();
//]]>
</script>
<style>
.showpageNum a,
.showpage a {
font-size: 15px!important;
font-family: arial;
font-weight: bold;
min-width: 36px;
padding: 8px;
margin: 0 3px;
color: #fff!important;
background: #718c53;
opacity: .8;
border-radius: 10%;
display: inline-block;
transition: .2s;
}
.showpagePoint {
font-family: arial;
padding: 8px!important;
min-width: 36px;
font-size: 15px;
font-weight: bold;
padding: 6px;
margin: 0 3px;
text-decoration:none;
color: #666;
border-radius: 10%;
display: inline-block;
background: lightgray;
}
.showpageNum a:hover,
.showpage a:hover {
opacity: .6;
}
.showpageOf {
display: none;
}
</style>
</b:if>
2026年三月八日現在は、以下のコードで全て完了します。
2026年コード
<b:if cond='data:view.isMultipleItems and !data:view.isArchive'>
<script>
//<![CDATA[
const postperpage = 10; // 1ページあたりの表示件数(設定と合わせる)
const numshowpage = 5; // 表示する数字ボタンの数
const upPageWord = "<"; // 次へ
const downPageWord = ">"; // 前へ
const home_page = "/";
let urlactivepage = location.href;
let nomerhal, jenis, lblname1, nopage;
function loophalaman(totalResults) {
let e = "";
const nomerkiri = Math.floor(numshowpage / 2);
const nomerhal_int = parseInt(nomerhal);
// 最大ページ数の計算
let maksimal = Math.ceil(totalResults / postperpage);
if (maksimal < 1) maksimal = 1;
let mulai = nomerhal_int - nomerkiri;
if (mulai < 1) mulai = 1;
let akhir = mulai + numshowpage - 1;
if (akhir > maksimal) akhir = maksimal;
//
表示調整(最後の方のページでも指定数ボタンを出すための処理)
if (akhir - mulai < numshowpage - 1 && mulai >
1) {
mulai = akhir - numshowpage + 1;
if (mulai < 1) mulai = 1;
}
e += `<span class='showpageOf'>Page ${nomerhal_int} of
${maksimal}</span>`;
// 前へボタン
if (nomerhal_int > 1) {
const s = nomerhal_int - 1;
e += `<span class="showpage"><a
href="#" onclick="redirect${jenis}(${s});return
false">${upPageWord}</a></span>`;
}
// 1ページ目へのジャンプ
if (mulai > 1) {
e += `<span class="showpageNum"><a
href="#" onclick="redirect${jenis}(1);return
false">1</a></span>`;
if (mulai > 2) e += " ... ";
}
// 数字ボタン生成
for (let f = mulai; f <= akhir; f++) {
if (nomerhal_int == f) {
e += `<span
class="showpagePoint">${f}</span>`;
} else {
e += `<span
class="showpageNum"><a href="#" onclick="redirect${jenis}(${f});return
false">${f}</a></span>`;
}
}
// 最後のページへのジャンプ
if (akhir < maksimal) {
if (akhir < maksimal - 1) e += " ... ";
e += `<span class="showpageNum"><a
href="#" onclick="redirect${jenis}(${maksimal});return
false">${maksimal}</a></span>`;
}
// 次へボタン
if (nomerhal_int < maksimal) {
const n = nomerhal_int + 1;
e += `<span class="showpageNum"><a
href="#" onclick="redirect${jenis}(${n});return
false">${downPageWord}</a></span>`;
}
const t = document.getElementsByName("pageArea");
const l = document.getElementById("blog-pager");
for (let h = 0; h < t.length; h++) t[h].innerHTML = e;
if (l) l.innerHTML = e;
}
function hitungtotaldata(a) {
const total = parseInt(a.feed.openSearch$totalResults.$t, 10);
loophalaman(total);
}
function halamanblogger() {
const a = urlactivepage;
if (a.indexOf("/search/label/") != -1) {
lblname1 = a.indexOf("?") != -1 ?
a.substring(a.indexOf("/search/label/") + 14, a.indexOf("?")) :
a.substring(a.indexOf("/search/label/") + 14, a.length);
}
if (a.indexOf("?q=") == -1 && a.indexOf(".html") ==
-1) {
if (a.indexOf("/search/label/") == -1) {
jenis = "page";
nomerhal = a.indexOf("#PageNo=")
!= -1 ? a.substring(a.indexOf("#PageNo=") + 8, a.length) : 1;
const s =
document.createElement("script");
s.src =
`${home_page}feeds/posts/summary/?max-results=1&alt=json-in-script&callback=hitungtotaldata`;
document.body.appendChild(s);
} else {
jenis = "label";
nomerhal = a.indexOf("#PageNo=")
!= -1 ? a.substring(a.indexOf("#PageNo=") + 8, a.length) : 1;
const s =
document.createElement("script");
s.src =
`${home_page}feeds/posts/summary/-/${lblname1}?alt=json-in-script&callback=hitungtotaldata&max-results=1`;
document.body.appendChild(s);
}
}
}
function redirectpage(a) {
nopage = a;
if (a <= 1) { location.href = home_page; return; }
const jsonstart = (a - 1) * postperpage;
const s = document.createElement("script");
s.src =
`${home_page}feeds/posts/summary?start-index=${jsonstart}&max-results=1&alt=json-in-script&callback=finddatepost`;
document.getElementsByTagName("head")[0].appendChild(s);
}
function redirectlabel(a) {
nopage = a;
if (a <= 1) { location.href = `/search/label/${lblname1}`;
return; }
const jsonstart = (a - 1) * postperpage;
const s = document.createElement("script");
s.src =
`${home_page}feeds/posts/summary/-/${lblname1}?start-index=${jsonstart}&max-results=1&alt=json-in-script&callback=finddatepost`;
document.getElementsByTagName("head")[0].appendChild(s);
}
function finddatepost(a) {
const post = a.feed.entry[0];
const timestamp = post.published.$t.substring(0, 19) +
post.published.$t.substring(23, 29);
const d = encodeURI(timestamp).replace("+", "%2B");
const path = (jenis == "page") ? "/search" :
`/search/label/${lblname1}`;
location.href =
`${path}?updated-max=${d}&max-results=${postperpage}#PageNo=${nopage}`;
}
halamanblogger();
//]]>
</script>
<style>
/* CSSは基本そのまま、少しだけ整えています */
.showpageNum a, .showpage a {
font-size: 15px!important;
font-family: arial, sans-serif;
font-weight: bold;
min-width: 38px;
height: 38px;
line-height: 38px;
padding: 0 8px;
margin: 0 3px;
color: #fff!important;
background: #718c53;
border-radius: 4px;
display: inline-block;
text-align: center;
transition: all .2s;
text-decoration: none;
}
.showpagePoint {
font-size: 15px;
font-family: arial, sans-serif;
font-weight: bold;
min-width: 38px;
height: 38px;
line-height: 38px;
padding: 0 8px;
margin: 0 3px;
color: #666;
background: #e0e0e0;
border-radius: 4px;
display: inline-block;
text-align: center;
}
.showpageNum a:hover, .showpage a:hover {
background: #5a7042;
opacity: 1;
}
.showpageOf { display: none; }
</style>
</b:if>
qooqサイドバーに10記事毎ログページャー
<div id="side-pager-area">読み込み中...</div>
<script type="text/javascript">
//<![CDATA[
(function() {
const postperpage = 10;
const home_page = location.protocol + "//" + location.host + "/";
let urlactivepage = location.href;
let nopage;
window.sideLoop = function(totalResults) {
let e = "";
let current_page = 0;
// --- 修正箇所:スマホ対応・ラベル除外・検索結果除外 ---
const isIndex = (
(urlactivepage.replace("?m=1", "") === home_page || urlactivepage.indexOf("/search") !== -1)
&& urlactivepage.indexOf("/search/label/") === -1
&& urlactivepage.indexOf("q=") === -1
|| urlactivepage.indexOf("#PageNo=") !== -1
);
if (isIndex) {
const pageMatch = urlactivepage.match(/[&?]page=(\d+)/) || urlactivepage.match(/#PageNo=(\d+)/);
current_page = pageMatch ? parseInt(pageMatch[1]) : 1;
}
// -------------------------------------------------------
let maksimal = Math.ceil(totalResults / postperpage);
if (maksimal < 1) maksimal = 1;
for (let f = 1; f <= maksimal; f++) {
if (current_page === f) {
e += `<span class="side-point">${f}</span>`;
} else {
e += `<span class="side-num"><a href="#" onclick="sideRedirect(${f});return false">${f}</a></span>`;
}
}
document.getElementById("side-pager-area").innerHTML = e;
};
window.sideTotal = function(a) {
const total = parseInt(a.feed.openSearch$totalResults.$t, 10);
sideLoop(total);
};
window.sideRedirect = function(a) {
nopage = a;
if (a <= 1) { location.href = home_page; return; }
const jsonstart = (a - 1) * postperpage;
const s = document.createElement("script");
s.src = home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=sideFindDate";
document.body.appendChild(s);
};
window.sideFindDate = function(a) {
const post = a.feed.entry[0];
const timestamp = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
const d = encodeURI(timestamp).replace("+", "%2B");
location.href = home_page + "search?updated-max=" + d + "&max-results=" + postperpage + "#PageNo=" + nopage;
};
const s = document.createElement("script");
s.src = home_page + "feeds/posts/summary/?max-results=1&alt=json-in-script&callback=sideTotal";
document.body.appendChild(s);
})();
//]]>
</script>
<style>
/* QOOQ用スタイル */
#side-pager-area {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 0;
justify-content: center;
}
.side-num a {
font-size: 15px;
font-weight: bold;
min-width: 38px;
height: 38px;
line-height: 38px;
border-radius: 4px;
display: inline-block;
text-align: center;
text-decoration: none;
background: #041500 !important;
color: #ffffff !important;
}
.side-point {
font-size: 15px;
font-weight: bold;
min-width: 38px;
height: 38px;
line-height: 38px;
border-radius: 4px;
display: inline-block;
text-align: center;
background: #e0e0e0 !important;
color: #666666 !important;
}
.side-num a:hover {
background: #5a7042 !important;
}
</style>
jetthemeのサイドバーに10記事毎ログ
<div id="side-pager-area">読み込み中...</div>
<script type="text/javascript">
//<![CDATA[
(function() {
const postperpage = 10;
const home_page = location.protocol + "//" + location.host + "/";
let urlactivepage = location.href;
let nopage;
window.sideLoop = function(totalResults) {
let e = "";
// --- 修正箇所:現在ページ判定の条件絞り込み ---
let current_page = 0;
// スマホ版の ?m=1 を考慮しつつ、ラベルページ(/label/)と検索結果(q=)を除外する判定
const isIndex = (
(urlactivepage.replace("?m=1", "") === home_page || urlactivepage.indexOf("/search") !== -1)
&& urlactivepage.indexOf("/search/label/") === -1
&& urlactivepage.indexOf("q=") === -1
);
if (isIndex) {
const pageMatch = urlactivepage.match(/[&?]page=(\d+)/) || urlactivepage.match(/#PageNo=(\d+)/);
current_page = pageMatch ? parseInt(pageMatch[1]) : 1;
}
// ---------------------------------------
let maksimal = Math.ceil(totalResults / postperpage);
if (maksimal < 1) maksimal = 1;
for (let f = 1; f <= maksimal; f++) {
if (current_page === f) {
e += `<span class="side-point">${f}</span>`;
} else {
e += `<span class="side-num"><a href="#" onclick="sideRedirect(${f});return false">${f}</a></span>`;
}
}
document.getElementById("side-pager-area").innerHTML = e;
};
window.sideTotal = function(a) {
const total = parseInt(a.feed.openSearch$totalResults.$t, 10);
sideLoop(total);
};
window.sideRedirect = function(a) {
nopage = a;
if (a <= 1) { location.href = home_page; return; }
const jsonstart = (a - 1) * postperpage;
const s = document.createElement("script");
s.src = home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=sideFindDate";
document.body.appendChild(s);
};
window.sideFindDate = function(a) {
const post = a.feed.entry[0];
const timestamp = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
const d = encodeURI(timestamp).replace("+", "%2B");
location.href = home_page + "search?updated-max=" + d + "&max-results=" + postperpage + "&page=" + nopage;
};
const s = document.createElement("script");
s.src = home_page + "feeds/posts/summary/?max-results=1&alt=json-in-script&callback=sideTotal";
document.body.appendChild(s);
})();
//]]>
</script>
<style>
/* 全体レイアウト */
#side-pager-area {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 0;
justify-content: center;
}
/* 通常の数字:白い枠線あり */
.side-num a {
font-size: 15px;
font-weight: bold;
min-width: 38px;
height: 38px;
line-height: 36px;
border-radius: 4px;
display: inline-block;
text-align: center;
text-decoration: none;
color: var(--bs-body-color);
border: 1px solid #ffffff !important;
background: transparent !important;
transition: all 0.2s ease;
}
/* 現在地:JetThemeのアクセントカラーで塗りつぶし */
.side-point {
font-size: 15px;
font-weight: bold;
min-width: 38px;
height: 38px;
line-height: 36px;
border-radius: 4px;
display: inline-block;
text-align: center;
background-color: var(--jt-btn-primary) !important;
border: 1px solid var(--jt-btn-primary) !important;
color: #ffffff !important;
}
/* ホバー時 */
.side-num a:hover {
background: var(--jt-btn-primary) !important;
border-color: var(--jt-btn-primary) !important;
color: #ffffff !important;
text-decoration: none;
}
</style>
アーカイブページでページャーを消す
そして、まだ問題があるのですが、それは月別アーカイブでは、ページャーナビゲーションは全く機能してくれません。
<b:if cond='data:view.isArchive'>
<style>.blog-pager{display:none}</style> </b:if>を
<div id='list'> <b:loop index='pi' values='data:posts' var='post'>
<b:if cond='data:blog.pageType == "archive" or data:pi
< 10'> <b:include data='post' name='post'/> </b:if>
</b:loop> </div>の下に貼り付けてください。
残念ながら無料ブログであるグーグルブロガーには過度に期待はできないということでしょうかね。
それでも、各記事においてmoreタグつまり追記を挿入して区切ることで、月別アーカイブをクリックしたときになるべく多くの記事が表示されるようになります。
ページャーナビゲーションを装備するならこのややこしいトラブルがつきものですが、まあ消すとかそもそも装備しないなら、月別アーカイブをクリックした際にも、前の投稿と新しい投稿の二択ボタンで、一ページずつですが、過去記事に全てさかのぼっていくことができます。
どちらを選ぶかはブロガー次第です。
個人的には記事数が多い年代と月があれば、その間の記事を編集画面にして公開日を前後にずらし、記事数が少ない各月に散らして様子を見ます。
なるべくmoreタグで各記事に挿入し記事一覧表示ページでもれなく表示されるように徹底しておいた方がいいと思われます。
月別アーカイブ用ページャ―搭載
Blogger テーマの「HTML
編集」のブログの投稿ウィジェットの</b:widget>の直後に、こちらのコードを設置します。こちらを引用
<b:widget cond='data:view.archive.month' id='BlogArchive0' locked='true'
title='アーカイブページャ' type='BlogArchive' version='1'>
<b:widget-settings>
<b:widget-setting
name='showStyle'>FLAT</b:widget-setting>
<b:widget-setting
name='yearPattern'>yyyy</b:widget-setting>
<b:widget-setting
name='showWeekEnd'>true</b:widget-setting>
<b:widget-setting name='monthPattern'>MMMM
yyyy</b:widget-setting>
<b:widget-setting name='dayPattern'>MMM
dd</b:widget-setting>
<b:widget-setting
name='weekPattern'>MM/dd</b:widget-setting>
<b:widget-setting
name='chronological'>false</b:widget-setting>
<b:widget-setting
name='showPosts'>false</b:widget-setting>
<b:widget-setting
name='frequency'>MONTHLY</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:attr name='class' value=''/>
<b:attr name='id' value=''/>
<b:attr name='data-version' value=''/>
<b:include cond='data:style == "FLAT"'
data='data' name='flat'/>
</b:includable>
<b:includable id='flat' var='data'>
<b:if cond='data:data.length gte 2'>
<script>//<![CDATA[
function archivePager(name, url, num, elem){
const link = document.querySelector(elem);
const regex = /(\d{1,2})月\s(\d{4})/;
const year = regex.exec(name)[2];
const month = regex.exec(name)[1];
link.href = url;
link.textContent = year + '/' + (month.length == 1 ? '0' + month :
month) + ' [' + num + ']';
}
//]]></script>
<b:loop index='i' values='data:data' var='month'>
<b:if cond='data:blog.url ==
data:month.url'>
<b:comment>次の月</b:comment>
<b:with value='data:i - 1'
var='next'>
<b:if cond='data:next gte
0'>
<script>archivePager('<b:eval expr='data:data[next].name'/>',
'<b:eval expr='data:data[next].url'/>', <b:eval
expr='data:data[next].post-count'/>,
'a.blog-pager-newer-link')</script>
<b:elseif cond='data:i ==
0'/>
<script>document.querySelector('a.blog-pager-newer-link').parentNode.remove()</script>
</b:if>
</b:with>
<b:comment>前の月</b:comment>
<b:with value='data:i + 1'
var='prev'>
<b:if cond='data:prev lt
data:data.length'>
<script>archivePager('<b:eval expr='data:data[prev].name'/>',
'<b:eval expr='data:data[prev].url'/>', <b:eval
expr='data:data[prev].post-count'/>,
'a.blog-pager-older-link')</script>
</b:if>
</b:with>
</b:if>
</b:loop>
</b:if>
</b:includable>
<b:includable id='interval'/>
<b:includable id='menu'/>
<b:includable id='posts'/>
<b:includable id='toggle'/>
</b:widget>

0 件のコメント:
コメントを投稿