Bloggerに縦並びで表示位置左上固定の自作ソーシャルブックマークボタンを設置する

ソーシャルブックマークボタンって…

アクセスアップに無頓着…ピン送信もしない…SNS のアカウントも無い…

ないないづくしの身にとっては興味無いのですが…

デザイン的には…とても興味深いですねぇ…

なので…ご多分に漏れずボタンだらけです…

特に…縦並びでスクロールしても表示位置固定のタイプは…

限られたスペースでのレイアウトという事を勘案すると…

とても有用ですし…何より目立ちます…

近頃は…SNS のタイムラインなど…

横幅をサイドバーで広く取るタイプのものも増えていますから…

ごちゃついたサイドバーにしないためにも…

ますます…このスペースの重要性も増す事でしょう…

しかしながら…各種ボタン設置サービスでは…

縦並びは少数派ですし…登録が必要だったり…

ボタン設置サービスのボタンが…もれなく付いたり…

デザイン的に…不満だったり…と…

じゃあ…自作しよう…そして…自作するからには…

有名な WordPress のプラグイン「sexybookmark」を超えよう

…ってな話です…「超えている」と思った方だけ導入して下さい…

当サイトには…縦並び・横並び両方設置してありますが…

現在は削除していますので削除前の状態を置いておきます…

縦並びが設置出来れば横並びは然程難しくないと思いますので…

今回は縦並びのみの解説です…

ついでに…名前も付けておきます…(￣ー￣)邪笑

「Cool Bookmarks(vertical)_passer-by198 Edition」

先ずは画像から…CSS Sprites 用の画像です…サイズは 448x62

直リンク禁止 …必ずダウンロードしてお使い下さい…
 Cool Bookmarks / CSS Sprites 用の画像


ダウンロードしたら任意の場所にホストして下さい…

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

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

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

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


CSS Sprites に関してはこちらの過去記事もどうぞ…

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

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


マウスホバー時に画像を切り替えなくてもいいや…ってな方は…

ブックマークサービスのオリジナルボタンで OK です…サイズは 32x32

ダウンロードした CSS Sprites 画像を使う場合は…

「デザイン」「HTMLの編集」から…

CSS に以下の CSS Sprites Rule を記述して下さい…

Cool Bookmarks(Vertical)_passer-by198 Edition / CSS Sprites Rule

.off01,.off02,.off03,.off04,.off05,.off06,.off07,.off08,.off09,.off10,.off11,.off12,.off13,.off14,.on01,.on02,.on03,.on04,.on05,.on06,.on07,.on08,.on09,.on10,.on11,.on12,.on13,.on14{background-image: url(Sprite 画像の URL)}
.off01{width:32px;height:32px;background-position:left top;background-repeat:no-repeat;display:inline-block}
.off02{width:32px;height:32px;background-position:-32px top;background-repeat:no-repeat;display:inline-block}
.off03{width:32px;height:32px;background-position:-64px top;background-repeat:no-repeat;display:inline-block}
.off04{width:32px;height:32px;background-position:-96px top;background-repeat:no-repeat;display:inline-block}
.off05{width:32px;height:32px;background-position:-128px top;background-repeat:no-repeat;display:inline-block}
.off06{width:32px;height:32px;background-position:-160px top;background-repeat:no-repeat;display:inline-block}
.off07{width:32px;height:32px;background-position:-192px top;background-repeat:no-repeat;display:inline-block}
.off08{width:32px;height:32px;background-position:-224px top;background-repeat:no-repeat;display:inline-block}
.off09{width:32px;height:32px;background-position:-256px top;background-repeat:no-repeat;display:inline-block}
.off10{width:32px;height:32px;background-position:-288px top;background-repeat:no-repeat;display:inline-block}
.off11{width:32px;height:32px;background-position:-320px top;background-repeat:no-repeat;display:inline-block}
.off12{width:32px;height:32px;background-position:-352px top;background-repeat:no-repeat;display:inline-block}
.off13{width:32px;height:32px;background-position:-384px top;background-repeat:no-repeat;display:inline-block}
.off14{width:32px;height:32px;background-position:-416px top;background-repeat:no-repeat;display:inline-block}
.on01{width:32px;height:32px;background-position:left -32px;background-repeat:no-repeat;display:inline-block}
.on02{width:32px;height:32px;background-position:-32px -32px;background-repeat:no-repeat;display:inline-block}
.on03{width:32px;height:32px;background-position:-64px -32px;background-repeat:no-repeat;display:inline-block}
.on04{width:32px;height:32px;background-position:-96px -32px;background-repeat:no-repeat;display:inline-block}
.on05{width:32px;height:32px;background-position:-128px -32px;background-repeat:no-repeat;display:inline-block}
.on06{width:32px;height:32px;background-position:-160px -32px;background-repeat:no-repeat;display:inline-block}
.on07{width:32px;height:32px;background-position:-192px -32px;background-repeat:no-repeat;display:inline-block}
.on08{width:32px;height:32px;background-position:-224px -32px;background-repeat:no-repeat;display:inline-block}
.on09{width:32px;height:32px;background-position:-256px -32px;background-repeat:no-repeat;display:inline-block}
.on10{width:32px;height:32px;background-position:-288px -32px;background-repeat:no-repeat;display:inline-block}
.on11{width:32px;height:32px;background-position:-320px -32px;background-repeat:no-repeat;display:inline-block}
.on12{width:32px;height:32px;background-position:-352px -32px;background-repeat:no-repeat;display:inline-block}
.on13{width:32px;height:32px;background-position:-384px -32px;background-repeat:no-repeat;display:inline-block}
.on14{width:32px;height:32px;background-position:-416px -32px;background-repeat:no-repeat;display:inline-block}

