SANGOのカスタマイズサイト
JIN

JINカスタマイズ｜SNSシェアボタンをおしゃれに

  /
SNSシェアボタンをおしゃれにカスタマイズ
カスタマイズは自己責任にてお願いします（カスタマイズ前にバックアップ推奨）。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。
この記事では

SNSボタンをおしゃれにしてみました。

サイドバーの装飾と同じようにしてみました。

BEFORE


AFTER

MENくん
MENくん
枠線をつけるとオシャレ感だでた!
くま３号
くま３号
サイドバータイトルと同じだね
Contents
  1. カスタマイズの準備
  2. カスタマイズのコード
    1. JIN2.0~にアップデートした方用
  3. まとめ

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。 追加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;
}

MENくん
MENくん
前回のカスタマイズに枠線をプラスしたバージョンです
くま３号
くま３号
使い回しってやつやね

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のメインカスタマイズ（？）サイトはこちら

ここにボックスタイトルを入力

JINのカスタマイズまとめページ

 

for men
for men｜やってみるをサポート
関連記事