SNSボタンをおしゃれにしてみました。
サイドバーの装飾と同じようにしてみました。


カスタマイズの準備
子テーマを使用している方は、style.cssを開いてください。 追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。カスタマイズのコード
下記のコードを子テーマもしくは追加CSSに追記してください。
/*sns share ボタン(枠線あり)*/
.sns-design-type01 .svg-inline--fa {/*Twitter facebook poket*/
vertical-align: -0.8em;
}
.sns-design-type01 .font-hatena:before {/*hatebu*/
vertical-align: -0.7em;
}
.sns-design-type01 .line a svg {/*line*/
width: 24px !important;
fill: #fff !important;
vertical-align: -0.7em;
}
@media (min-width: 768px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
box-shadow: none;
height: 44px;
opacity: .7;
}}
@media (max-width: 767px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
padding: 6px 6px;
box-shadow: none;
height: 44px;
opacity: .7;
}}
.sns-design-type01 .sns-top li.twitter a, .sns-design-type01 .sns-top li.facebook a, .sns-design-type01 .sns-top li.hatebu a, .sns-design-type01 .sns-top li.pocket a, .sns-design-type01 .sns-top li.line a {
border: 3px double;
border-color: white;
}
.sns-design-type01 .sns li.twitter a, .sns-design-type01 .sns li.facebook a, .sns-design-type01 .sns li.hatebu a, .sns-design-type01 .sns li.pocket a, .sns-design-type01 .sns li.line a {
border: 3px double;
border-color: white;
}
JIN2.0~にアップデートした方用
/*--------------------------------------
SNS
--------------------------------------*/
/*sns share ボタン*/
.sns-design-type01 .sns-top li.twitter a, .sns-design-type01 .sns-top li.facebook a, .sns-design-type01 .sns-top li.hatebu a, .sns-design-type01 .sns-top li.pocket a, .sns-design-type01 .sns-top li.line a {
border: 3px double;
border-color: white;
}
.sns-design-type01 .sns li.twitter a, .sns-design-type01 .sns li.facebook a, .sns-design-type01 .sns li.hatebu a, .sns-design-type01 .sns li.pocket a, .sns-design-type01 .sns li.line a {
border: 3px double;
border-color: white;
}
@media (min-width: 768px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
box-shadow: none;
height: 44px;
opacity: .7;
}
.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {
padding-top: 9px!important;
}
.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {
padding-top: 11px !important;
}
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {
padding: 13px!important;
}
.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {
padding-top: 8px!important;
}
.sns-design-type01 .sns li a {
line-height: 11px;
}
}
@media (max-width: 767px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
padding: 6px 6px;
box-shadow: none;
height: 44px;
opacity: .7;
}
.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {
padding-top: 11px !important;
}
.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {
padding-top: 9px!important;
}
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {
padding: 13px!important;
}
.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {
padding-top: 8px!important;
}}
まとめ
サイドバーの装飾と一緒にすると統一感が出ていいかもしれませんね。
SANGOのメインカスタマイズ(?)サイトはこちら