Sibatabi

旅の経験を情報として配信するブログ

【STINGER6】大きく!押しやすく!SNSボタンをバイラルメディア風にするカスタマイズ

 
stinger6

今までデザインがバラバラだったSTINGERシリーズのSNSボタンが、6から統一デザインに変更されました。

最初は気に入っていたんですが、よくよく考えてみたら小さ過ぎるんじゃないかと思い始めたので、バイラルメディア風にデザインを変更してみました。

今回は、SNSボタンのカスタマイズについてまとめておきたいと思います。

完成するとこんな感じになります。

「STINGER6」カスタマイズまとめ

PC画面。

 

「STINGER6」カスタマイズまとめ

モバイル画面。

ちなみに、下記ブログを参考にtwitterのツイート数カウントも出来るようにしてあります。

 

sns.phpの編集

上記のように、sns.phpを書き換えました。

 

snsをsns_singleに置き換え

SNSボタンを装飾するCSSはトップページも、投稿ページも共通のものなので、<div class=”sns”>を<div class=”sns_single”>に置き換えて、投稿ページのSNSボタンのみ装飾を変更出来るようにしました。

 

モバイルとPCで表示の切り替え

条件分岐を使って、モバイルとPCで表示を切り替え。

PC画面では、アイコンだけでなく文字も入るようにしています。

 

style.cssの編集

上記をstyle.cssの子テーマ共通部分に追加しました。

 

上記をPC部分に追加。

 

これでバイラルメディア風のボタンになっているはずです。

このコードは、当ブログに適用しているものをそのまま貼り付けているので、不自然な余白などが生まれてしまう場合があると思いますが、その場合は適宜調整してみてください。