Bloggerでは元々、デフォルトでGoogle+のバナーのみ
ついています。
これを一旦削除してみました。
Twitterのバナー等とセットで並べて、
新たにGoogle+バナーを追加する時に便利です。
SNSバナーは自分でカスタムしたい
管理画面から、テンプレートへいきます。
そして
テンプレート編集にいきます。
テンプレートの中から、以下のタグを探してみます。
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</div>
<b:if cond='data:top.showMobileShare'>
で検索すると見つかります。
または、上記タグが見つからない時は、
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
だけで検索してみましょう。
これはあります。
これが、モバイルのみで表示されている
Google+のバナーです。
投稿記事の下に、一個だけ表示されています。
もともと、自動でついています。
私は、Twitterの共有ボタンと、
その横に並べてGoogle+の+１ボタンを並べたかったんです。
そのためには、一旦上記バナーの中の
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
タグを削除します。
その前に必ずテンプレートはバックアップを取っておきます。
上記コードの前後にある、
<div class='post-footer-line post-footer-line-2'>
と
</div>
はそのままで、置いておいて大丈夫です。
使う事はないかもしれませんが、
フッターは3つにわかれていて、
それぞれにコンテンツを表示させる事ができます。
その中の、
post-footer-line post-footer-line-2
を今回修正したわけです。
そして、新たにGoogle+のバナーを作って、
Twitter等のバナーとセットで
貼り付けます。
簡単ですね。
post-footer-line post-footer-line-2
に貼り付けてもいいし、
投稿記事下に貼り付けてもいいです。
SNS共有ボタンはまとめると効率よい
Twitterのバナーと並べる事で、ユーザーが
共有しやすくなります。
また、見栄えもキレイです。
前後のタグを確認して、
削除します。
削除前には、必ずバックアップをとっておきましょう。
これに限らず、クセつけしておきましょう。
一度無くしたものを再構築するのは
本当に大変ですからね。
もうてんやわんやですよ。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク