先月にこのブログに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 == "item"'>
<!-- 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 == "item"'>
<!-- 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が動きます。 |
やや動きが重くなるのはご愛嬌ですが、ブログが華やかで便利になります！
