デフォルトデザインのStinger3では、はてなブックマークボタンのアイコンだけが他のアイコンと違います。
今回は、はてなブックマークボタンのデザインを変更する方法をご紹介したいと思います。
上記画像のように通常のはてブアイコンはちょっと異なります。
ご覧のようにひとつだけ異なるので、統一感が欲しいところ。
なので他のアイコンと同様のデザインに変更したいと思います。
はてなブックマークボタンのデザインを変更
用意した挿入コードをそのまま入れ替えると、ボタンのデザインを変更することができますが、一応手順からご説明しますね。
まず、はてなブックマークボタン生成ページから挿入コードを生成します。
⇒http://b.hatena.ne.jp/guide/bbutton
1. ボタンタイプは右側を選択します。
2. ボタン設定は通常ページのアドレスとタイトルを挿入するのですが、各記事ごとに反映させたいのでまずは何でもいいので「テスト」と入力し、後から編集を行います。
ブックマーク数はバーティカルを選択し、表示言語は日本語を選択します。
上記の設定で生成されるコードはこちら。
上記の“テスト”という部分に下記コードを書き換えるわけですが、これは各ページへのリンクを指します。
したがってトップページのみのブックマークではなく、各記事ごとのブックマークになるのです。
最初の“テスト”には、ページのアドレスを指定するために
1 | <?php the_permalink(); ?> |
を挿入。
次の”テスト”には、ページのタイトルとサイト名を入れる、
1 | <?php the_title(); ?>|<?php bloginfo('name'); ?> |
を挿入します。
サイト名を入れたくない場合は、
1 | <?php the_title(); ?> |
のみでもオッケーです。
完成コードはこちらです。
1 2 3 4 5 | <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> |
このコードを指定の場所に入れ替えると完了となります。
上記コードは共通のコードなのでそのままコピペして指定の箇所にコピペしてくださいね。
場所は、ダッシュボードから「外観」⇒「テーマ編集」⇒「sns.php」の下記画像の箇所に置き換えします。
最後に「ファイルを更新」をクリックすると完了となります。
実際に確認してみてくださいね。
僕の場合は他のソーシャルボタンも追加してますので、このようになっています。
⇒Stinger3にPocket・Evernote・feedlyのSNSボタンを追加表示させる方法
まとめ
以上がはてブのアイコンデザインを変更する方法でした。
ちょっと違和感がある方や、デザインにこだわる方は是非試してみてくださいね☆
Sponsored Link
僕のようにSNSボタンを追加したい場合は、上記リンクにて設定方法を解説していますのでご覧になってみてください。
