Sponsored Link
Stinger3のはてなブックマークボタンのデザインを変更してみた

デフォルトデザインのStinger3では、はてなブックマークボタンのアイコンだけが他のアイコンと違います。

今回は、はてなブックマークボタンのデザインを変更する方法をご紹介したいと思います。

Sponsored Link

上記画像のように通常のはてブアイコンはちょっと異なります。

スクリーンショット 2015-04-10 3.06.09

ご覧のようにひとつだけ異なるので、統一感が欲しいところ。

なので他のアイコンと同様のデザインに変更したいと思います。


はてなブックマークボタンのデザインを変更

用意した挿入コードをそのまま入れ替えると、ボタンのデザインを変更することができますが、一応手順からご説明しますね。

まず、はてなブックマークボタン生成ページから挿入コードを生成します。

http://b.hatena.ne.jp/guide/bbutton

スクリーンショット 2015-04-11 23.16.11

1. ボタンタイプは右側を選択します。

2. ボタン設定は通常ページのアドレスとタイトルを挿入するのですが、各記事ごとに反映させたいのでまずは何でもいいので「テスト」と入力し、後から編集を行います。

ブックマーク数はバーティカルを選択し、表示言語は日本語を選択します。

上記の設定で生成されるコードはこちら。

スクリーンショット 2015-04-11 23.41.28

上記の“テスト”という部分に下記コードを書き換えるわけですが、これは各ページへのリンクを指します。

したがってトップページのみのブックマークではなく、各記事ごとのブックマークになるのです。

最初の“テスト”には、ページのアドレスを指定するために

を挿入。

次の”テスト”には、ページのタイトルとサイト名を入れる、

を挿入します。

サイト名を入れたくない場合は、

のみでもオッケーです。

完成コードはこちらです。

このコードを指定の場所に入れ替えると完了となります。

上記コードは共通のコードなのでそのままコピペして指定の箇所にコピペしてくださいね。


場所は、ダッシュボードから「外観」⇒「テーマ編集」⇒「sns.php」の下記画像の箇所に置き換えします。

スクリーンショット 2015-04-11 23.11.34

最後に「ファイルを更新」をクリックすると完了となります。

実際に確認してみてくださいね。

僕の場合は他のソーシャルボタンも追加してますので、このようになっています。

feedly2

Stinger3にPocket・Evernote・feedlyのSNSボタンを追加表示させる方法

まとめ

以上がはてブのアイコンデザインを変更する方法でした。

ちょっと違和感がある方や、デザインにこだわる方は是非試してみてくださいね☆

僕のようにSNSボタンを追加したい場合は、上記リンクにて設定方法を解説していますのでご覧になってみてください。