Amazonギフト券5000円チャージすると6000円分使えるキャンペーン実施中!

【Simplicity2】SNSシェアボタンを横一列にカスタマイズする方法

ブログ運営
どうも、はうやし(@hauyashi)です。

wordpressのテンプレート「Simplicity2」において、バイラルタイプのSNSシェアボタンを横一列に並べるカスタマイズ方法をご紹介いたします。

SimplicityでバイラルタイプのSNSシェアボタンを使っていると、表示させるボタンを4個もしくは8個以外に設定した場合、上記のようにシェアボタンが不揃いな形に表示されると思います。

こうなると「ボタンを横一列に並べることはできないのか?」とデザインの修正をしたくなりますよね。そんなお悩みを解決しましょう!

今回はこの不揃いなボタンの配置を解消して、ボタンを横一列に並べる方法をご紹介いたします。

SNSシェアボタンを横一列に並べる方法

以下でご紹介するCSSコードをコピー&ペーストするだけで、シェアボタンを横一列に並べることができます。

まず、作業を始める前に次のことを確認してください。

外観→カスタマイズから、SNSメニューの「シェアボタンのタイプ(PC)」「シェアボタンのタイプ(モバイル)」が「バイラルタイプ」になっていることを確認してください。

シェアボタンを横並びにする

シェアボタンを横並びにする場合には “display: flex;” を使用します。
これを使うと、横並び かつ 均等にボタンを配置することが可能になります。

.sns-group-viral ul {
	display: flex; 
}


これで横並びになりました。

しかし、デフォルト時と比べてボタンの横幅が短くなったため、TwitterやFacebookなどと書かれたボタンの名称が圧迫されて見づらくなってしまいました。

そこで今度は、ボタンの名称を非表示にします。
(ボタンのアイコンだけを表示する設定に変更します。)

それぞれのアイコンの後ろに書かれた文字を “display: none;” を使って非表示にします。

.icon-hatena::after,
.icon-googleplus::after,
.icon-facebook::after,
.icon-twitter::after,
.icon-pocket::after,
.icon-line::after,
.icon-feedly::after,
.icon-comment::after {
	display: none;
}


これでアイコンのみが表示されるようになりました。
二段で不揃いだったボタンがスッキリしましたね。

以上でシェアボタンを横並びにする一連の作業はおしまいです。

簡単な作業でしたね、お疲れ様でした!

自分の好みにカスタマイズ

余裕のある方は自分の好みにあわせてデザインを変更してみましょう。


私の場合は「この記事が気に入ったらいいね!しよう」「著作情報(この記事を書いた人)」とデザインを統一させました。(背景色を付け、文字のセンタリングを行いました。)

旅行好きな方へ:お得な割引クーポンが集まるサイト「デイリーPlus」

よく行楽地等にお出かけをされる方に向けて、入園料等が割引になるクーポンサイトをご紹介いたします。

東京ジョイポリス、大江戸温泉物語、サファリパーク、ビアードパパ、コージーコーナー、コメダ珈琲など全国100万件以上の特典が利用できる凄いやつです。

  • 映画館・遊園地・動物園など施設の割引券を発行
  • すかいらーくグループ食事券が割引で購入可能
  • nanacoギフト券が割引で購入可能
はうやし
はうやし
入園料だけではなく、食事の割引券や電子マネーのチャージ割引もありますよ。

関連コンテンツ

写真をメインに扱ったコンテンツを200記事以上執筆しています。
カテゴリーや関連記事から他の記事もご覧いただければと思います。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Nikon D800で写真を撮っています!
最近ではダムを巡ってダムカードを集めることにはまっています。

当サイト内のキャプチャ画像は著作権法第32条に基づき比較研究を目的として引用しています。映像・画像の著作権は各著作物の権利者に帰属します。
ブログ運営

YouTube channel

YouTubeチャンネル:廃墟・レトロ・珍スポット探索 / はうやし報告記〔仮〕

Subscribe Now!

はうやし報告記(仮)

コメント

タイトルとURLをコピーしました