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

概要＆必要性

当サイトでは…タイムスタンプとタイトルの間に…

右寄せで「共有ボタン」を表示させていますが…

現在は左の半透明リボンに置いています…

「斜め掛け半透明リボン」をサイトの上部左右に配置してテキストや共有ボタンを組み込む方法

「共有ボタンを表示」設定は OFF で…

デフォルトの「共有ボタン」ではなく…

オリジナルのソーシャルブックマークボタンです…過去記事の…

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

の時点ではデフォルトの「共有ボタン」に…

オリジナルを５個追加して表示させていましたが…

その後テンプレートを２カラムから３カラムに変更しまして…

「HTML」を入れ替える際にテンプレートデザイナーを使って…

レイアウト構造を変更してから入れ替えたところ…

正常に表示しなくなったので…「widget_css_bundle」を覗いてみると…

「共有ボタン」部分の「CSS」はダミーコンテナやらネガティブマージンやらが…

細かく指定されていて…ありゃまぁ的な事になっていますし…

「レイアウトテンプレート」と「デザインテンプレート」では…

そもそも構造が違いすぎるし…

カスタマイズして楽しめるのは「レイアウトテンプレート」だし…

「メールで投稿」「Blog This!」「Google Buzz」は微妙だし…

ならいっそ自作して仕様変更にも影響されない好きなボタンだけにして…

今まで記事を挟んで上下2箇所に表示していたのを…

上だけにして記事フッターにはカウント付きの…

「はてなブックマーク」「Face Book」「Twitter」の大きなボタンと…

共有ボタン設置サービスによるボタンも付けて…ってな感じに…

尚…カスタマイズしたからといって「共有アイテム数」が激増する…

なんて事はありません…(￣ー￣)邪笑

特に… 当サイトのような辺境のサイトで…

「Google」以外何のアカウントも無いので自身でも共有しないと…

軒並み「０」が並ぶ事に…

「共有ボタン」の作成

先ずは枠線と背景を作成します…

システム標準の画像ソフトで充分です…

当サイトの例ですので…お好きなサイズ、色でどうぞ…サンプルは2倍サイズです…

右端ボタン用

21x21 #c0c0c0 に 20x20 #f3f3f3 を重ねて保存

左端ボタン、挟まれるボタン用
左、中

21x21 #c0c0c0 に 20x19 #f3f3f3 を右寄せで重ねて保存

右端ボタンの背景が横 1px 狭くなりますが…

後でネガティブマージンを設定しなくて済むので気にしない方向で

この2種類の画像を並べると枠線と背景になります…

次にボタンを設置したいソーシャルブックマークサイトの…

配布しているボタン画像を入手します…サイズは 16x16 です…

オリジナルアイコン配布サイトの画像を使う場合は著作権に注意してください…

ロールオーバーで画像を切り替えるためにマウス OFF 時の画像を作成します…

入手した画像を画像ソフトでグレースケール化して…

適宜カラーチェンジャーで色を調整します…

右端ボタンに配置するソーシャルブックマークサイトを決めて…

設置したいソーシャルブックマークサイト全てのマウス ON / OFF 個別画像を…

最初に作った枠線、背景画像の任意の位置に重ねて作成します…

「共有ボタン」全体の四隅を角丸にしたい場合は 21x21 の透過画像に…

右端ボタン、左端ボタンを重ねて…

背景消しゴムでそれぞれ右端、左端上下を 1px 四方消して保存して…

透過左端ボタン、透過なしの挟まれるボタン、透過右端ボタンの３種類を使います…

「CSS Sprites Rule」の設定

この際だからサイトの画像を1枚にまとめてみよう…っていう方は…

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

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

を…参照してそのままボタンを登録してください…

当サイトの場合 231x42 でこんな感じ…

sprite_passer-by198

この画像をそのまま使いたい場合は左右の赤い領域を透過してから使ってください…

出来上がった画像はお好きな場所にホストしておいてください…

Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう

Blogger用のファイル保存場所としてのクラウド型オンラインストレージ「Google Drive」

Blogger用のファイル保存場所としてのクラウド型オンラインストレージ「Dropbox」

Google Blogger用のファイル保存場所としてのGoogle sites/Picasa

次に…この1枚の画像から…

各ボタンを切り出すための「CSS Sprites Rule」を指定します…

「CSS Sprites Rule」

