追記
SANGOをver1.6にアップデートすると背景がうまく適用されないので、一部コードを訂正しました。こんな感じで変更
Before
After
CUSTOM POINT
ボタンをフラットにして色をつけました。横幅もいっぱいまで広がるようにしました。今日のカスタマイズ成果(*´ω`*)フゥ
— くまさん@何もしないをするんだ (@Bearface18) November 12, 2018
シンプルになってすごく満足♪ pic.twitter.com/GISsL1oy1k
今回のカスタマイズはシンプルにできてすごく満足だったので、完成したときにツイートしてたやつです。
見たい場所へジャンプ
カスタマイズの準備
カスタマイズは自己責任で!
ワードプレステーマ

子テーマ

(必須)SANGOのシェアボタンの設定

SANGOの設定をしておく必要があります。シェアボタン一覧を別デザインにするにチェックを入れておいてください。
設定画面までの手順
外観
カスタマイズ
SANGOオリジナル機能の管理
シェアボタンの設定
ここを設定しないとこんな感じにデザインが崩れてしまいます。
未設定の場合

SANGOのカスタマイザーで設定だけはしておいてくださいね。
コードを追記するための方法は3つ
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
カスタマイズコードの追加
コメントありのカスタマイズコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*-------------------------------------- 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;/*文字色*/ } |
コメントなしのカスタマイズコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*-------------------------------------- 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; } |
カスタマイズがうまくいったか確認
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
まとめ
SANGOのシェアボタンを変更してみました。
以前の記事で背景をグラデーションにするカスタマイズをしましたが、この記事ではボタン自体のカスタマイズをしました。
背景をグラデーションにする


シンプルになってスッキリしたよ