ホーム / Blogger /

Bloggerにページナビゲーションをつけてみる

2019/11/15

Blogger


unsplash-logoErgita Sela

ページナビゲーションとは

「次の投稿」「前の投稿」じゃなくて、番号付きのリンクそれが「ページナビゲーション」。
ページャー、ページネーションともいうらしいです。

ページ遷移ボタン

あとどのくらいのページがあるのかがわかるのでつけてみたいと思いました。

設置

またもや残念ながらBloggerには標準でそのような機能はなさそうです。

Bloggerにもできる方法があり、丁寧に解説されている方がいましたので、その通りやってみました。

【Blogger】HTML/JavaScriptガジェットから番号付きのページナビを追加する方法【Vaster2】
Bloggerのお役立ち情報をまとめていくブログです（今はVaster2のカスタマイズ情報が中心）。
blogger-learning-rab.blogspot.com
その通りといいつつ、HTMLの編集からCSSはheadタグ内に、下記、Javascriptはbodyタグ終了直前に貼りつけました。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var postperpage=5;
    var numshowpage=2;
    var upPageWord ='« Previous Page';
    var downPageWord ='Next Page »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script type='text/javascript'>
  /*<![CDATA[*/
    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
  /*]]>*/
</script>
</b:if>
</b:if>

修正箇所

Javascript

var postperpage=10; //投稿件数
var numshowpage=2; //表示させるボタンの数
var upPageWord ='«'; //前のページへのリンクテキスト
var downPageWord ='»'; //次のページへのリンクテキスト
var urlactivepage=location.href;
var home_page="/";

「投稿件数」は設定している投稿数にあわせたほうが良いそうです。

CSS

<style type="text/css">
#blog-pager {overflow: visible}
.showpageOf {display:none}
span.showpagePoint {  /*選択されているページボタン*/
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .4em .8em; /*文字と線の隙間*/
    margin: 0 .2em;
    border: 1px solid #90cdce; /*線の太さ、色*/
    border-radius: 0.25em; /*線の角丸*/
    background-color: #90cdce; /*背景色*/
    border-color: #90cdce; /*線の色 ここいるのか？*
    color: #f3f3f3; /*文字の色*/
    pointer-events: none;
}
span.showpageNum, span.showpage { /*選択されていないページボタン*/
    margin: 0 .2em;
}
.showpageNum a, .showpage a {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .4em .8em; /*文字と線の隙間*/
    border: 1px solid #ebebec; /*線の太さ、色*/
    border-radius: 0.25em; /*線の角丸*/
    color: #474a4d; /*文字の色*/
    text-decoration: none;
}
</style>

線の色を重複設定している気がしたので、ひとつ消しました。
2つ書かれている場合は後に書いたものが反映されると思います。


できたーと思ったら、ページによっては正しく表示されません。。。

と思ったらよく読んでみると解決方法も詳しく書いてありました。

「expr:href='data:label.url'」をすべて「expr:href='data:label.url + &quot;?&amp;max-results=10&quot;'」にする。 「10」は設定している投稿数にあわせる。

無事ラベルのリンクで遷移したときにも表示されるようになりました。

新たな問題発生！

何かがおかしい。
ラベルからリンクすると、投稿がまだあるはずなのに「1」とだけ表示されてページ遷移ができません。

まだ投稿はあるはずなのに。

Auto Pagination

Bloggerは「設定」->>「投稿、コメント、共有」->>「最大件数で表示」を変更することでメインページに掲載する投稿数を設定することができます。

ところが、実際には設定した投稿数より少なくなることがあります。

気になって前に調べたことがありました。

Blogger Auto Paginationは2010年初頭にGoogleによって導入され、（a）要求されているページのHTMLの量（キロバイト）と（b）上の画像の数に応じて、ブラウザに送信するコンテンツの量を動的に調整します。

Auto PaginationというBloggerの機能らしく、仕様ということなら減ってもいいかーと気にしていませんでしたが、きっとこれが原因に違いないと思いました。

  1. 最大投稿を10件にしてあるけど、Auto Paginationにより減らされる。
  2. でも、実際の投稿数は10件なのでページナビゲーションには「1」としか表示されない。
  3. 減らされた投稿にアクセスするリンクがない。

moreタグ

解決策はmoreタグをいれることでした。
いわゆる「続きを読む」の場所を設定するタグらしいです。 

<!--more-->

metaタグアイコン

投稿のとき「HTML」ではなく「作成」で編集する場合は上のアイコンで設定します。

一覧で表示しているときはメイン画像とタイトルだけが表示されていると思っていたんですけど、本文も関係あるんですかねー。

moreタグをいれることで、それ以降を読み込まないってことなのではないかと推測。

どこに入れればいいのかわからなかったので、上の方に入れてみました。

画像をたくさん貼りつけた投稿がひとつあったので、それが原因だったみたいで、無事解決しました。


ちなみにですが、こちらは試していませんが、MEMOの内容をやらなくてもできる方法もあるそうです。

mimito

Archiveから遷移すると、10件未満でも「2」「3」のボタンが表示されました。押してみるとメインページで押した場合と同じページへ。10 件超えたらどうなるかが気になるところです。

shesaid

いや前からそういう遷移だから。あと注意点として一般公開してないと表示されないからね。「feeds/posts/summary」というのが関係しているらしい。

自分の写真

mimito

世界中を旅するノマドなミニマリストに憧れているものの、デザインとプログラムの間で迷子になったあげく、たくさんの物に囲まれ、引きこもりがちな生活を送っております。複雑系とか多世界解釈とかよくわからないけど、興味津々です。

Archive

Label

QooQ