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

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

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

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

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

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

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

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

1.ボタン表示コードを取得する

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

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

 1-2.
  「設置ボタンを1つずつ選択して作成」

1-3.
  Blogger を選択します。
 

 1-4.
  ボタンに表示させたいサービスをどんどん選んで行きます。
  あんまり20個も30個も設置しても色気がないので
  5~6個が良いんじゃないかと思います。

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

  1-5.
  もうこれでいいやと思ったら
  右下の「プレビュー&コードを取得する」を押します。



  
 1-6.
  コードが表示されますので、コピーしておきます。
  メモ帳とかに残しておくと良いかも。


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

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

2-2.
  「モバイル」の下にある設定ボタンを押します。



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


 2-4.
  「保存を押しておきます。」
 


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

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

3-2.
  「ブログで使用中」の下の「HTMLの編集」を押します。

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

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


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

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




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

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

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



 3-6.
   この 1番目の goog-inline-block dummy-container が含まれる行を
   下記の通り編集します。


編集前


編集後

   先頭に <!-- を、末尾に --> を付けます。
   成功すると、行全体が茶色い文字になります。

3-7.
   作業3-6で茶色くした行の一行下に
   作業1で取得したコードを張付けます。


編集前


編集後

 3-8.
   張付けが完了したら、ページ上の「テンプレートを保存」を押します。

4.表示を確認する。

 以上で設定は完了です。
 携帯電話からブログを開いて表示されるかを確認します。



 このブログにも無事に表示されるようになりました。
 
その他. 
 表示が出来る携帯電話がない場合は
 作業  2-4.の箇所で「プレビュー」を押すと
 PCから携帯電話で表示した画面をプレビュー出来ます。

スポンサードリンク

1 件のコメント :

  1. モバイル版、こちらのページのおかげでできましたーーーうれしい! ありがとうございますっ!!!

    返信削除