バビ
ごきげんよう、バビです。
私の運営するもう一つのブログ「おしゃエナ」は、ファッション・美容系のサイトです。
ファッション系サイトでは、シャープでかっこいいデザインが求められるのですが、残念ながらSANGOのデザインデフォルトとはミスマッチになってしまうところが多いです。
ページ下部のシェアボタンは、特に色が多用されていて目立つので、クールでカッコいい白黒のボタンにカスタマイズしてみました。
【WordPress、SANGO、THE SONIC】カスタマイズ記事まとめ＆デザインの参考になるおしゃれなブログ
シェアボタン完成イメージ
完成イメージはこんな感じで、マウスオンすると黒く浮き上がります。
このカスタマイズで同時に、アイキャッチ下のシェアボタンを押して表示される小さな画面内のボタンデザインも変更されます。
完成イメージ①
ページ下部
アイキャッチ下シェアボタンから表示されるウィンドウ
実際のボタンを確認したい方は「おしゃエナ」で確認してください。
完成イメージ②
枠線とマウスオンしたときの影を消したバージョンも作りました。
シェボタン カスタマイズCSSコード
基本的なカスタマイズは私もサポートさせていただいているfor men様のこの記事のコードを改造しています。
参考 記事下のシェアボタンに色をつけてみたfor menこのCSSコードを、外観→テーマの編集→（子テーマの）「style.css」に貼り付けます。
CSS（完成イメージ①）
/*--------------------------------------
SNSシェアボタン フラット化
--------------------------------------*/
.sns-dif ul {/*シェアボタンの全体*/
background: none;/*背景色削除*/
}
.sns-dif ul li a {/*SNSボタンの設定*/
padding: 0;/*内側の余白削除*/
box-shadow: none;/*影を削除*/
}
.tw a, .fb a, .hatebu a, .pkt a, .line a, .gplus a{
color: #000;/*文字色*/
}
.tw a:hover, .fb a:hover, .hatebu a:hover, .pkt a:hover, .line a:hover, .gplus a:hover {/*マウスオン*/
color: #fff;/*文字色*/
}
.sns-btn__item a {
border: solid 1px #000;/*枠線の種類・幅・色*/
border-radius: 50%;/*ボタンを丸く*/
}
.sns-btn__item a:hover {
background: #000;/*ホバー時の背景色*/
}
@media only screen and (min-width: 1030px){/*PC*/
.footer-contents {/*横幅をMAXにする*/
padding: 10px;/*内側の余白*/
}}CSS（完成イメージ②）
/*--------------------------------------
SNSシェアボタン 記号だけにする
--------------------------------------*/
.sns-dif ul {/*シェアボタンの全体*/
background: none;/*背景色削除*/
}
.sns-dif ul li a {/*SNSボタンの設定*/
padding: 0;/*内側の余白削除*/
box-shadow: none;/*影を削除*/
}
.tw a, .fb a, .hatebu a, .pkt a, .line a, .gplus a{
color: #000;/*文字色*/
}
.tw a:hover, .fb a:hover, .hatebu a:hover, .pkt a:hover, .line a:hover, .gplus a:hover {/*マウスオン*/
color: #000;/*文字色*/
}
.sns-btn__item a {
border: none;/*枠線を消す*/
}
.sns-btn__item a:hover {
background: none;/*ホバー時の背景色を消す*/
}
.sns-dif ul li a:hover {/*SNSボタンの設定*/
padding: 0;/*内側の余白削除*/
box-shadow: none;/*影を削除*/
}
@media only screen and (min-width: 1030px){/*PC*/
.footer-contents {/*横幅をMAXにする*/
padding: 10px;/*内側の余白*/
}}バビ
役に立ったら記事をシェアしてもらえると嬉しいです。
記事で紹介いただけるともっと嬉しい(﹡´◡`﹡ )
