記事下のシェアボタンに色をつけてみた

追記

SANGOをver1.6にアップデートすると背景がうまく適用されないので、一部コードを訂正しました。

こんな感じで変更

Before

シェアボックスのカスタマイズ前

After

シェアボックスのカスタマイズ後

CUSTOM　POINT

ボタンをフラットにして色をつけました。横幅もいっぱいまで広がるようにしました。

今日のカスタマイズ成果(*´ω｀*)ﾌｩ
シンプルになってすごく満足♪ pic.twitter.com/GISsL1oy1k
— くまさん@何もしないをするんだ (@Bearface18) November 12, 2018

今回のカスタマイズはシンプルにできてすごく満足だったので、完成したときにツイートしてたやつです。

見たい場所へジャンプ

1 カスタマイズの準備
- 1.1 （必須）SANGOのシェアボタンの設定
- 1.2 コードを追記するための方法は3つ
2 カスタマイズコードの追加
3 まとめ

カスタマイズの準備

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

（必須）SANGOのシェアボタンの設定

SANGOの設定をしておく必要があります。シェアボタン一覧を別デザインにするにチェックを入れておいてください。

設定画面までの手順

外観

カスタマイズ

SANGOオリジナル機能の管理

シェアボタンの設定

ここを設定しないとこんな感じにデザインが崩れてしまいます。

未設定の場合

SANGOのカスタマイザーで設定だけはしておいてくださいね。

コードを追記するための方法は3つ

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

コメントありのカスタマイズコード

/*--------------------------------------
  SNSシェアボタン　フラット化
--------------------------------------*/
.sns-dif ul {/*シェアボタンの全体*/
    background: none;/*背景色削除*/
    border-top: 3px solid #f4f4f5;/*上線追加*/
}
.sns-dif ul li a {/*SNSボタンの設定*/
    padding: 0;/*内側の余白削除*/
    box-shadow: none;/*影を削除*/
}
.tw a {/*Twitterの色*/
    background: #7dcdf7;
}
.fb a {/*Facebookの色*/
    background: #7c9dec;
}
.hatebu a {/*ハテブの色*/
    background: #7cb1ec;
}
.pkt a {/*ポケットの色*/
    background: #f99593;
}
.line a {/*LINEの色*/
    background: #8ed97a;
}
.tw a, .fb a, .hatebu a, .pkt a, .line a{
    color: white;/*文字色*/
}

/*--------------------------------------

SNSシェアボタン　フラット化

--------------------------------------*/

.sns-dif ul {/*シェアボタンの全体*/

background: none;/*背景色削除*/

border-top: 3px solid #f4f4f5;/*上線追加*/

}

.sns-dif ul li a {/*SNSボタンの設定*/

padding: 0;/*内側の余白削除*/

box-shadow: none;/*影を削除*/

}

.tw a {/*Twitterの色*/

background: #7dcdf7;

}

.fb a {/*Facebookの色*/

background: #7c9dec;

}

.hatebu a {/*ハテブの色*/

background: #7cb1ec;

}

.pkt a {/*ポケットの色*/

background: #f99593;

}

.line a {/*LINEの色*/

background: #8ed97a;

}

.tw a, .fb a, .hatebu a, .pkt a, .line a{

color: white;/*文字色*/

}

コメントなしのカスタマイズコード

/*--------------------------------------
  SNSシェアボタン　フラット化
--------------------------------------*/
.sns-dif ul {
    background: none;
    border-top: 3px solid #f4f4f5;
}
.sns-dif ul li a {
    padding: 0;
    box-shadow: none;
}
.tw a {
    background: #7dcdf7;
}
.fb a {
    background: #7c9dec;
}
.hatebu a {
    background: #7cb1ec;
}
.pkt a {
    background: #f99593;
}
.line a {
    background: #8ed97a;
}
.tw a, .fb a, .hatebu a, .pkt a, .line a{
    color: white;
}