*

[Stinger3] はてなブックマークボタンのデザインを変更して他のSNSボタンと見た目をそろえる方法【訂正あり】

Blog/Wordpress |

Pocket

この記事では、左側のボタンを

はてブボタン変更

右側のボタンに変更する方法をお伝えします。

(※2014/2/19 方法に一部誤りがありましたので、訂正しました。)

***************

Stinger3をカスタマイズすることでHTML/CSSを学んでいる@h0saです。

シンプルでカスタマイズしやすいWordpressテーマ、Stinger3をお使いの皆様。

皆さんのSNSボタンの見た目はどのようになっていますか?
Stinger3のデフォルトだと、このようになっているはずです。

Stinger3 SNSボタン デフォルト

ん、はてなブックマークのボタンだけデザインが違う・・・

普通はあまり気にしないかもしれませんが、僕はデザイナーという職業柄かなり気になったので、他のSNSボタンと揃うようにはてブボタンのデザインを変更しました。とても簡単にできました!

冒頭でもお伝えしたとおり、今回はそのやり方をシェアします。

 

はてブボタンのデザインを変更する方法

まずは以下のサイトへアクセス。

そして以下の手順ではてブボタンのコードを取得します。

はてブボタン変更 step1 3 4

ここで注意。② ③は「仮」のものを入れておいてください。あとで変更します。

僕はこれを一時期ブログのトップページのアドレスを入力してしまっていました。これだと、各記事から「トップページ」がブックマークされることになってしまい、記事ごとにブクマされませんのでご注意ください。

では続きを。

はてブボタン変更 step3 3 2

コードをコピーしたら、お使いのテキストエディタにペーストし、「仮」の部分を書き換えます。

仮のアドレスは以下に書き換え。

<?php the_permalink(); ?>

仮のタイトルは以下に書き換え。

<?php the_title(); ?>

はてブボタン変更 step4 3 6

そして、自身のWordpressサイトで「テーマ編集」「sns.php」にアクセスして、書き換えたコードを該当部分にペーストして置き換えます。

はてブボタン変更 step5 7

そうすると、以下のようにSNSボタンのデザインが揃います!

Stinger3 SNSボタン 変更後

 

おわりに

以上、はてブボタンのデザインを変更して他のSNSボタンと見た目をそろえる方法をご紹介しました。

カスタマイズしがいのあるStinger3、今後もちょこちょこデザイン変更していきます!

下にあるのは本物のSNSボタンですので、よろしければシェアをお願いします^^

  • このエントリーをはてなブックマークに追加
  • Hiroki Hosaka

    メーカー→ベンチャー勤務のUXデザイナー。このブログではデザインやUXに関するクリエイティブネタを発信しています。さらに詳しいプロフィールはこちら

Follow on twitter Follow on facebook Follow on feedly RSS Feed