/* Share Button Sprite
--------------------------------------------------------- */
.off01,.off02,.off03,.off04,.off05,.off06,.off07,.off08,.off09,.off10,.off11,.on01,.on02,.on03,.on04,.on05,.on06,.on07,.on08,.on09,.on10,.on11{background-image: url(Sprite 画像の URL);background-repeat:no-repeat;display:inline-block}
.off01{width:21px;height:21px;background-position:left top}
.off02{width:21px;height:21px;background-position:-21px top}
.off03{width:21px;height:21px;background-position:-42px top}
.off04{width:21px;height:21px;background-position:-63px top}
.off05{width:21px;height:21px;background-position:-84px top}
.off06{width:21px;height:21px;background-position:-105px top}
.off07{width:21px;height:21px;background-position:-126px top}
.off08{width:21px;height:21px;background-position:-147px top}
.off09{width:21px;height:21px;background-position:-168px top}
.off10{width:21px;height:21px;background-position:-189px top}
.off11{width:21px;height:21px;background-position:-210px top}
.on01{width:21px;height:21px;background-position:left -21px}
.on02{width:21px;height:21px;background-position:-21px -21px}
.on03{width:21px;height:21px;background-position:-42px -21px}
.on04{width:21px;height:21px;background-position:-63px -21px}
.on05{width:21px;height:21px;background-position:-84px -21px}
.on06{width:21px;height:21px;background-position:-105px -21px}
.on07{width:21px;height:21px;background-position:-126px -21px}
.on08{width:21px;height:21px;background-position:-147px -21px}
.on09{width:21px;height:21px;background-position:-168px -21px}
.on10{width:21px;height:21px;background-position:-189px -21px}
.on11{width:21px;height:21px;background-position:-210px -21px}

a:hover .off01{background-position:left -21px}
a:hover .off02{background-position:-21px -21px}
a:hover .off03{background-position:-42px -21px}
a:hover .off04{background-position:-63px -21px}
a:hover .off05{background-position:-84px -21px}
a:hover .off06{background-position:-105px -21px}
a:hover .off07{background-position:-126px -21px}
a:hover .off08{background-position:-147px -21px}
a:hover .off09{background-position:-168px -21px}
a:hover .off10{background-position:-189px -21px}
a:hover .off11{background-position:-210px -21px}

左上から OFF、ON の順にクラス名を指定しています…

クラス名はお好きにリネームして OK です…

画像のサイズとポジションはご自身の作成画像により適宜変更してください…

更に…「共有ボタン」全体のスタイルを指定…

「共有ボタン」全体の「CSS」

/* Share Button
--------------------------------------------------------- */
.share-inline-block{position:relative;display:-moz-inline-box;display:inline-block}
.share-button_passer-by198{width:21px;height:21px;overflow:hidden}

「HTML」マークアップ

ここから先は必ず「テンプレートをすべてダウンロード」か…

「メモ帳」などに全て貼りつけて保存してから行ってください…

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

「Ctrl + F」で <b:includable id='shareButtons' var='post'> を検索…

該当する箇所はこんな感じ…

該当する箇所の「HTML」

<b:includable id='shareButtons' var='post'>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span>
</a><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span>
</a><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
</a><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
</a><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
</a></b:if><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
</a>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</b:includable>

これを以下のように書き換えます…

書き換える「HTML」

<b:includable id='shareButtons' var='post'>
<a class='share-inline-block share-button_passer-by198' expr:href='&quot;//www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank'>
<span class='id129' title='Facebook::Share'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//twitter.com/home?status=&quot; + data:post.url' target='_blank'>
<span class='id127' title='Twitter::Tweet'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<span class='id131' title='Digg::Submit'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<span class='id115' title='Del.icio.us::Bookmarks'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<span class='id121' title='Google::Bookmarks'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//bookmarks.yahoo.co.jp/action/bookmark?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank'>
<span class='id119' title='Yahoo!::Bookmarks'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//buzzurl.jp/entry/&quot; + data:post.url' target='_blank'>
<span class='id123' title='Buzzurl::Bookmarks'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//clip.livedoor.com/redirect?link=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title +  &quot;&amp;jump=myclip&quot;' target='_blank'>
<span class='id117' title='Livedoor::Clip'/></a><a class='share-inline-block share-button_passer-by198' expr:href='&quot;//newsing.jp/nbutton?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<span class='id135' title='Newsing::Pick Up'/></a><a class='share-inline-block share-button_passer-by198' href='//fusion.google.com/add?source=atgs&amp;feedurl=http%3A//feeds.feedburner.com/laboratory-198' target='_blank'>
<span class='id133' title='Google Reader::Add to Google'/></a><a class='share-inline-block share-button_passer-by198 hatena-bookmark-button' data-hatena-bookmark-layout='simple' href='//b.hatena.ne.jp/entry/'>
<span class='id104' title='Hatena::Bookmarks'/></a>
</b:includable>

「はてなブックマーク」のスクリプトは…</body> 直前に記述しています…

<script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

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

[共有] ボタンを表示するのチェックボックスを外して…

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

任意の場所に以下を記述します…

<b:include data='post' name='shareButtons'/>

