Bloggerの共有ボタンに「新 はてなブックマークボタン」を追加する

Blogger に仕様変更がありましたので…
こちらの記事も合わせてお読みになることをお奨めします…

 Bloggerの共有ボタンに「新 はてなブックマークボタン」を追加する…修正版


当サイトと同じ「共有ボタン」を作成したい方は…

 Bloggerの共有ボタンを自作ソーシャルブックマークボタンと入れ替える方法と必要性


★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆



使いやすくなりました! はてなブックマークボタン  


使いやすくなったらしいので…

当サイトにも設置してみました…

…じゃ…ただの紹介記事になっちゃうので…

Blogger の「共有ボタン」に溶け込むように…

違和感を最小限に抑えて導入してみましょう…

先ずは Blogger の「共有ボタン」から…

「デザイン」でブログの投稿ガジェットの「編集」に入って…

[共有] ボタンを表示する…に、チェックを入れて「保存」で…

Blogger の「共有ボタン」が記事フッターに…

「メールで送信」「Blog This!」「Twitter」「Facebook」「Google バズ」

の各ソーシャルブックマークボタンが表示されるようになります…

次に上記リンクでご自身のホームページ URL を入力…

タイトルはホームページと違うタイトルにしたい場合に入力…

2011.03.11 修正

間違えました…
URL とタイトル入力フォームは空欄にして…
が正解です…
以下の記事もそれに伴い修正してあります…
ご迷惑おかけいたしました…

タイプは「シンプル」を選択します…

右に生成されているタグの…

width="20" height="20" を width="22" height="22" に書き換え…

全体をコピーして「メモ帳」にペースト…

Blogger に戻って…

「デザイン」「HTML の編集」「ウィジェットのテンプレートを展開」

「Ctrl + F」で <div class='post-share-buttons'> を検索すると…

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

…ってな感じになっていますので…

これに以下のように赤字部分を追記します…

<nobr><div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>「メモ帳」にペーストしておいたタグ
</div></nobr>

「テンプレートを保存」するとこんな感じで表示されます…



これでいいや…って方は以下は読む必要はありません…

マウスが載っていない時はこんな感じ…


マウスが載っている時はこんな感じ…


…ってな具合に…

より違和感を少なくしたい方のみ読み進んで下さい…

画像を 22px x 22px で２枚作成します…
マウス OFF 時の画像…
マウス ON 時の画像…

これを CSS Sprites で切り替えます…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


…で…先程書き換えた HTML 部分は… 当サイトの場合…

<nobr><div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/><a class='hatena-bookmark-button' data-hatena-bookmark-layout='simple' href='//b.hatena.ne.jp/entry/'><span class='マウス OFF 時の画像のクラス名' title='Hatena::Bookmark'/></a><script async='async' charset='utf-8' src='//b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</div></nobr>

…ってな感じに…

CSS Sprites 部分は…

a:hover .マウス OFF 時の画像のクラス名 { background-position: マウス ON 時の画像の横位置 マウス ON 時の画像の縦位置; }

…って書けば地味な「共有ボタン」の出来あがりぃ～～（￣ー￣）邪笑

Tips Universal Header Sidebar Footer Current-Label : Main