楽天モーションウィジェットのスマホ版を記事下に表示させたい！Bloggerモバイルで表示させる方法

楽天モーションウィジェットはブログに貼るとたくさんの方にクリックしていただけるツールですが、最近スマホ用のウィジェットが追加されました。

このGoogle Bloggerのサービスはスマホからアクセスするとモバイル対応のページになります。
BloggerのカスタマイズはPC版だと簡単にできますが、モバイル版のカスタマイズは結構複雑なので、調べてみました。

まずはじめにBloggerのメニューから「テンプレート」
→「HTMLの編集」と押します。

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

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

ブラウザのページ内検索などを使って
<data:post.body/>
という部分を検索すると2ヶ所出てくると思います。

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

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

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

ここに楽天のスマホ用のモーションウィジェットのコードを貼りつけます。

<data:post.body/> <div style='clear: both;'> ここに楽天モーションウィジェットのコードを貼りつけます。 <!-- clear for photos floats --> </div>

これで完成です。

スマホでBloggerにアクセスするとこのように楽天モーションウィジェットが現れます。