Blogger:ページ番号付ページナビ(13)1MB制限に対応するナビの作成:その1

フィードを使えば解決できそうなのと、検索結果の表示もすべて表示できそうなので、インデックスページの投稿表示まで行うページナビを作成することにします。

前の関連記事：Blogger:ページ番号付ページナビ(12)1ページ目の1MB制限に対応する(失敗編)

インデックスページの投稿部分を置換する

Bloggerのテンプレートでウィジェットへ移動→Blog1。

mainインクルードがウェブバージョンの表示になります。

<b:if cond='!data:mobile'>

このif文の行頭をクリックして折りたたみます。

それで折りたたまれている部分をごっそりコメントアウトしようと思って、<!--と-->で挟んでみましたがif文の中にコメントがあると-->で終わってしまって、うまくコメントアウトできません。

html - Commenting a commented markup (Nested comments) - Stack Overflow

sytleタグで囲んでスタイルとしてコメントアウトすればよいのでした。

 つまり<style>/*と*/</style>で囲んでしまいます。


これでコメントアウトがうまくいきました。

     <b:if cond='!data:mobile'> <!-- モバイルサイトでないとき -->
  <div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <b:if cond='(data:blog.pageType == &quot;index&quot;) or (data:blog.searchLabel;) or (data:blog.pageType == &quot;archive&quot;)'> <!-- インデックスページのとき、ラベルインデックスページのとき、月のアーカイブページのとき -->
          <div class='blog-pager' id='pagenaviindex'/><!-- ページナビとインデックスページ -->
  <b:else/> <!-- 上記以外のページのとき -->
    <b:loop values='data:posts' var='post'>
   <div class='post-outer'>
     <b:include data='post' name='post'/>
   </div>
   <b:include name='nextprev'/>
   <b:include name='feedLinks'/>
    </b:loop>
  </b:if>
  <b:if cond='data:numPosts != 0'>
   &lt;/div&gt;&lt;/div&gt; <!-- これがないとカラムがずれる -->
  </b:if>
  </div>
    <b:else/> <!-- モバイルサイトのとき -->
  <b:include name='mobile-main'/>
 </b:if>

代わりにこのコードで置き換えました。

これでインデックスページ、ラベルインデックスページ、アーカイブページのときはid='pagenaviindex'のdivを置換したものになります。

置換する前のdiv要素の親要素を確認する

BloggerのHTMLはすごく複雑にdiv要素が入れ子になっていて、ソースで表示されていない要素にたどり着くのは大変です。

<div class='blog-pager' id='pagenaviindex'>ここにはいる</div> <!-- ページナビv3 -->

そこで995行目のdiv要素に「ここにはいる」という文字列を入れました。

Chromeでインデックスページを表示させて、この文字を右クリック→検証。

(図ではidはpagenaviindexに替わりblog-pager3になっています。)

main-outerクラスのdiv要素から数えても8階層も入れ子になっています。

置換するdiv要素を作成する

Blogger：テンプレート編集(9)インデックスページをモバイルサイトのものに統一するで作成したインデックスページの投稿タイトルをFirefoxで右クリックして「要素を調査」としたものです。


blog-posts hfeedクラスより下の階層がid='pagenaviindex'のdivを置換して作らないといけないものです。

PageNavi3_Blogger/PageNavi3_Blogger.js at be50ccfcf329d7b62fd798cd6177c3ad76f88c5d · p--q/PageNavi3_Blogger

これでインデクスページの置き換えとページナビがうまくいきました。

1MB制限にもひっかかりませんし、検索結果や月や年のアーカイブページでもページナビが表示できるようになりました。

cssもJavaScriptで設定しているのでcssファイルも不要です。

次にモバイルサイトへの対応を考えます。

参考にしたサイト

html - Commenting a commented markup (Nested comments) - Stack Overflow
htmlの複数行コメントをコメントアウトする方法。

次の関連記事:Blogger:ページ番号付ページナビ(14)1MB制限に対応するナビの作成:その2