[GoogleBlogger] 任意ページのみで使えるページネーション（コピペで使えるソースを公開）

もうね、GoogleBloggerでブログを書くって、すごく良いんですよね。 え？Wordpressがいいですって？ PHPで、専用サーバーで、独自ドメインで・・・ それ、プログラミングわかってない人がよく言うヤツですよね。 プログラミングを熟知しているユゲタが、これまでWordpress、様々なブログサービス、独自ブログシステムを使ってきた結果、 GoogleBloggerに行き着いたんで、このセリフを言っている人、0.3ユゲタぐらいの達成率ですね。 来年末ぐらいには、「GoogleBloggerいいわ〜」って言っていることでしょう。

今回のGoogleBloggerテクニック

日記としてブログを書いている人は、あまり必要ないかもしれませんが、 何かの情報アーカイブとしてブログを書いている人(Bloggerに限らず)は、 カテゴリーが細かく様々な種類を持っていると思います。 このユゲタのブログなんて、カテゴリーがカオスでしょ？ そこで思いついたのが、「特集ページ」というやり方で、定期的に書かれていて、その間に別のブログが投稿されるような場合、#1,#2...という風に番号を振って対応をして、いたんですが、 特集ページでは、それらをリスト化して、掲載してあげることで、ユーザーはまとまったアーカイブコレクションとしてサイトを認識してくれるので、ページランクも必然的にあがる（ハズ）なんですよ。 そして、Wordpressにあった、ページネーション機能というのを思い出しました。

ページネーションの仕様について

GoogleBloggerでページネーションを実装しているやり方を検索すると、毎日のブログ記事を連日連番にしてページネートするパターンばかりで、任意の項目をページネートする方法はデフォルトではありません。 そこで思いついたのは、特集ページでリスト化されたULタグデータをそのまま、特集ページそれぞれに貼り付けて、自動でページネーション機能が作れるようなカンタンコードを作ってみました。 Blogger仲間の人は、コピペで使ってもらえますよ。（しかもタダで）

ソースコード

