「音楽×テクノロジー」の話題を中心に、DTM、iPhone・iPad・Mac、最新テック情報、ガジェット・書評レビューなんでも書きます。ガンガンいこうぜ!みんなの訪問を、全力で待ってます。

6.11.2017

コピペOK Bloggerのページナビ番号をスマホで反映させる方法


Bloggerのページナビ番号がスマホで反映されない時の解決方法

サウンドオルビス(@soundorbis)です。

Bloggerに、ページナビゲーション機能を追加したんですよ。PCなら正常動作OK。でも、モバイル版のスマホサイトでは、ページ番号がうまく反映されませんでした。

今回は、BloggerのHTMLに直接「コピペでコードを書き込むだけ」の方法を、紹介します。スマホ版Bloggerにページナビゲーションを追加して、使いやすいブログを目指していきましょう!


Bloggerのページナビ番号を追加する方法

まずはブログ「p--q」を参考にして、Bloggerにペーナビゲーションを追加しましょう↓

Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法

スマホ版Bloggerに、ページナビ番号を追加する方法はこちら↓

Blogger:モバイルサイト(3)ページ番号付ページナビの導入

↑ここまでは、誰でもできると思います。手順通りに進んでいけばOKですから。こちらの方法も解説して欲しい時は、記事下部のコメント欄から急かしてください(笑)


Bloggerスマホ版でページ番号が反映されない

無事にページナビゲーションを追加できましたか?自分のスマホで、ブログを確認してみてください。画像のように、出ていたら正解ですね↓

Bloggerスマホ版でページ番号が反映されない01

でも...2ページ目を押しても、「2」の番号が黒くなりませんよね。大丈夫です。諦めないでください。

スマホサイトでページ番号を反映できない原因は、「正常にエンコードされないブログのURL」でした。どこでそんな話でた?って思ってる方は、「Blogger:モバイルサイト(3)ページ番号付ページナビの導入」の見出し「モバイルサイトではURLの「:」が「%3A」にエンコードされておらず」をもう一度見直してみてください。

スマホで「:」を「%3A」にエンコードさせるスクリプトを、HTML内に直接書き込んでしまえばイイんです。文章で書くと、めんどくさwww コピペでいいので、下記に掲載されているコードを試してみてください。


直接JavaScriptをHTMLに書き込んでスマホのページナビ番号を反映させよう

↓こちらコードをのコピーしてください。

<b:includable id='post' var='post'>

あなたのBloggerHTMLの編集から、⌘ command + Fで、コードを検索してください。検索したコード上部に、下記↓のコードを埋め込みましたよね?

<b:includable id='page-navi'>
  <div class='pagenavi'>
   <script type='text/javascript'>
    var pageNaviConf = {
    perPage: 7,numPages: 5,firstText: &quot;First&quot;,
    lastText: &quot;Last&quot;,
    nextText: &quot;&#187;&quot;,
    prevText: &quot;&#171;&quot;
    }
  </script>
<script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblo、.com.js"></script>
  <div class='clear'/>
 </div>
</b:includable>

↑こちらのコードの「<script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script>」を、下記のコードで書き換えてください。長いけど、ゴメンね(汗)

See the Pen Bloggerのページナビ番号がスマホで反映されない時の解決方法 by soundorbis (@soundorbis) on CodePen.

さぁ、スマホでページナビゲーションをクリックしてみましょう。無事に、ページ番号が反映されたのを確認してください。

Bloggerスマホ版でページ番号が反映されない02

お疲れ様でした。

ここにたどり着くまでに、なんどゲロを吐く思いでHTMLとにらみ合っていたことか...


どうしてBloggerのページナビ番号がスマホで反映されたの?

今回の方法で、どうしてBloggerのページナビ番号がスマホで反映されたのか?解説します。ページナビゲーションが読み込んでいたJavaScriptを、Safariで直接開いてみたんです。

<script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script>

リンクを付けておいたので、クリックしてみてください。下記のテキストのみのページが出てきます。

直接javascriptを開く

↑今回の原因が、このスクリプトの中にある

if(m.indexOf(f)!=-1)

が悪さをしていたんです。↑このコードを

nitiji=f.replace(/%3A/g,":");if (m.indexOf(f) != -1||m.indexOf(nitiji) != -1)

に書き換えることで「:」を、「%3A」にエンコードさせることができるんです。そのテキストを、直接HTMLにJavaScriptとして書き込んだというのが、今回の解決方法の流れでした。

本当は、直接HTMLに書き込むのは美しくないので、やりたくないのですが...自作サーバーを持たなくて良いのが、Bloggerのメリットでもありますからね(笑)また、外部サーバーにおくと、読み込み遅いときもありますからね。

↓こんな風に<head>や<body>内に書くことで、

<script type="text/javascript">
  JavaScriptを書き込む
</script>

JavaScriptを読み込めるってことを、覚えておいてください。


まとめ

いかがだったでしょうか?すんなりいかないところが、Bloggerの可愛いところですよね(笑)

ちなみに、今回のことを試す前に、テンプレートのバックアップを必ず取っておいてくださいね。約束ですよ!

Bloggerの使い方について、もっと知りたい方は下記にまとめておきました↓一緒に、Blogger道を極めていきましょう。


それじゃあ今回は、この辺で!!

ブログで取り上げて欲しい話題、お問い合わせは→メールフォームから、どしどしご応募ください。

すべての”Blogger達に”幸あらんことを。サウンドオルビス(@soundorbis)でした!!

soundorbis
このブログを書いてる人
サウンドオルビス フリーBGM アーティスト

よく一緒に読まれている記事

以前の記事  以前の記事
新しい記事  新しい記事