概要 & 必要性
当サイトでは…タイムスタンプとタイトルの間に…
右寄せで「共有ボタン」を表示させていますが…
「共有ボタンを表示」設定は OFF で…
デフォルトの「共有ボタン」ではなく…
オリジナルのソーシャルブックマークボタンです…過去記事の…
Bloggerの共有ボタンに「新 はてなブックマークボタン」を追加する
の時点ではデフォルトの「共有ボタン」に…
オリジナルを5個追加して表示させていましたが…
その後テンプレートを2カラムから3カラムに変更しまして…
「HTML」を入れ替える際にテンプレートデザイナーを使って…
レイアウト構造を変更してから入れ替えたところ…
正常に表示しなくなったので…「widget_css_bundle」を覗いてみると…
「共有ボタン」部分の「CSS」はダミーコンテナやらネガティブマージンやらが…
細かく指定されていて…ありゃまぁ的な事になっていますし…
「レイアウトテンプレート」と「デザインテンプレート」では…
そもそも構造が違いすぎるし…
カスタマイズして楽しめるのは「レイアウトテンプレート」だし…
「メールで投稿」「Blog This!」「Google Buzz」は微妙だし…
ならいっそ自作して仕様変更にも影響されない好きなボタンだけにして…
今まで記事を挟んで上下2箇所に表示していたのを…
上だけにして記事フッターにはカウント付きの…
「はてなブックマーク」「Face Book」「Twitter」の大きなボタンと…
共有ボタン設置サービスによるボタンも付けて…ってな感じに…
尚…カスタマイズしたからといって「共有アイテム数」が激増する…
なんて事はありません…( ̄ー ̄)邪笑
当サイトのような辺境のサイトで…
「Google」以外何のアカウントも無いので自身でも共有しないと…
軒並み「0」が並ぶ事に…
「共有ボタン」の作成
先ずは枠線と背景を作成します…
システム標準の画像ソフトで充分です…
当サイトの例ですので…お好きなサイズ、色でどうぞ…サンプルは2倍サイズです…
右端ボタン用
21x21 #c0c0c0 に 20x20 #f3f3f3 を重ねて保存
左端ボタン、挟まれるボタン用
21x21 #c0c0c0 に 20x19 #f3f3f3 を右寄せで重ねて保存
右端ボタンの背景が横 1px 狭くなりますが…
後でネガティブマージンを設定しなくて済むので気にしない方向で
この2種類の画像を並べると枠線と背景になります…
次にボタンを設置したいソーシャルブックマークサイトの…
配布しているボタン画像を入手します…サイズは 16x16 です…
オリジナルアイコン配布サイトの画像を使う場合は著作権に注意してください…
ロールオーバーで画像を切り替えるためにマウス OFF 時の画像を作成します…
入手した画像を画像ソフトでグレースケール化して…
適宜カラーチェンジャーで色を調整します…
右端ボタンに配置するソーシャルブックマークサイトを決めて…
設置したいソーシャルブックマークサイト全てのマウス ON / OFF 個別画像を…
最初に作った枠線、背景画像の任意の位置に重ねて作成します…
「共有ボタン」全体の四隅を角丸にしたい場合は 21x21 の透過画像に…
右端ボタン、左端ボタンを重ねて…
背景消しゴムでそれぞれ右端、左端上下を 1px 四方消して保存して…
透過左端ボタン、透過なしの挟まれるボタン、透過右端ボタンの3種類を使います…
「CSS Sprites Rule」の設定
この際だからサイトの画像を1枚にまとめてみよう…っていう方は…
Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ
Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】
を…参照してそのままボタンを登録してください…
当サイトの場合 231x42 でこんな感じ…
この画像をそのまま使いたい場合は左右の赤い領域を透過してから使ってください…
出来上がった画像はお好きな場所にホストしておいてください…
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='"//www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' target='_blank'>
<span class='id129' title='Facebook::Share'/></a><a class='share-inline-block share-button_passer-by198' expr:href='"//twitter.com/home?status=" + data:post.url' target='_blank'>
<span class='id127' title='Twitter::Tweet'/></a><a class='share-inline-block share-button_passer-by198' expr:href='"//digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>
<span class='id131' title='Digg::Submit'/></a><a class='share-inline-block share-button_passer-by198' expr:href='"//del.icio.us/post?url=" + data:post.url + "&title=" + 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='"//www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'>
<span class='id121' title='Google::Bookmarks'/></a><a class='share-inline-block share-button_passer-by198' expr:href='"//bookmarks.yahoo.co.jp/action/bookmark?t=" + data:post.title + "&u=" + data:post.url' target='_blank'>
<span class='id119' title='Yahoo!::Bookmarks'/></a><a class='share-inline-block share-button_passer-by198' expr:href='"//buzzurl.jp/entry/" + data:post.url' target='_blank'>
<span class='id123' title='Buzzurl::Bookmarks'/></a><a class='share-inline-block share-button_passer-by198' expr:href='"//clip.livedoor.com/redirect?link=" + data:post.url + "&title=" + data:post.title + "&jump=myclip"' target='_blank'>
<span class='id117' title='Livedoor::Clip'/></a><a class='share-inline-block share-button_passer-by198' expr:href='"//newsing.jp/nbutton?url=" + data:post.url + "&title=" + 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&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 == "item"'>
<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'/>
つまり…ラインは3個在るのに使っているのは1個だけ…
何故此の様になっているのかは甚だ疑問ですが…
このままでは「アイテムの並べ替え」を行っても…
到底イメージ通りの配置とはなりません…
なので…「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 != "archive"'>
<b:if cond='data:blog.pageType != "index"'>
<!-- 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&layout=box_count&show_faces=false&width=48&action=like&font=arial&colorscheme=light&height=65&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」は外してオリジナルを表示しています…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