当サイトでは日付ヘッダーに…

アイテムページだけに「共有ボタン」を表示する指定で改行を入れて書いています…

アイテムページだけに「共有ボタン」を表示する

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<b:include data='post' name='shareButtons'/>
</b:if>
</h2>
</b:if>

目覚まし時計画像の記述は割愛…

日付ヘッダーの「CSS」はこんな感じ…

日付ヘッダーの「CSS」

h2.date-header{border:none;margin:0;padding:0 20px 0 0;color:#9a9;text-align:right;text-transform:none;line-height:2.4;font-size:10px;font-weight:bold;font-style:italic}

「テンプレートを保存」して完了です…

これで「オリジナルの共有ボタン」が表示されます…が…

リンク先の指定は…「Google」アカウントしか持っていないので…

未検証ですので悪しからず…(￣ー￣) 邪笑®

リンク先の指定がおかしい場合はご自身で頑張ってください…

基本は…データを参照する場合は「href」を「expr:href」に…

シングルクォーテーションの中は…

「"」は「"」に「&」は「&」にエスケープしてください…

記事フッターの配置換えとソーシャルブックマークボタン
「Face Book」「Twitter」「はてなブックマーク」「AddThis」

先ずは記事フッターについて少し書いておきましょう…

記事フッターの「HTML」はデフォルトでは以下のようになっています…

<div class='post-footer-line post-footer-line-1'>
ここに各種アイテムが配置されています…
</div>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>

つまり…ラインは３個在るのに使っているのは１個だけ…

何故此の様になっているのかは甚だ疑問ですが…

このままでは「アイテムの並べ替え」を行っても…

到底イメージ通りの配置とはなりません…

なので…「post-footer-line-2」も開いて此処に「共有ボタン」を配置しましょう…

同じ「オリジナル共有ボタン」でも勿論 OK ですが…

今回はソーシャルブックマークボタン設置サービスも使ってデザインしてみましょう…

カスタマイズするとこんな感じ…

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

「Ctrl + F」で「<div class='post-footer-line post-footer-line-2'/>」を検索…

該当する部分を以下のように書き換えます…

該当する部分の書き換え

<div class='post-footer-line post-footer-line-2 addthis_toolbox addthis_default_style' style='margin-top: 10px;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='16' src='//img1.blogblog.com/img/icon18_email.gif' width='22'/>
</a>
</span>
</b:if>
<span style='float: right;'><a class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical' href='//b.hatena.ne.jp/entry/'><img alt='hatena::bookmarks' height='20' src='//b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?expr:href=%3cdata%3apost.url%2f%3e&amp;layout=box_count&amp;show_faces=false&amp;width=48&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&amp;locale=en_US' style='margin:0 0 -5px 0; border:none; overflow:hidden; width:48px; height:65px;'/> <a class='twitter-share-button' data-count='vertical' href='//twitter.com/share'>Tweet</a></span>
<!-- AddThis Button BEGIN -->
<a class='addthis_button_preferred_1'/>
<a class='addthis_button_preferred_2'/>
<a class='addthis_button_preferred_3'/>
<a class='addthis_button_preferred_4'/>
<a class='addthis_button_preferred_5'/>
<a class='addthis_button_preferred_6'/>
<a class='addthis_button_preferred_7'/>
<a class='addthis_button_preferred_8'/>
<a class='addthis_button_preferred_9'/>
<a class='addthis_button_preferred_10'/>
<a class='addthis_button_compact'/>
<a class='addthis_counter addthis_bubble_style'/>
<script src='//s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4d91f8ef7d83f126' type='text/javascript'/>
<!-- AddThis Button END -->
</b:if>
</b:if>
</div>

「メールで投稿ボタン」もサイズ変更してついでに表示させて…

「アーカイブページ」と「インデックスページ」では…

表示しない設定ですので…表示したい方は…赤文字部分を削除してください…

「はてなブックマーク」と「Twitter」のスクリプトは…

</body> 直前に記述していますが…此処に記述しても勿論 OK です…

<script type='text/javascript' src='//b.st-hatena.com/js/bookmark_button.js' charset='utf-8' async='async'></script>
<script type='text/javascript' src='//platform.twitter.com/widgets.js'></script>

「Face Book」の「Like ボタン」は…「&locale=en_US」を削除すれば…

「いいね！」と日本語表示になりますがサイズが大きくなりますので…

サイズ調整してください…

AddThis

…のボタンについては…

サイトで確認してください…登録はしなくても設置できます…

何やら色々出来るようになるらしいですが

「テンプレートを保存」して完了です…

お疲れ様でした…

現在は「AddThis」は外してオリジナルを表示しています…

Tips Universal Header Sidebar Footer Current-Label : Main

手法	用例	手法	用例	手法	用例	手法	用例
連想の創出	愛国者に対して「軍靴の音が聞こえそうだ」などと揶揄し否定的な印象を与える…	コメント	人々を一定の方向に誘導するために「事実とは異なる解釈」をコメントさせたり「社説」にする…	プレゼンス効果	現場からの中継や縮小ジオラマなどで「臨場感」を演出し「やらせ」も交えて信用されやすくする…	分類表	一部の「ネット右翼」が批判しています…のように決まった単語・フレーズで事象を分類して極小化・極大化する…
撹乱	「第三極も含めて政党が乱立して訳が分かりません…」などと連日「情報ノイズ」で溢れさせ興味自体を失わせる…	癒着提案	TBS「安倍官房長官印象操作映像事件」のように「個別の事実」を「継ぎ接ぎ」して「誤った印象」を植え付ける…	匿名の権威	「信頼すべき消息筋によれば…」のように情報元を明かす必要がない事を逆手に取り記事の内容に権威を与える…	日常会話	お隣の「韓国」では…のように本来否定的な要素「韓国」を日常会話のように繰り返し心理的習熟効果で反応を麻痺させる…
感情共鳴	コンサートで開催場所の地名を大声で繰り返し叫ぶ…などのように「デモ」「集会」などで群集を理性ではなく感情レベルで反応させる…	歴史の書き換え	民主党の「天皇制廃止」「戸籍法廃止」「夫婦別姓」などの愛国心を低下させるための国家・民族全体に対する長期的な情報操作…	感情整列	この時間にご覧になっている貴方だけに限定100セットだけ…などと「一定のシチュエーション」を用意して群集の感情を「均一化」させる…	一次効果	「朝日新聞の従軍慰安婦捏造問題」「iPS細胞での読売新聞大誤報」など「最初に発信された情報」は嘘でも捏造でも信用されやすいという原理…
ブーメラン	坂本龍一・山本太郎などの著名人を使い原発管制報道に対する「自由の闘士」を作り出し国力を削るために「愛国者」を装った抗議運動を展開する…	心理的ショック	日本は豊かなのだと錯覚させ更に絞り取るために「飢餓」を伝え…日本は悪い事をしたと日本人を自虐的に思い込ませるために繰り返し「戦争」を伝えます…	半真実	「マニュフェストが実現出来なかったのは自民党の負の遺産のせいで民主党がダメだった訳ではない…」のように嘘の中に一面的な真実を織り込み全体を真実に見せる…	フィードバック	「支持政党無しの無党派層は過去最高」という結果を得るために世論調査の回答項目に「民主党もダメだけど自民党もダメ」という項目を設定し全体の意見に偽装する…
すり替え	「傷害」を「いじめ」「窃盗」を「万引き」「殺人事件」を「交通事故」「テロリスト」を「レジスタンス」「略奪事件」を「抗議デモ」など受け入れ易い言葉に置き換える婉曲手法…	脅威の創出	尖閣購入時に「中国の脅威」は民主党政権以降に尖鋭化していたにもかかわらず恰も「都知事発言以降に尖鋭化した」かの如く捏造し民主党には他に選択肢は無かったと責任転嫁…	社会的同意	首相の靖国参拝に「外国」から激しい反発が起こっている…などと…特定アジアだけの意見を恰も世界全体が同意していると錯覚させる…「人権擁護法案」「外国人参政権」などもこの手法…	側面迂回	民主党の原発事故対応では線量などの周辺情報は正確に報じられ枝野幸男の「直ちに健康に影響を及ぼすものではない…」の嘘の信憑性を高めメルトダウン・風向きなどの核心部分は隠蔽された…
虚偽類似	「視聴率低迷は若者のテレビ離れのせい…」「CDが売れないのは違法ダウンロードのせい…」「紅白歌合戦に韓流スターが出演できないのは日本の右傾化のせい…」など都合の良い「原因と結果の因果関係」を作り出す…	事実確認	原発安全神話を作り出したのも公共事業にジャブジャブ税金をつぎ込んだのも自民党です…など…「一面的な事実」を先に述べ「事実確認」させ…自民党政権に逆もどりして良いんですか？…と未来を誤認・錯覚させる…	毒入りサンドウィッチ	「白川総裁が自民党の経済政策を批判」「安倍総裁の経済政策発言を市場が好感し円安に振れ株価は年初来の高値」「一方でハイパーインフレを懸念する声も」…のように序文と結論の否定的報道で肯定的な報道を挟み肯定的な報道の意義を低下させる…	砂糖入りサンドウィッチ	毒入りサンドウィッチの逆の手法…

passer-by198

Dégustation?: Sepia

Search

About Me

Featured Post

2011/04/03

Posted

2011/04/03