前の関連記事：Blogger:モバイルサイト(2)引用符の枠がはみ出る問題
Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で導入したものをモバイルサイトにも導入します。結構あちこち修正が必要でした。
インデックスページでページ番号付ページナビが表示されるようにする
管理画面→テンプレート→HTMLの編集、ウィジェットへ移動→Blog1
この「ブログの投稿」ウィジェットの中の<b:includable id='mobile-post' var='post'>をみつけます。
この上行に以下のインクルードをペーストします。
<b:includable id='mobile-page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,numPages: 5,firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script>
<div class='clear'/>
</div>
</b:includable>
Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で設置した<b:includable id='page-navi'>を共用してもいいですが、表示するページ数などを変更したいと思い新たにインクルードを作成しました。
5行目のperPageはレイアウト画面のブログの投稿→メインページの投稿数と同じにしておかないといけません。
次に<b:includable id='mobile-main' var='top'>の中にある<b:include name='mobile-nextprev'/>を探します。
これを以下に置き換えます。
<b:if cond='data:blog.pageType == "index"'> <b:include name='mobile-page-navi'/> <b:else/> <b:include name='mobile-nextprev'/> </b:if>
ページ番号をクリックしても色が変わらない
このブログではperPageを5、numPagesを3にしました。
こんなふうにページナビが表示されます。
本来は表示しているページの枠が黒くなり、ページ番号が変わっていくはずです。
しかし今のままではずっと1の枠が黒くなったままでページ番号が更新されません。
どうやら現在何ページ目かが認識されていないようです。
ChromeでUser Agentを変更しても症状が再現されます。
現在何ページ目であるのかはURLのupdated-max=の値が一致するかどうかで判断しているようです。
PCパージョンでは問題なく動いていますのでChromeでUser Agentを変更してupdated-max=の値を比較してみました。
モバイルサイトではURLの「:」が「%3A」にエンコードされておらず
これは普通にパソコンのChromeでみたものです。
1行目がフィードで得た日時をURLエンコードしたものです。（encodeURIComponent(json.feed.entry[i].published.$t.substring(0, 19) + json.feed.entry[i].published.$t.substring(23, 29));//iは前ページの一番古い投稿番号）
2行目以降がlocation.hrefで得たものです。
「2013-08-18T08%3A50%3A00%2B09%3A00」の部分がちゃんと一致していますね。
ところがChromeでUser AgentをiOS5に上書きしたものでは、location.hrefで得たものは「2013-08-22T08:50:00%2B09:00」となって一致しません。
つまり「:」が「%3A」にエンコードされていないのです。
Androidでも同じでした。
ということでwww.mybloggerblog.com.jsのf = encodeURIComponent(f);の後ろにnitiji=f.replace(/%3A/g,":");といれて「%3A」を「:」にもどしたnitijiという変数を作りました。
それでif (m.indexOf(f) != -1) をif (m.indexOf(f) != -1||m.indexOf(nitiji) != -1) と書き換えて、どちらかが一致すればよいようにしました。
実際にファイルを書き換えるのは1箇所だけです。
if (m.indexOf(f) != -1)を以下に置換します。
nitiji=f.replace(/%3A/g,":");if (m.indexOf(f) != -1||m.indexOf(nitiji) != -1)あとは書き換えたファイルをGoogleサイトなどにアップロードしてリンクを貼りなおします。
これでちゃんと現在のページ番号が反映されるようになりました。
ラベル名をクリックされたときに表示される投稿数を設定する
ラベル名をクリックしたときに表示されるインデックスページはページ番号付ページナビのスクリプトを通していないものですのでこのとき表示されるページ数は別に設定する必要があります。
まずは投稿本文内のラベルの設定を変えます。
モバイルサイトで投稿本文内にラベル名を表示するためには<b:includable id='mobile-post' var='post'>の中の<div class='post-footer-line post-footer-line-1'>などにつづけて以下を挿入します。
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "&max-results=7"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
5行目のmax-results=7が1ページあたりに表示する投稿数ですので先ほど設定したperPageと同じにします。Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法ではdata:label.urlに「?max-results=5」をつけるようにしました。
モバイルサイトからのアクセスですとdata:label.urlのうしろに既に「?m=1」がついているので、PCサイトの「?」に代わって「&max-results=5」がつくようにしないといけません。
ラベル一覧をモバイルサイトに表示させる
Blogger：ラベル設定(4)モバイルサイトでラベルリストを表示の方法では表示させる投稿数が制限できません。
しかし既にBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で設定したPCサイト用のウィジェットではPCサイトに飛んでしまいます。
そこでモバイルサイト用のラベルリストウィジェットを用意する必要があります。
すでにあるPCサイト用のウィジェットの中で場合わけをしてもよいのですが、レイアウトの自由性を確保するために新たにモバイルサイト用のウィジェットを作成することにします。
Blogger：ラベル設定(1)ラベルのリスト表示のようにもう一つラベルリストを作ります。
2個目のウィジェットはid='Label2'となっているはずですのでテンプレートのHTMLで <b:widget id='Label2' locked='false' title='ラベル' type='Label'>を探します。
モバイルサイトでのみ表示させるために <b:includable id='main'>の下行に<b:if cond='data:blog.isMobile'>、対応する</b:includable>の上行に</b:if>を挿入します。
このウィジェット自体をモバイルサイトで表示させるためにmobile='yes'を<b:widget id='Label2' locked='false' title='ラベル' type='Label'>を追加します。
あとはウィジェトの中に出てくる'data:label.url'を'data:label.url+ "&max-results=7"'に変更します。2箇所あるはずです。
<b:widget id='Label2' locked='false' mobile='yes' title='ラベル' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.isMobile'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url+ "&max-results=7"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url+ "&max-results=7"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>
ラベルウィジェットを丸ごと抜き出してみました。色のついた行が手を加えた部分です。参考にしたサイト
How to add Number Page Navigation widget in BlogSpot/blogger blog? | My Blogger Blog
この記事で使わせて頂いたページ番号付ページナビです。
0 件のコメント:
コメントを投稿