共有ボタン（シェアボタン）とは右画像の小さなアイコンボタン。左からgamil、blogger、twitter、facebook、buzz。以前はブログポストの下に表示させていたが、ふと気がついたら消えてしまって、そのあたりにぽっかりと意味のない空間ができていた。
共有ボタンの機能はあまり期待していないが、デザイン的に間が抜けて、カッコ悪い！
Bloggerに新しい機能が加わる度に、デフォルトのウィジェットテンプレートの仕様が変更される。しかし、このブログは、他のブログの多くがそうであるように、テンプレートをカスタマイズして使っているため、仕様は以前のままで変更は反映されない。
ウィジェットテンプレートをデフォルトに戻せば、共有ボタンも表示されるはずだけど、そんなことをしたらレイアウトデザインがぐちゃぐちゃに…。
ちなみにBloggerの「ダッシュボード」→「デザイン」→「ブログの投稿」の「編集」→「ブログの投稿の設定」ダイアログでは、ちゃんと共有ボタンを表示させるようにチェックを入れてある。とりあえず、カッコ悪さをなんとかしないと。現在のテンプレートを編集することにした。
Bloggerの「ダッシュボード」→「デザイン」→「htmlの編集」へ。
「テンプレートをすべてダウンロード」をクリックして、バックアップをとり、「ウィジェットのテンプレートを展開」をチェック。
自分の場合は、テンプレートを編集するとき、ブラウザ上ではいろいろ不都合があるので、ソースを外部エディターにコピーペーストして変更している。
変更箇所は「 <b:includable id='shareButtons' var='post'> 」で検索。
ボタンのaタグが５つ並んでいるので、それぞれのaタグのclass=''に不足しているclass名「goog-inline-block」を追加。class=''の先頭部分に追加したので、「goog-inline-block」の後に半角スペースを入れて、以下のように。
<a class='goog-inline-block share-button sb-email' …
５つのaタグのclass=''すべてに同様のclass名「goog-inline-block」を追加して保存、ブラウザの編集テキストエリアに戻して[テンプレートを保存]をクリックして、ブログを表示してみると、共有ボタンが表示されたが、４つ目のボタンの後で改行されたようになり、5つ目のボタンが一つだけ下にとび出してしまう。
他の人の共有ボタンが正しく表示されているBloggerのソースを眺めるなどして、修正。
どうも「 <b:if cond='data:post.sharePostUrl'> 」が邪魔をしている模様なので、これを削除、対になる閉じタグの</b:if>も削除。
同様に保存して、デザインを確認。変化無し。再度調べてみると、
「 <b:if cond='data:post.sharePostUrl'> 」のかわりに
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'>
>></b:if>
が必要らしいので、追加してみると今度はうまくいった。以前のように共有ボタンが表示され、意味の無い空白がなくなった。
変更・追加箇所は下画像のとおり。赤が削除、緑が追加。なお画像の右側にもソースが続くがその部分の変更は無し。
「ブログの投稿の設定」ダイアログを見ると、「+1」ボタンも表示される設定になっている（最初の画像参照）。ということは、そのスクリプトを足してやれば表示されるはずなので、ついでに「+1」ボタンも表示させることにした。
こちらは簡単、以下のソースをheadタグの間か、bodyの閉じタグの前に追加するだけ（Bloggerの場合）。
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'ja'} </script>
分かりやすいbodyの閉じタグの前に追加してみた。結果、右図のように。
No comments:
Post a Comment