「エンジョイ鉄旅!」は、青春18きっぷやその他のお得なきっぷでの鉄旅を楽しむブログ
鉄旅に便利でお得なきっぷの王様「青春18きっぷ」

乗り鉄さんからそうでない人までに発売開始から35年以上の人気を誇る「青春18きっぷ」。

今さら聞けない「青春18きっぷ」の基本中の基本を徹底解説しています!

青春18きっぷの詳細はこちら!

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

『Simplicity2』のバイラルタイプのシェアボタンをカスタマイズ! ブログ運営

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

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

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

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

スポンサーリンク

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

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

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

バイラルタイプへチェック!

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

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

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

表示させたいSNSを選択

このブログでは
  • Twitter
  • Facebook
  • Google+
  • はてブ
  • pocket
  • feedly

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

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

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

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

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

PCの見た目

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

スマホだと3行

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

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

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

カスタマイズ後PC

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

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

画面に収まらず横ブレする

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

/************************************
シェアボタンのテキスト非表示
************************************/
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-feedly::after {
 display: none;
}
このコードはこのブログのものになっています。表示させているSNSの種類が違う場合は要素を確認のうえ追加または書き換えが必要です。

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

アイコンだけになりスッキリ表示!

このブログの場合は6つのシェアボタンを表示しています。しっかりと画面内に収まっていますよね。6つ以上の場合はちょっと確認していないので、あしからず。

おわりに

バイラルタイプシェアボタンの表示がSNSの数によって複数行になってしまうのを、簡単コピペで一行に収めてしまうカスタマイズ方法でした!

しかし、画像を大きく使い過ぎたかな? とくにスマホのスクリーンショット…。

 

今回も最後までお付き合いくださって、ホントにありがとうございました! また次回お会いできるのを楽しみにしています!!

それでは次回までごきげんよう!