Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
こんな感じで変更
BEFORE
![シェアボックスのカスタマイズ前](https://for-men.jp/wp-content/uploads/2018/11/シェアボックスのカスタマイズ前.png)
AFTER
![シェアボックスのカスタマイズ後](https://for-men.jp/wp-content/uploads/2018/11/シェアボックスのカスタマイズ後.png)
今回のカスタマイズはシンプルにできてすごく満足だったので、完成したときにツイートしてたやつです。
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
![](https://for-men.jp/wp-content/uploads/2019/04/jikosekininn-160x160.png)
カスタマイズするための
準備
(必須)SANGOのシェアボタンの設定
![SNSシェアボタンの設定](https://for-men.jp/wp-content/uploads/2018/11/SNSシェアボタンの設定.png)
SANGOの設定をしておく必要があります。シェアボタン一覧を別デザインにするにチェックを入れておいてください。
ここを設定しないとこんな感じにデザインが崩れてしまいます。
![失敗例](https://for-men.jp/wp-content/uploads/2018/11/失敗例.png)
![](https://for-men.jp/wp-content/uploads/2018/08/huki-talk.png)
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
![カスタマイズを加速させる追加CSS](https://for-men.jp/wp-content/uploads/2018/09/カスタマイズを加速させる追加CSS-160x160.png)
追加方法 | 難しさ |
---|---|
追加CSS | |
テーマエディター | |
FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード
![ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«å㯠kopinosikata.png ã§ã](https://for-men.jp/wp-content/uploads/2018/08/kopinosikata.png)
コメントありのカスタマイズコード
/*-------------------------------------- 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; }
確認する際は必ずキャッシュを削除してから見てください。
確認方法 |
---|
「Ctrl」+「F5」(キャッシュ削除) |
カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。
Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。
![](https://for-men.jp/wp-content/uploads/2019/04/kyassyusakujo-160x160.png)
くまからのお礼
本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)
もっとカスタマイズしたい人はこちらの記事を見てください。
![](https://for-men.jp/wp-content/uploads/2019/09/84c53e12efdc94956cb14977175bad0f-160x160.png)
まとめ
![追加CSSのまとめ](https://for-men.jp/wp-content/uploads/2018/09/自作まとめ.png)
SANGOのシェアボタンを変更してみました。
以前の記事で背景をグラデーションにするカスタマイズをしましたが、この記事ではボタン自体のカスタマイズをしました。
![フォローボックスの色を変える](https://for-men.jp/wp-content/uploads/2018/08/フォローボックスの色を変える-160x160.png)
![](https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png)