2014年4月24日木曜日

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向けとモバイル向けの両方が記載されているようです。(こんな事すら知らなかった(恥))


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

(2)その後、テンプレートのHTMLの編集に入ります。


(3)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風に見る事が出来ます。(開発メニューはファイルメニューの環境設定の詳細設定タブにあります)
スポンサーリンク


0 件のコメント:

コメントを投稿

お気軽にコメントください!