a:hover .off01{background-position:left -32px}
a:hover .off02{background-position:-32px -32px}
a:hover .off03{background-position:-64px -32px}
a:hover .off04{background-position:-96px -32px}
a:hover .off05{background-position:-128px -32px}
a:hover .off06{background-position:-160px -32px}
a:hover .off07{background-position:-192px -32px}
a:hover .off08{background-position:-224px -32px}
a:hover .off09{background-position:-256px -32px}
a:hover .off10{background-position:-288px -32px}
a:hover .off11{background-position:-320px -32px}
a:hover .off12{background-position:-352px -32px}
a:hover .off13{background-position:-384px -32px}
a:hover .off14{background-position:-416px -32px}

続いて…HTML です…

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

「Ctrl + F」で「<b:includable id='description'>」 を検索すると該当箇所は…

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

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

4列目と 5列目の間に以下のコードを貼付け…

Cool Bookmarks(Vertical)_passer-by198 Edition / HTML

<div style='text-align:center;position:fixed;top:50px;z-index:100;cursor:pointer;left:0px;width:36px;display:inline-block;line-height:0;border:1px solid #222;-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;-moz-box-shadow:2px 2px 3px #555;-webkit-box-shadow:2px 2px 3px #555;box-shadow:2px 2px 3px #777;'>
<div style='display:inline-block;padding:2px;background:#1d2b38;text-align:center;'>
<a expr:href='&quot;//www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title' target='_blank'><span class='off05 bounce' title='Facebook :: Share'/></a><br/><a expr:href='&quot;//twitter.com/home?status=&quot; + data:post.canonicalUrl' target='_blank'><span class='off13 bounce' title='Twitter :: Tweet'/></a><br/><a class='hatena-bookmark-button' data-hatena-bookmark-layout='simple' href='//b.hatena.ne.jp/entry/'><span class='off09 bounce' title='Hatena :: Bookmarks'/></a><br/><a href='https://plus.google.com' target='_blank'><span class='off07 bounce' title='Google :: plus1'/></a><br/><a expr:href='&quot;//del.icio.us/post?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span class='off02 bounce' title='Del.icio.us :: Bookmarks'/></a><br/><a expr:href='&quot;//www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span class='off06 bounce' title='Google :: Bookmarks'/></a><br/><a href='#' onclick='Evernote.doClip({contentId:&quot;ご自身の設定…当サイトでは「Blog1」&quot;,providerName:&quot;ご自身のブログタイトル&quot;}); return false;'><span class='off04 bounce' title='Evernote :: Clip'/></a><br/><a expr:href='&quot;//digg.com/submit?phase=2&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span class='off03 bounce' title='Digg :: Submit'/></a><br/><a href='//mixi.jp/show_profile.pl?id=' target='_blank'><span class='off11 bounce' title='Mixi :: Profile'/></a><br/><a expr:href='&quot;//bookmarks.yahoo.co.jp/action/bookmark?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.canonicalUrl' target='_blank'><span class='off14 bounce' title='Yahoo! :: Bookmarks'/></a><br/><a expr:href='&quot;//clip.livedoor.com/redirect?link=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title +  &quot;&amp;jump=myclip&quot;' target='_blank'><span class='off10 bounce' title='Livedoor :: Clip'/></a><br/><a expr:href='&quot;//buzzurl.jp/entry/&quot; + data:post.canonicalUrl' target='_blank'><span class='off01 bounce' title='Buzzurl :: Bookmarks'/></a><br/><a expr:href='"//newsing.jp/nbutton?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span class='off12 bounce' title='Newsing :: Pick Up'/></a><br/><a href='ご自身のフィードURL' target='_blank'><span class='off08 bounce' title='Google :: Reader'/></a><br/></div></div>

