2012/01/06

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の関連記事精度を高める方法も載っているので、合わせてご覧ください。

0 件のコメント:

コメントを投稿