設置方法は沢山のブログで紹介されていますね。（結構手間取ったけど）
しかし、ふとモバイル版の画面を見ると「あれ、消えてる！』
そう、モバイル版のテンプレートでは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』の語を検索します。
『<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>』を丸ごと差し替えます。
差し替え部分は自分で用意できるならそれでもいいですが、記事にある通り忍者ツールズの『忍者おまとめボタン』で作成するのが簡単です。（無料登録が必要ですが）
忍者おまとめボタン
http://www.ninja.co.jp/omatome/
好みのボタンとスタイルに設定すると、差し替えるタグのテキストコードを出力してくれます。それをコピーして差し替え部分に貼付けて保存します。
PC版で見ると全く変化ありませんが、モバイル機器で見るとちゃんと表示されてます。
ちなみにSafariブラウザだと開発メニューのユーザーエージェント切り替えでiPhone風に見る事が出来ます。（開発メニューはファイルメニューの環境設定の詳細設定タブにあります）
0 件のコメント:
コメントを投稿
お気軽にコメントどうぞ！長文も一言でもOK。古い記事でも頂けると嬉しいです。（Safariで公開できない場合は設定／プライバシー／サイト越えトラッキングを防ぐをOFFにしてください）