ブログテーマ「STINGER5」で使用しているSNSボタンはデフォルトのヤツから少し変更と追加して使用しています。
Twitterで質問が来たので変更と追加したコードをご紹介しますね。
ダッシュボードにて「外観」→「テーマ編集」で「sns.php」を少し変更するだけで対応できます。
はてなブックマークも同じボタンに
デフォルトのSNSボタンは「はてなブックマーク」だけデザインが違います。
これを他のと同じデザインにするには、コードに書かれている「vertical」を「vertical-balloon」に書き換えるだけで対応します。
1 2 3 | <!-- はてなブックマーク vertical を vertical-balloon に変更 -->
<li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li> |
PocketとEvernoteのボタンを追加
PocketボタンとEvernoteボタンを追加する方法は、上記のはてなブックマークのコードの下に下記のコードを追加します。
それぞれのボタンは <li> 〜 </li> で定義されているので、</li> の下に追加ってことです。
1 2 3 4 5 6 | <!-- Pocket -->
<li><a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="<?php get_permalink(); ?>" data-pocket-count="vertical" data-pocket-align="left" >Pocket</a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</li>
<!-- Evernote -->
<li><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a>
</li> |
本日のまとめ
コードを見るとアラビア語みたいで何が書かれているのか分からない感覚に人も、これならなんとか変更出来るんじゃないでしょうか？
気になる人は是非試してみて下さいね。
