【SANGO】のタイトル下シェアボタンを丸い追従型にカスタマイズ

SANGOのアイキャッチ下にあるシェアボタンを丸いボタンに変更して、スクロールに付いてくるようにしました。

カスタマイズ前

カスタマイズ後

スマホでもこんな感じです。

ボタンを押した後も変更しました。

カスタマイズ前

カスタマイズ後

当サイトでは、この仕様にしてからTwitterやLINEのシェアが増えたので、テストしてみる価値はありそうです。

何よりオシャレで、個人的にはかなり気に入っています。

今回のカスタマイズを行う前に、カスタマイズ設定が画像のようになっているか確認してください。

目次・読みたい所へタップできます

SANGOのシェアボタンを丸くして追従型へカスタマイズ

以下のコードを子テーマの「style.css」にコピペすれば、当サイトと同じデザインになります。

Cyberduckの使い方WordPressの子テーマを分かりやすく解説

style.css
copyする

/* スマホのシェアボタン位置　*/
@media(max-width:500px) {
.single .fab-btn{
right: -4.9px;
}}
/* スマホ横向き以上のシェアボタン画像サイズ　*/	
@media (min-width:481px){
.single .fab__contents_img {
height: 203px;
}}
/* タブレット横以上全体の背景色消す*/
@media(min-width:800px){
.single #fab__contents {
 background: none;
}}

/*シェアボタンのデザイン*/
.fab-btn{
position: fixed;
right:3px;	
width: 54px;
height: 54px;	
bottom:80px;
}
.single .accent-bc{
background-color: #e42b2b85;
}
.fab-btn i:after {
 content: "シェア";
 padding: 0;
 color: #fff;
 font-size: 10px;
 position: relative;
 top: 23%;
 left: 4%;
}
.fa-share-alt:before {
  color: #fff;
  position: absolute;
  top: 37%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

/* シェアボタンをオープンした時のカスタム */
#fab__contents{
background:#948e8ea1;
}	
.single .fab__contents-main{
color:#fff;
background: none;
}
.close span,.close span:before{
background:#fff;	
}	
.fab__contents_img{
height:175px;	
}
/* 記事下シェアボタン */	
.sns-btn__item a {
border-radius: 0px;
border: 1px solid ;
}	
.single .sns-btn__item a:hover,.single .sns-dif ul li a {
box-shadow: none;
}	
.sns-btn__title{
    color: #3d3d3d;
}	
.sns-btn__title:before, .sns-btn__title:after {
background-color:#3d3d3d;	
}
.sns-dif ul{
background:none;	
}

カラーやテキストなどはお好きなものに。細かい調整をしたい方は以下の解説をどうぞ。

SANGOシェアボタンのデザイン解説

シェアボタンの解説を見る

style.css
copyする

/* スマホのシェアボタン位置を調整　*/
@media(max-width:500px) {
.single .fab-btn{
right: -4.9px;
}}
/*シェアボタンを固定・サイズ・位置の調整*/
.fab-btn{
position: fixed;
right:3px;	
width: 54px;
height: 54px;	
bottom:80px;
}
/*シェアボタンの背景カラー*/
.single .accent-bc{
background-color: #e42b2b85;
}
/*シェアボタン内のテキスト調整*/
.fab-btn i:after {
 content: "シェア";
 padding: 0;
 color: #fff;
 font-size: 10px;
 position: relative;
 top: 23%;
 left: 4%;
}
/*シェアボタンのアイコン調整*/
.fa-share-alt:before {
  color: #fff;
  position: absolute;
  top: 37%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

SANGOのシェアボタンオープン時の解説

シェアボタンを開いた時の解説を見る

style.css
copyする

/* スマホ横向き以上の画像サイズ調整　*/	
@media (min-width:481px){
.single .fab__contents_img {
height: 203px;
}}
/* タブレット横以上全体の背景色消す*/
@media(min-width:800px){
.single #fab__contents {
 background: none;
}}
/*全体の背景色（薄くするのがオススメ）*/
#fab__contents{
background:#948e8ea1;
}
/*SHAREのテキストカラーと画像周りの背景色を消す*/
.single .fab__contents-main{
color:#fff;
background: none;
}
/*バツ印のカラー（SHAREと同じ色にするのがオススメ）*/
.close span,.close span:before{
background:#fff;	
}
/*画像サイズの調整*/
.fab__contents_img{
height:175px;	
}

SANGOのSNSシェアボタン周りの解説

「シェアボタン一覧を別デザインにする」にチェックをすると、記事下のシェアボタンと今回のボタンが連動します。

SNSシェアボタン周りの解説を見る

style.css
copyする

/* 記事下シェアボタン・四角にして枠線をつける */	
.sns-btn__item a {
border-radius: 0px;
border: 1px solid ;
}	
/* 記事下シェアボタンにマウスを乗せた時とボタン周りの影を消す */	
.single .sns-btn__item a:hover,.single .sns-dif ul li a  {
box-shadow: none;
}
/* 記事下の「SHARE」のテキストカラー*/		
.sns-btn__title{
    color: #3d3d3d;
}	
/* 記事下の「SHARE」の横にあるスラッシュのカラー*/	
.sns-btn__title:before, .sns-btn__title:after {
background-color:#3d3d3d;	
}
/* 記事下のSNSボタン周りの背景消す*/	
.sns-dif ul{
background:none;	
}