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

Page 4 of 5 HTML マークアップ編

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

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

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

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

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

<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>

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

<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 はこんな感じ…

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」に…

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

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

次項は記事フッターに表示させている「共有ボタン」についてです…

• Prev
• 1
• 2
• 3
• 4
• 5
• Next

Blogger Tips Current-Label : Blogger Template Customize