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

追記

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

こんな感じで変更

Before

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

After

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

CUSTOM　POINT

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

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

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

ジャンプマップ

カスタマイズの準備

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

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

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

設定画面までの手順

外観

カスタマイズ

SANGOオリジナル機能の管理

シェアボタンの設定

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

未設定の場合

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

３つのコード追加方法

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加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;
}