前の関連記事：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>で囲んでしまいます。
これでコメントアウトがうまくいきました。
991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 |
<b:if cond='!data:mobile'> <!-- モバイルサイトでないとき --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:if cond='(data:blog.pageType == "index") or (data:blog.searchLabel;) or (data:blog.pageType == "archive")'> <!-- インデックスページのとき、ラベルインデックスページのとき、月のアーカイブページのとき --> <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'> </div></div> <!-- これがないとカラムがずれる --> </b:if> </div> <b:else/> <!-- モバイルサイトのとき --> <b:include name='mobile-main'/></b:if> |
これでインデックスページ、ラベルインデックスページ、アーカイブページのときはid='pagenaviindex'のdivを置換したものになります。
置換する前のdiv要素の親要素を確認する
BloggerのHTMLはすごく複雑にdiv要素が入れ子になっていて、ソースで表示されていない要素にたどり着くのは大変です。
995 |
<div class='blog-pager' id='pagenaviindex'>ここにはいる</div> <!-- ページナビv3 --> |
Chromeでインデックスページを表示させて、この文字を右クリック→検証。
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で番号付きページナビにしたくていろいろなサイト様を拝見しています。
他所様のサイトで紹介されているやり方で試したのですが、
https://abc.blogspot.com/search/label/ラベル?&max-results=10
という後ろに表示件数がついたアドレスのページにしか表示されません。
こちらは問題なく動くのですが、私は
https://abc.blogspot.com/search/label/ラベル
というアドレスのリストページに番号付きページナビが表示される形にしたいのです。(googleにインデックスされるページが後ろになにもつかないページなので)
こちらのサイト様を拝見すると、
https://abc.blogspot.com/search/label/ラベル
のページにナビが表示されており、1ページ目、2ページ目・・・とクリックしても次々にページが進んでも
アドレスの変更はしないですよね？？
私としましてはとても理想的な形なのですが、こちらの導入はかなり高い専門知識が必要でしょうか？
貴サイトのページナビについて書かれているページを抽出してみましたが、かなり専門的なことが書かれており、
私にはちんぷんかんぷんでした。 笑
私はVaser2を触って使用しています。
ページが進んでもURLが変化しないのは、JavaScript(PageNaviIndex_Blogger)を使って、表示する内容をフィードから取得しているからです。
削除なので、ページを表示しているとき以外はURLにはページの内容が含まれていません。
これはmax-results=10といったパラメータをつけたURLのページと同じく動的に作成されるページなので、Googleにインデックスされやすいということはないと思います。