赤文字の「Newsing」は横並びでは動作しますが…

縦並びでは何故か動作しないので…動作しない場合は…

ご自身で工夫するか…削除して下さい…

マウスホバー時に画像を切り替えなくてもいいや…ってな方は…

黄色字の部分をご自身で用意した画像タグと差し替えて下さい…

<img alt='説明' class='bounce' title='タイトル' border='0' src='画像URL'/>

HTML の…1列目で全体の設定を…

2列目で縦並びボタンの設定をしています…

ご自由に弄って下さい…

黄色字の「bounce」は…

画像をバウンドさせる「jQuery UI」のアニメーションエフェクト用です…

不必要だったり…JavaScript をあまり使いたくない方は削除して下さい…

バウンドさせるには「jQuery」と「jQuery UI」を読み込む必要があります…

難しくないので…ご自身で調べて読み込んで下さい…

因みに… 当サイトでは…

バウンドに追加の設定もしてあります…こんな感じ…

<script type='text/javascript'>  
$(".bounce").hover(function(){$(this).effect("bounce",{times:3},300)}); 
</script>

尚…HTML のリンク設定に関しては…なにせ…

グーグルアカウント以外持っていないので…

動作確認のしようがありませんので悪しからず…

特に…「Mixi」と「Google+」は登録しないと使えませんので…

書き換えて下さい…

最後に…縦並びの一番上の「ぶた画像」は…

ソーシャルボタンではないので解説は割愛しましたが…

クリックすると…「挨拶」や「お奨め」が出現します…

これは…「jQuery UI」と「この記事」と「過去記事」の…

三位一体で実現できます…なにせ遅筆ですから…

記事になるまで待てない方は…挑戦してみては如何でしょう

 HTML要素を折りたたんでクリックで動的に開閉するJavaScript…複数設置可能


更には…縦並びの領域は当然ながら…

デザインを工夫すれば縦並びタブ・ナビゲーションとしても使えます…

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

2012.11.08 追記

開閉部分を削除しましたので…
メモ代わりに HTML を置いておきます…
開閉部分の HTML

<!-- トリガー部分 -->
<a class='collapse00'><img alt='Message from Administrator' border='0' class='tips bounce' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp73_ur3lk5EdzhhqnubttMKpA-pj2E1RzRsN1D7vygHzsgsUXguT5-n_s67RmpmOXSHHgCuYe3gcutRGF9JTQXDptE2uHm0Fzmpzn7ylAu9tO7LJVOfFMwstKlt2xGb4TzhgJ99PRQd0/s48/pig_social.gif' title='Message from Administrator'/></a><br/>
<!-- 本文部分 -->
<div class='accordion collapse000' style='display:none;width:400px;position:absolute;top:50px;left:39px;z-index:100;'>
<div>
<h6 class='current'>
<a href='#'>Message from Administrator</a></h6>
<div style='font-size: 13px;'>
無限の時の営みの中で…過ぎ去っていった様々な想い…<br/>
きっと…忘れない…忘れたくない…<br/>
そう思い…50の齢を重ねた…<br/>
2009年 早春にサイトを立ち上げました…<br/>
想い出の片隅にでも置いてやって下さいな…<br/>
<div align='right' style='font-style: italic;'><span class='id111 tips' title='blogger'></span>created : passer-by198</div><br/>
（この領域は…ぶた画像クリックで開閉します…）
</div>
</div>
<div>
<h6>
<a href='#'>Related Sites</a></h6>
<div class='buttons'>
<a class="east" href="//passer-by198.blogspot.com/">Sepia Memories on YouTube</a><br />
<a class="east" href="//passer-by198-infinity.blogspot.com/">Time goes by...INFINITY</a><br />
</div>
</div>
<div>
<h6>
<a href='#'>Gives a great site!!</a></h6>
<div class='buttons'>
<a class='exit' href='//jquery.com/'>jQuery</a><br/>
<a class='exit' href='//jqueryui.com/'>jQuery UI</a><br/>
<a class='exit' href='//www.anti-rothschild.net/index.html'>Anti-Rothschild Alliance</a><br/>
</div>
</div>
</div>

Tips Universal Sidebar Main Footer Current-Label : Header