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

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

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

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

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

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

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

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

STINGER8のSNSボタン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*-- SNSボタン --*/
.sns li a {
    position: relative;
    padding: 10px;
    color: #fff;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}

.sns li a:hover {
    -webkit-transform: translate3d(0px, 5px, 1px);
    -moz-transform: translate3d(0px, 5px, 1px);
    transform: translate3d(0px, 5px, 1px);
    box-shadow: none;
}

.sns .snstext{
    font-size: 15px;/*文字サイズ*/
    font-weight: bold;/*文字を太字に*/
}

/* ツイートボタン */
.sns .twitter a {
    background: #00acee;
    box-shadow: 0 5px 0 #0092ca;
}
.sns .twitter a:hover {
    background: #0092ca;
}
.sns .fa-twitter {
    border-right: none;
    padding-right: 0px;
}

/* Facebookボタン */
.sns .facebook a {
    background: #3b5998;
    box-shadow: 0 5px 0 #2c4373;
}
.sns .facebook a:hover {
    background: #2c4373;
}
.sns .fa-facebook {
    border-right: none;
    padding-right: 0px;
}

/* はてブボタン */
.sns  .hatebu a {
    background: #5d8ac1;
    box-shadow: 0 5px 0 #43638b;
}
.sns .hatebu a:hover {
    background: #43638b;
}
.sns .fa-hatena {
    border-right: none;
    padding-right: 0px;
}

/* Google+1ボタン */
.sns .googleplus a {
    background: #db4a39;
    box-shadow: 0 5px 0 #ad3a2d;
}
.sns  .googleplus a:hover {
    background: #ad3a2d;
}
.sns .fa-google-plus {
    border-right: none;
    padding-right: 0px;
}

/* LINEボタン */
.sns  .line a {
    background: #25af00;
    box-shadow: 0 5px 0 #219900;
}
.sns .line a:hover {
    background: #219900;
}
.sns .fa-comment {
    border-right: none;
    padding-right: 0px;
}

/* ポケットボタン */
.sns .pocket a {
    background: #f03e51;
    box-shadow: 0 5px 0 #c0392b;
}
.sns .pocket a:hover {
    background: #c0392b;
}
.sns .fa-get-pocket {
    border-right: none;
    padding-right: 0px;
}

/* RSSボタン */
.sns .rss a {
    background: #ffb53c;
    box-shadow: 0 5px 0 #e09900;
}
.sns .rss a:hover {
    background: #e09900;
}

/* Feedlyボタン */
.sns .feedly a {
    background: #87c040;
    box-shadow: 0 5px 0 #74a436;
}
.sns .feedly a:hover {
    background: #74a436;
}

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

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

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

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

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