まず、見てもらうようのソースコードは書きのjsとcssの２つです。 (()=>{ function Pagenation(){ this.root = document.querySelector('.pagenation') if(!this.root){return} this.items = this.root.querySelectorAll(':scope > li') if(!this.items.length){return} this.max_item_count = 2 // 1,...,3,4,[5],6,7,...,10 this.init() } Pagenation.prototype.init = function(){ for(let i=0; i<this.items.length; i++){ if(this.is_current_page(this.items[i]) !== -1){ this.items[i].className = 'active' this.current_page_number = i break } } this.set_list_status() } Pagenation.prototype.is_current_page = function(li){ const a = li.querySelector('a') if(!a){return} const href = a.getAttribute('href') if(!href){return} return location.href.indexOf(href) } Pagenation.prototype.set_list_status = function(){ let flg_hidden_prev = false let flg_hidden_next = false for(let i=0; i<this.items.length; i++){ const diff = this.current_page_number - i // first if(i === 0){ this.items[i].setAttribute('data-list-status' , 'fitst') } // last else if(i === this.items.length-1){ this.items[i].setAttribute('data-list-status' , 'last') } // hidden-prev else if(diff < -this.max_item_count){ if(!flg_hidden_prev){ this.items[i].setAttribute('data-list-status' , 'leader') flg_hidden_prev = true } else{ this.items[i].setAttribute('data-list-status' , 'hidden-prev') } } // hidden-next else if(diff > this.max_item_count){ if(!flg_hidden_next){ this.items[i].setAttribute('data-list-status' , 'leader') flg_hidden_next = true } else{ this.items[i].setAttribute('data-list-status' , 'hidden-next') } } } } switch(document.readyState){ case 'complete': new Pagenation() break default: window.addEventListener('load' , ()=>{ new Pagenation() }) break } })() /* << Pagenation */ .post-body ul.pagenation, .post-body ul.pagenation > li{ list-style-type: none; margin:0; padding:0; } .post-body ul.pagenation{ --size-item: 30px; display:flex; justify-content: center; counter-reset: num 0; } .post-body ul.pagenation > li{ counter-increment: num 1; list-style-type: none; margin:0 3px; } .post-body ul.pagenation > li > a{ font-size:0; display:block; } .post-body ul.pagenation > li > a::before{ content: counter(num); font-size:1.5rem; color:white; display:block; background-color:black; padding:0; width:var(--size-item); height:var(--size-item); text-align:center; line-height:var(--size-item); border:1px solid transparent; } .post-body ul.pagenation > li > a:hover::before{ background-color:#DDF; color:black; border:1px solid black; } .post-body ul.pagenation > li.active > a::before{ background-color:white; color:black; border:1px solid black; } .post-body ul.pagenation > li[data-list-status='hidden-prev'], .post-body ul.pagenation > li[data-list-status='hidden-next']{ margin:0; } .post-body ul.pagenation > li[data-list-status='hidden-prev'] a, .post-body ul.pagenation > li[data-list-status='hidden-next'] a{ display:none; } .post-body ul.pagenation > li[data-list-status='leader']{ margin:0; pointer-events:none; } .post-body ul.pagenation > li[data-list-status='leader'] a{ display:block; border: 1px solid transparent; background-color:transparent; cursor:auto; pointer-events:none; } .post-body ul.pagenation > li[data-list-status='leader'] a::before{ content:'...'; color:black; background-color: transparent; width:auto; } .post-body ul.pagenation > li[data-list-status='leader'] a:hover::before{ background-color:transparent; color:black; border: 1px solid transparent; } /* Pagenation >> */

実装方法

Bloggerを初めて使う人は、テーマのHTML編集機能について少し知識をつけて貰う必要がありますが、ここでは、もうBloggerを使ったことがある人を対象に書かせてもらいます。

1. cssの実装

まず、上記のcssファイルの中身を、html編集の中のheadタグ内の任意（どこでもいいです）にコピペします。

2. javascriptの実装

次に、javascriptですが、わかりやすく</head>のすぐ上にコピペしてもらいたいんですが、そのままコピペすると、ほとんどのテーマでjsエラーがでるので、エンコードした文字列にする必要があるので、下記のソースをコピペしてください。 (()=>{ function Pagenation(){ this.root = document.querySelector('.pagenation') if(!this.root){return} this.items = this.root.querySelectorAll(':scope > li') if(!this.items.length){return} this.max_item_count = 2 // 1,...,3,4,[5],6,7,...,10 this.init() } Pagenation.prototype.init = function(){ for(let i=0; i<this.items.length; i++){ if(this.is_current_page(this.items[i]) !== -1){ this.items[i].className = 'active' this.current_page_number = i break } } this.set_list_status() } Pagenation.prototype.is_current_page = function(li){ const a = li.querySelector('a') if(!a){return} const href = a.getAttribute('href') if(!href){return} return location.href.indexOf(href) } Pagenation.prototype.set_list_status = function(){ let flg_hidden_prev = false let flg_hidden_next = false for(let i=0; i<this.items.length; i++){ const diff = this.current_page_number - i // first if(i === 0){ this.items[i].setAttribute('data-list-status' , 'fitst') } // last else if(i === this.items.length-1){ this.items[i].setAttribute('data-list-status' , 'last') } // hidden-prev else if(diff < -this.max_item_count){ if(!flg_hidden_prev){ this.items[i].setAttribute('data-list-status' , 'leader') flg_hidden_prev = true } else{ this.items[i].setAttribute('data-list-status' , 'hidden-prev') } } // hidden-next else if(diff > this.max_item_count){ if(!flg_hidden_next){ this.items[i].setAttribute('data-list-status' , 'leader') flg_hidden_next = true } else{ this.items[i].setAttribute('data-list-status' , 'hidden-next') } } } } switch(document.readyState){ case 'complete': new Pagenation() break default: window.addEventListener('load' , ()=>{ new Pagenation() }) break } })()

3. ページネーションさせるページ全部の最下段に、次のような方式でタグを追加

参考ページ : https://blog.myntinc.com/2020/07/1.html <ul class="pagenation"> <li class="active" data-list-status="fitst"><a href="https://blog.myntinc.com/2020/07/1.html">#1 : 素材の準備</a></li> <li><a href="https://blog.myntinc.com/2020/07/2.html">#2 : 画面表示</a></li> <li><a href="https://blog.myntinc.com/2020/07/3.html">#3 : 自機操作</a></li> <li data-list-status="leader"><a href="https://blog.myntinc.com/2020/07/4.html">#4 : ドット絵管理方法</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/5.html">#5 : 弾の発射</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/6.html">#6 : 敵キャラの並び</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/7.html">#7 : トーチカの配置</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/8.html">#8 : 敵キャラ行進</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/9.html">#9 : 攻撃処理</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/10.html">#10 : トーチカの当たり判定</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/11.html">#11 : 敵機の攻撃処理</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/07/12.html">#12 : 敵機のトーチカ・コリジョン判定</a></li> <li data-list-status="hidden-prev"><a href="https://blog.myntinc.com/2020/08/13.html">#13 : スタート画面とゲームオーバー画面の追加</a></li> <li data-list-status="last"><a href="https://blog.myntinc.com/2020/08/14.html">#14 : 効果音の追加</a></li> </ul> ポイントは、ulタグのclass属性に"pagenation"を追加しておくというだけです。 あとは、liタグ内を順番に書いて、aリンクを付けてもらえると自動的に付番して、リンクをセットしてれます。

機能紹介

あまりカスタマイズする要素はないんですが、javascriptの中の7行目にある this.max_item_count = 2 という箇所を、1や3に変更すると、ページネーションの表示数を変更させられます。 現在5ページ目で10ページある場合、2の値にしている場合は、 1 ... 3 4 [5] 6 7 ... 10 このようになり、現在ページの前後に2ページ分の表示がされます。 これを1にすると、 1 ... 4 [5] 6 ... 10 こうなるワケですね。 画面サイズの最小を320pxにした場合に、2の値がギリギリ入るサイズだったので、デフォルトの2のママ使ってもらうのがいいでしょう。 他には、cssを自由に変更してもらうことで、色を黒背景白文字から、もっとカラフルな表示に変更できますし、 border-radius:50%;とかにすると、円形表示になりカワイくなると思いますよ。

完成図

このように表示されて、閲覧ユーザーも簡単にページ遷移できるようになって、便利です！

あとがき

こんな感じで、独自にカスタマイズして、機能追加もできてしまうGoogleBlogger、そのうちテーマ自体を作って公開したいですね。 自分のブログで出来る限り実験してその集大成がテーマになると、それを使いたいという人も多くなるかな・・・と考えてます。 でも、無料でいい感じのテーマがたくさん公開されているので、そういうのを探して自分でカスタマイズして使うというのが効率的かも知れませんね。 また、いい感じの機能を作ったら、このブログで公開したいと思います。