2013年12月23日月曜日｜ BLOG運用メモ

Blogger のモバイルテンプレートを編集して SNS (Twitter や Facebook) 用の共有ボタンを携帯表示の記事にも設置してみる（簡易版）

前回、Bloggerのテンプレートを編集して
SNSの共有ボタンを表示出来た訳ですが、
iPhone やら Android で表示した時に表示されない！
という重大な問題が残っております。

そもそも LINE なんかPCのみの画面に出して意味あるのかという話です。

よって今回は携帯電話で表示される記事にもボタンを設置します。

前回を参考に進めます。（一部作業がかぶってます。）
http://yutcc.blogspot.com/2013/12/blogger-SNS-Button.html

０．簡単に設置したい。
　自分でAPI調べるのなんて絶対嫌だし
　なんか手軽で良いサービスないかな、と思ったら
　往年、アクセス解析でお世話になったninjaツールズが
　ボタン設置サービス提供していたので、こちらを使う事にしました。

　ツイートボタン、いいねボタンなどをまとめて簡単設置｜忍者おまとめボタン
　http://www.ninja.co.jp/omatome/

　なので、予めninjaツールズへの登録を済ませておきます。
　https://www.ninja.co.jp/register

１．ボタン表示コードを取得する

　好きなボタンを選んで、表示用のコードを取得します。
　画像を交えて簡単に

　１－１．
　　http://www.ninja.co.jp/omatome/
　　まとめツールのページにアクセスします。

　１－２．
　　「設置ボタンを１つずつ選択して作成」

１－３．
　　Blogger を選択します。
　

　１－４．
　　ボタンに表示させたいサービスをどんどん選んで行きます。
　　あんまり２０個も３０個も設置しても色気がないので
　　５～６個が良いんじゃないかと思います。

　　携帯電話表示だと横のスペースも限られるので
　　小さいアイコンが良いんでないかな。好き好きだけど。
　　

　１－５．
　　もうこれでいいやと思ったら
　　右下の「プレビュー＆コードを取得する」を押します。

　
　１－６．
　　コードが表示されますので、コピーしておきます。
　　メモ帳とかに残しておくと良いかも。

２．モバイルテンプレートを有効にする。
　作業１でコードは取得出来ました。
　次にこのコードをモバイル画面で表示するために、事前準備を行います。　

　２－１．
　　Blogger の編集画面を開きます。
　　左側に「テンプレート」の項目があるので選択します。

２－２．
　　「モバイル」の下にある設定ボタンを押します。

　２－３．
　　「はい。携帯端末でモバイルテンプレートを表示する。」を選択します。
　　「モバイルテンプレートを選択」で「カスタム」を選択します。

　２－４．
　　「保存を押しておきます。」

３．Blogger に張付ける
　作業２でモバイル画面のカスタマイズが出来るようになりました。
　次に作業１で取得したコードを、モバイル表示の Blogger に埋め込みます。　

　３－１．
　　Blogger の編集画面を開きます。
　　左側に「テンプレート」の項目があるので選択します。

３－２．
　　「ブログで使用中」の下の「HTMLの編集」を押します。

３－３．
　　テンプレートが表示されます。
　　ごちゃごちゃと訳の解らん英数字が並びます。

　　一度、キーボードの「CTRL」＋「A」などで文字を全選択→コピーして
　　メモ帳などに張付けておく、バックアップ作業をしておく事を勧めます。

　３－４．
　　落ち着いてフォームの文字をどこでも良いのでマウスで選択します。
　　キーボードの「CTRL」を押しながら「F」キーを押します。

　　すると、右上にSearchと書かれた「検索ボックス」が表示されます。

　３－５．
　　goog-inline-block dummy-container
　　↑この文字をコピーして、「検索ボックス」に張付けて
　　キーボードの「Enter」キーを押して
　　テンプレートから goog-inline-block dummy-container を検索します。

　　何度か「Enter」キーを押すと解るのですが
　　テンプレートの中には goog-inline-block dummy-container が２箇所存在します。

　　左の数字を見ながら、先頭から１番目にある
　　goog-inline-block dummy-container を探し出します。