Amazonのクリスマスプレゼント

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


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

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

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

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

完成イメージ

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

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

ページ下部

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

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

カスタマイズコード

基本的なカスタマイズは私もサポートさせていただいているfor men様のこの記事のコードを改造しています。

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

このCSSコードを、外観→テーマの編集→(子テーマの)「style.css」に貼り付けます。

HTML
/*--------------------------------------
  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;/*内側の余白*/
}}

おしゃれサイトはみんな白黒なのよね。

コメントを残す

メールアドレスが公開されることはありません。