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

JINカスタマイズ｜SNSシェアボタンを大きく

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

SNSボタンをおっきくカスタマイズしてみました。

高さを44pxにして押しやすくしてみました。あとちょっと透明に。

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;
}}

MENくん
MENくん
コードを短めにしたよ
くま３号
くま３号
ええんやないか

JIN2.0～にアップデートした方用

JIN2.0～にアップデートした方は、上のコードではアイコンがずれてしまうかもしれません。

こちらのコードをお試しください(*´罒`*)


/*--------------------------------------
SNS JIN2.0~
--------------------------------------*/
/*sns share ボタン*/
@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;
}}
important祭りですが、よろしくおねがいします。

まとめ

ボタンの縦幅は最低44pxくらいあると押しやすいですよ。

次回はこんなSNSボタンのコードを書く予定です。

SANGOのメインカスタマイズ（？）サイトはこちら

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

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

 

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