ページネーション(?)を番号付きに変更。あると便利ですよね

最近、他のひとのブログを見にいくこともあるのですが少し違和感を感じていました。自分のブログと何かが違う…と。まぁ僕のブログはまだまだ調整しなくちゃいけないところでいっぱいなんですけれどね。とりあえずブログを書くことを優先で他は後回しになっていますので。

他のひとのブログをあまり見たことがないので、どんなデザインが一般的なブログなのかもわかっていません。ただ一つ今回気づきました。トップページの記事一覧で[①②③…]といった番号付きのページリンクが僕のブログになかった。あの機能は便利なんですよね。ページ移動が楽で。

ということで、さっそくグーグル検索。するとページネーションなる名前の機能だとわかりました。さらにBLOGGERと関連付けて検索してみるといつもいつも通りにふじやん。さんのブログに到達。

さっそく目を通してみるとコピペだけで簡単に導入できそうです。ページナビゲーションともいうようですね。ただなんとなく僕の考えていたのと違うような気も。とりあえずテンプレートのコードを見直す。

<div class="blog-pager" id="blog-pager">
 <b:if cond="data:olderPageUrl">
  <span id="blog-pager-older-link">
   <a class="blog-pager-older-link" expr:href="data:olderPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-older-link&quot;" expr:title="data:olderPageTitle"><data:olderpagetitle></data:olderpagetitle></a>
  </span>
 </b:if>

 <b:if cond="data:newerPageUrl">
  <span id="blog-pager-newer-link">
   <a class="blog-pager-newer-link" expr:href="data:newerPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-newer-link&quot;" expr:title="data:newerPageTitle"><data:newerpagetitle></data:newerpagetitle></a>
  </span>
 </b:if>
</div>

↑のコードのあたりをいじってなんとかなるんじゃないか？と思っていたんですよね。う～んでも英語で検索して海外の情報を見てもJavaScriptを使って対応しているものばかり。あぁやってコードを組める人達がBLOGGERの独自タグでどうにかできない…ということはそれしか方法がないのでしょう。

とりあえず考えるのをやめて導入することに。いくつかコードが見つかりましたがQooQでの動作環境が確実に保証されているふじやん。さんのコードをコピペして貼り付け。そして作業完了…とはなりませんでした。ちょっと表示にラグがある。まぁそこは仕方ないのですがチラチラと「前の投稿」「次の投稿」の文字が見えるのが気になってしまう。遅延があるので最初に表示し始めたときに一瞬だけチラッと見えるんですよね。そのまま放っておこうか悩みましたが対処することに。少しコードを書き足すだけですが。

<div class="blog-pager" id="blog-pager">
 <b:if cond='data:blog.pageType == &quot;item&quot;'><!--追加-->
  <b:if cond="data:olderPageUrl">
   <span id="blog-pager-older-link">
    <a class="blog-pager-older-link" expr:href="data:olderPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-older-link&quot;" expr:title="data:olderPageTitle"><data:olderpagetitle></data:olderpagetitle></a>
   </span>
  </b:if>

  <b:if cond="data:newerPageUrl">
   <span id="blog-pager-newer-link">
    <a class="blog-pager-newer-link" expr:href="data:newerPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-newer-link&quot;" expr:title="data:newerPageTitle"><data:newerpagetitle></data:newerpagetitle></a>
   </span>
  </b:if>
 </b:if><!--追加-->
</div>

↑の黄色のアンダーラインの二つの行が書き足したコードです。投稿記事のページ以外は「前の投稿」「次の投稿」が表示されないようにしました。これでページナビゲーションが表示されるときにチラチラと文字が出てこない。まぁ僕の自己満足みたいなものですね。参考にさせていただいたのは以下のサイト。

↑のサイトはBLOGGER独自のタグなどをわかりやすく解説してくれているブログです。ブログを始めたときは独自タグが意味不明すぎて困っていたので助かりました。

ついでに「前の投稿」「次の投稿」の文字をそれぞれの記事タイトルに変えるべきか悩む。色々調べてみるとこれも独自タグで対処できないみたいです。なんでだ！これくらいは独自タグで対応できそうなものなのに…。便利タグがあるんじゃないか？と思い検索しまくるも撃沈。でてくるのはJavaScriptを使ったものばかり。

そもそもolderPageTitleとかnewerPageTitleってタグの名前からしてイジワルというかなんというか。いかにもというタグネームなのに入っているのは「前の投稿」「次の投稿」の文字…。

まぁ僕のブログは長いタイトルをつけることもあるので、記事タイトルに変えない方向でいくことにしました。前後の記事で関連していることも少ないですしね。

しかしやっぱりちゃんとBLOGGERのコードを理解していないから何ができて何ができないのかがわからないなぁ。かといって薄い知識でテンプレートコードを完璧に理解しようとする気にはなれない…。

新しくブログを作ってコードをいじろうか凄く悩む。試してみたいけれど今のブログでは怖くてできないこともありますしね。面倒くさい気持ちとやりたい気持ちが半々状態。…もうしばらくこのままいくか。

しかし今日(9/16)も阪神が巨人に負けてしまった。最後の追い上げは凄かったですけれど、あと一歩及ばず。一番負けてはいけない相手に今季は負けすぎですね。得点力は上がったのになぁ…。