【Simplicity2カスタマイズ】バイラルタイプシェアボタンが一行で表示されるようにカスタマイズしたよ！

Simplicity2のカスタマイズもそろそろ一段落したから、そろそろまとめのエントリーでも書こうかな？　なんて考えている、あらくま（@sa_arakuma）です。

このブログでは『Simplicity2』を使わせてもらっているんですが、カスタマイズがWordPress初心者でも比較的簡単にできるので、とても気に入っています。

自分と同じ理由で愛用している人も多いんじゃないでしょうかね。

今回は、エントリー本文の上部と下部に表示できるシェアボタンをバイラルタイプにして一行に収めるカスタマイズをしたので、その方法をお伝えしていきますよ！

シェアボタンをバイラルタイプで表示させる
1. 表示させるシェアボタンを選ぶ
バイラルタイプシェアボタン表示を一行で収めるカスタマイズ
1. スマホ表示にはもう一手間を！
おわりに

シェアボタンをバイラルタイプで表示させる

まずはSimplicity2で表示されるシェアボタンをバイラルタイプにする方法から。ちょちょいのちょいでバイラルタイプのシェアボタンにできますよ！

「外観→カスタマイズ→SNS」と移動し、シェアボタンのタイプのバイラルタイプへチェックをするだけ！　PCとモバイルがありますので両方共にチェックをいれておきましょう。たったこれだけです。

表示させるシェアボタンを選ぶ

続いてエントリー内に表示させるSNSのシェアボタンを選んでいきます。これをやらないとシェアボタンは表示されませんので忘れずに！

「外観→カスタマイズ→SNS」で少しスクロール（シェアメッセージの下）すると、どのSNSのシェアボタンの表示するか選択できるので、お好みで選択していってください。

このブログでは

Twitter
Facebook
Google+
はてブ
pocket
feedly

以上の6つのシェアボタンを表示させています。

ここまで作業でシェアボタンをバイラルタイプに変更することができました！

バイラルタイプシェアボタン表示を一行で収めるカスタマイズ

無事にシェアボタンをバイラルタイプに変更することができたのですが、ちょっと気になる点が。

PCで見た場合には、バイラルタイプシェアボタンが2行になって2行目の右側にボタン2つ分の余白ができちゃってます。けっこう気になっちゃいますね。

また、スマホで見た場合には3行で表示されてます。本文が表示されるまでにスペースを使いすぎてる感じが…。

なので複数行になっているバイラルタイプシェアボタンを一行で収めるようにカスタマイズしていきます。方法はとっても簡単！　以下のコードをスタイルシートに追加するだけで一行に収まっちゃいますから。

/************************************
シェアボタンを一行に
************************************/
.sns-group-viral ul {
 display: flex; 
}

PCでの見た目はこんな感じになりました。なかなか良い感じじゃないですかね！

スマホ表示にはもう一手間を！

スマホでみた場合、先程のコードだけではテキストも表示されてしまうので画面が横ブレしてしまいます。

なので、一手間加えて以下のコードを『mobile.css』へ追加しましょう！

/************************************
シェアボタンのテキスト非表示
************************************/
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-feedly::after {
 display: none;
}

このコードはこのブログのものになっています。表示させているSNSの種類が違う場合は要素を確認のうえ追加または書き換えが必要です。

これでスマホの場合はバイラルタイプシェアボタンにはアイコンだけの表示になります。