Bloggerモバイルテンプレートに、はてなボタンを設置する方法

Bloggerは標準で、はてなブックマークのボタンがつきません。
設置方法は沢山のブログで紹介されていますね。（結構手間取ったけど）

しかし、ふとモバイル版の画面を見ると「あれ、消えてる！』
そう、モバイル版のテンプレートではPC版に設置した、はてなボタンが表示されません。

ちょっと検索してみましたが意外と設置方法が見つからない・・・。
それらしい情報も、HTMLをかじった程度の知識では厳しい感じ。
っていうかBloggerカスタマイズ難しくない？
完全に甘く見てたわ。自分の力不足を痛感。素直にFC2かはてなにすれば・・・。

しばらく悩みましたがようやく参考になるページを見つけて設置に成功しました。
ここを読めば多少知識のある人ならすぐ解ると思います。

私的ことなのですが…
http://repworlds.blogspot.jp/2013/04/blogger.html
amelt LLC
http://www.amelt.net/imc/design/2003/#i

備忘録を兼ねて自分のようなレベルの人向けに記録してみます。

（2014/4現在の内容です。テンプレート書換えにはバックアップを取りましょう）

　まず基本的な事ですが『モバイル版のテンプレート』を書き換えるのではなく、テンプレートの中にPC向けとモバイル向けの両方が記載されているようです。（こんな事すら知らなかった（恥））


（１）初めにモバイルテンプレートを選択してモバイル版を『カスタム』にします。そのままプレビューしても一見PC版のように見えますが気にしません。

（２）その後、テンプレートのHTMLの編集に入ります。

（３）HTMLの記載スペースをクリックして『showMobileShar』の語を検索します。

『<b:if cond='data:top.showMobileShare'>』と『 </b:if>』タグの間にある
『<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>』を丸ごと差し替えます。

　差し替え部分は自分で用意できるならそれでもいいですが、記事にある通り忍者ツールズの『忍者おまとめボタン』で作成するのが簡単です。（無料登録が必要ですが）

忍者おまとめボタン
http://www.ninja.co.jp/omatome/

　好みのボタンとスタイルに設定すると、差し替えるタグのテキストコードを出力してくれます。それをコピーして差し替え部分に貼付けて保存します。

PC版で見ると全く変化ありませんが、モバイル機器で見るとちゃんと表示されてます。

　ちなみにSafariブラウザだと開発メニューのユーザーエージェント切り替えでiPhone風に見る事が出来ます。（開発メニューはファイルメニューの環境設定の詳細設定タブにあります）