Simplicityのモバイル用SNSシェアボタンをCSSだけで変更してみた

ブログをWordpressに移行した時にSTINGER5とSimplicityで迷いましたが、現在はこのSimplicityで落ち着いています。


いつかやろうと思っていたモバイル表示のSNSシェアボタンのデザイン・スタイルの変更をやっとしたので覚え書きとして記事にしました。どこかで誰かの参考になれば幸いです。

 

 
 

スマホ表示のSNSボタンのデザインを変更する理由

スマホで色々な人のブログを拝見させてもらっていますが、はやり同じSimplicityのテーマなので記事ページのインプレッションがどうしても自身のブログと同じ感じになるのがずっと気になっていました。
そこでSimplicityの特徴的なSNSボタンのデザインを変更することにしました。

CSSだけで変更したい

難しいことはしたくないのでとりあえず後戻りも簡単にできるのでCSSのみで変更しました。

モバイルのCSS追加はmobile.cssに追加でコードを記載していくだけです。

表示しないSNSボタンを選ぶ

ここでは以下のように5つのSNSボタンを表示させたいので、不要な2つのSNSボタンを選んで非表示にします。

  • Feedly
  • LINE
sns button
.line-btn-icon,.feedly-btn-icon {
	display:none;
}

表示したいSNSボタンを選ぶ

ここで下記5つの表示したいSNSボタンの幅、背景を設定します。

  • Twitter
  • Facebook
  • Google+
  • はてブ
  • Pocket
.twitter-btn-icon {
	width:20%;
	margin:none;
	padding:none;
	margin-left:-5px;
	background-color:#55ACEE;
}

.facebook-btn-icon {
	width:20%;
	margin:none;
	padding:none;
	margin-left:-5px;
	background-color:#3B5998;
}

.google-plus-btn-icon {
	width:20%;
	margin:none;
	padding:none;
	margin-left:-5px;
	background-color:#DD4B39;
}

.hatena-btn-icon {
	width:20%;
	margin:none;
	padding:none;
	margin-left:-5px;
	background-color:#3C7DD1;
}

.pocket-btn-icon {
	width:20%;
	margin:none;
	padding:none;
	margin-left:-5px;
	background-color:#EE4257;
}

アイコンの大きさ、幅等を微調整する

ボタンのアイコン(ツイッターのロゴ等)の位置やボタンの縦の幅を微調整しました。

ul.snsbs li a {
	font-size:20px;
	text-align:center;
	height:25px;
	width:initial;
}

フォローのカウント数の背景をリセット

sns button

!importantをつけないと反映されませんので注意です。

.social-count {
	background-color:transparent !important;
}
 
 

さいごに

これでモバイル(スマホ)ビューでのSNSボタンが変わりました。

標準のボタンに戻したい時は今回追加したコードを削除すればよいので管理も簡単です。ただし、非表示にしているSNSボタンも実際にはコードを読み込んでいるのでサイトのスピードを上げたい方は別の方法で非表示にすることをお勧めします。

ABOUTこの記事をかいた人

ソロシンプリスト

幼少期に香港と日本を往復、その後インドネシアを経てオーストラリアで高校・大学生活を過ごす。秋葉原でパソコン関連会社にて8年勤務後、現在は福岡でサラリーマン。