Page 5 of 5 記事フッターの配置換えとソーシャルブックマークボタン編
「Face Book」「Twitter」「はてなブックマーク」「AddThis」
先ずは記事フッターについて少し書いておきましょう…
記事フッターの HTML は default では以下のようになっています…
<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!!
コメントを投稿