スティンガー8

STINGER8のSNSボタンをCSSでオリジナルデザインにカスタマイズ

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

記事下に設置されてるSNSボタンのデザインを、押しボタン風に変えてオリジナルなものを使っているブログやサイトをよく見かけるようになりました。

 

カーソルを合わせた時にアクションがあると、私の場合はついつい何度も見てみたくなってしまって、無意識のうちにボタンの方にカーソルを合わせてしまいます。

変化をつけることでそちらに意識を誘導する効果もあるので、押しボタンがあれば押してみたくなるのが人間の心理というものではないでしょうか。

 

また、SNSボタンに限らず言えることですが何も変化がないと、その先にリンクがあるのかどうかユーザーに認識されない可能性も考えられます。

アクションという付加価値を加えることで、明確にリンクであることを伝えるという意味もあります。

 

ともあれ、前々から押しボタン風に変えてみたかったので、今回はSTINGER8のSNSボタンをCSSでカスタマイズしていきたいと思います。

STINGER8のSNSボタン

ワードプレスのSTINGER8で、標準装備されているSNSボタンは以下のものになります。

 

 

若干並び順を変えたこととLINEの代わりに「feedly」を追加しましたが、それ以外は全てデフォルトのままになります。

 

ボタンの追加方法は以下の記事でご紹介していますので、気になる方は参考にして下さい。

参考:STINGER8でRSSとfeedlyを記事下のSNSボタンに追加・設置する方法

 

このままでも十分機能しますが、押しボタンにすることに憧れていましたので、これを機に以下のようなオリジナルデザインに変更していきます。

 

 

実際に自分のブログに取り入れてみると、立体感・3D感があるのでやっぱり押しボタンは良いものですね。

これで少しでもフォローやシェアが増えてくれるとなお嬉しいのですが、効果があることに期待したいと思います。

 

SNSのカウント数は表示されませんので、もし表示させたいという場合は「SNS Count Cache」プラグインを導入するのが手っ取り早いでしょう。

それではSTINGER8のCSSを使ってカスタマイズを行っていきましょう。

 

SNSボタンのカスタマイズ方法

SNSボタンのデザインを変更する方法は、子テーマの「スタイルシート (style.css)」にコードをコピー&ペーストするだけの簡単な作業です。

 

ここでご紹介するCSSコードは「主婦ライフ」さんの記事を参考にさせて頂きました。

【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

私がまさに理想としていたボタンデザインの提供、ありがとうございます!

 

子テーマ「style.css」の編集

ワードプレス管理画面のメニュー内から、「外観」⇒『テーマの編集』をクリックします。

 

 

「STINGER8」子テーマ内の「style.css」ファイルを開いたら、以下のコードをファイル内の下の空いているスペースに全てコピー&ペーストして下さい。

 

 

長いコードになりますが、各SNSやRSSに対応させる為に必要なコードになります。

このコードを追加することによって、「Twitter・Facebook・はてブ・Google+・LINE」「Pocket・RSS・Feedly」にデザインを反映させることができます。

 

私自身はその全てのボタンを表示させてはいませんが、すぐに変更したい場合などが出てくるかもしれませんので追加しておくと便利です。

後は「ファイルを更新」して、SNSボタンのデザインが変わっているか確認しましょう。

 

CSSコードがしっかり反映されていれば、以下のようにボタンにカーソルを合わせると変化するはずです。

 

 

もし上手く反映されていない場合は、ブラウザキャッシュを削除してから再度更新を行ってみて下さい。

パソコン版では3列で表示されていますが、スマホ版は2列でキレイに表示されるので問題はないかと思います。

 

「STINGER8」SNSボタンまとめ

記事下のSNSボタン自体は、ブログやサイトで設置されているのが当たり前のようになりました。

特にワードプレスはSTINGER8のような無料テンプレートを導入するだけで、手間をかけずにSNSボタンを設置することができます。

 

しかし、それではどこのブログでも似たり寄ったりのデザインになってしまうので、訪問ユーザーの印象に残ることもほとんどないでしょう。

CSSのカスタマイズはそういった問題を解消し、オリジナルなデザインに変えることのできる便利な機能です。

 

STINGER8を利用されている場合は、何かとカスタマイズする機会も多いと思いますので、SNSボタンをオリジナルデザインに変更される際の参考にして下さい。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール