iPhone Androidにもzenbackを表示したい！Bloggerモバイルでzenbackを表示させる方法

先月にこのブログにzenbackを導入してみてとても気に入りました。
特に関連記事が見やすくて素晴らしいです！
ありがたいことにアクセス数も増加しました。

このブログの統計をみてみるとアクセスの約20％がAndroidユーザー、約10％がiPhoneユーザーです。

そこでモバイルテンプレートにもzenbackを導入してみたかったのですが、検索してもその方法を見つけることができなかったので、他のサイトを参考にして試行錯誤し、導入してみました。

特に「Bloggerにzenbackを美しく導入する方法」をかなり参考にしました。
ほとんど丸写しかも。。。

まずはzenbackでCODEボタンを押して

導入のためのスクリプトコードをコピーして、
メモ帳などに貼りつけ、次のように編集していきます。

取得してきたコード

<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//edostyle.blogspot.com/&nsid=-----&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->

見やすく改行

<!-- X:S ZenBackWidget --> <script type="text/javascript"> document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//edostyle.blogspot.com/&nsid=-----&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E")); </script> <!-- X:E ZenBackWidget -->

赤文字を部分を追加した完成コード

<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- X:S ZenBackWidget --> // <![CDATA[ <script type="text/javascript"> document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//edostyle.blogspot.com/&nsid=-----&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E")); </script> // ]]> <!-- X:E ZenBackWidget --> </b:if>

この完成コードを次の手順でテンプレートに貼りつけます。

Bloggerのメニューから「テンプレート」
→モバイルの下にある歯車アイコンを押します。

次の画面で

「はい。携帯端末でモバイル テンプレートを表示する。」と

モバイル テンプレートを選択で「カスタム」に設定し

保存します。

再びBloggerのメニューから「テンプレート」
→「HTMLの編集」と押していきます。

次の画面で「続行」ボタンを押して編集作業に入ります。

必ず「ウィジェットのテンプレートを展開」に
チェックを入れてください。

ここから編集作業に入りますので、メモ帳等でHTMLのバックアップをおすすめします。
バックアップが出来たら、ブラウザのページ内検索などを使って
<data:post.body/>
という部分を検索すると2ヶ所出てくると思います。

1つめはパソコン用のテンプレートで
2つめはモバイル用のテンプレートとなっているようです。

その後のコードは次のようになっています。
1つめのパソコン用も2つめのモバイル用もここは同じコードとなっています。

<data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

ここに次のように完成コードを貼りつけますが、
パソコン用のテンプレートのzenbackを導入したい場合は1つめの<data:post.body/>付近に完成コードを貼りつけます。

モバイル用のテンプレートのzenbackを導入したい場合は2つめの<data:post.body/>付近に完成コードを貼りつけます。

モバイル用とパソコン用のテンプレートのzenbackを導入したい場合は1つめと2つめの<data:post.body/>付近に完成コードを貼りつけます。

実際に完成コードを貼りつけます。

<data:post.body/> <div style='clear: both;'> ここに完成コードを貼りつけます。 <!-- clear for photos floats --> </div>

貼りつけ後

<data:post.body/> <div style='clear: both;'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- X:S ZenBackWidget --> // <![CDATA[ <script type="text/javascript"> document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//edostyle.blogspot.com/&nsid=-----&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E")); </script> // ]]> <!-- X:E ZenBackWidget --> </b:if> <!-- clear for photos floats --> </div>

貼りつけが終わったら「テンプレートを保存」ボタンを押します。

するとご覧のようにスマートフォンのページでもzenbackが動きます。

やや動きが重くなるのはご愛嬌ですが、ブログが華やかで便利になります！

参考にしたBloggerにzenbackを美しく導入する方法に、zenbackの関連記事精度を高める方法も載っているので、合わせてご覧ください。