【SANGO】シェアボタンをオシャレな丸に変更する。

ごきげんよう、バビです。

私の運営するもう一つのブログ「おしゃエナ」は、ファッション・美容系のサイトです。

ファッション系サイトでは、シャープでかっこいいデザインが求められるのですが、残念ながらSANGOのデザインデフォルトとはミスマッチになってしまうところが多いです。

ページ下部のシェアボタンは、特に色が多用されていて目立つので、クールでカッコいい白黒のボタンにカスタマイズしてみました。

シェアボタン完成イメージ

完成イメージはこんな感じで、マウスオンすると黒く浮き上がります。

このカスタマイズで同時に、アイキャッチ下のシェアボタンを押して表示される小さな画面内のボタンデザインも変更されます。

完成イメージ①

ページ下部

SANGOシェアボタン完成イメージ①ページ下部

アイキャッチ下シェアボタンから表示されるウィンドウ

SANGOシェアボタン完成イメージ①別ウインドウ

実際のボタンを確認したい方は「おしゃエナ」で確認してください。

完成イメージ②

枠線とマウスオンしたときの影を消したバージョンも作りました。

SANGOシェアボタン完成イメージ②

シェボタン カスタマイズコード

基本的なカスタマイズは私もサポートさせていただいている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;/*内側の余白*/
}}

役に立ったら記事をシェアしてもらえると嬉しいです。
記事で紹介いただけるともっと嬉しい(﹡´◡`﹡ )

カスタマイズ記事一覧