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

カスタマイズ後


スマホでもこんな感じです。
ボタンを押した後も変更しました。
カスタマイズ前

カスタマイズ後

当サイトでは、この仕様にしてからTwitterやLINEのシェアが増えたので、テストしてみる価値はありそうです。
何よりオシャレで、個人的にはかなり気に入っています。

今回のカスタマイズを行う前に、カスタマイズ設定が画像のようになっているか確認してください。
目次・読みたい所へタップできます
SANGOのシェアボタンを丸くして追従型へカスタマイズ
以下のコードを子テーマの「style.css」にコピペすれば、当サイトと同じデザインになります。

style.csscopyする/* スマホのシェアボタン位置 */ @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.csscopyする/* スマホのシェアボタン位置を調整 */ @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.csscopyする/* スマホ横向き以上の画像サイズ調整 */ @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シェアボタン周りの解説

「シェアボタン一覧を別デザインにする」にチェックをすると、記事下のシェアボタンと今回のボタンが連動します。
style.csscopyする/* 記事下シェアボタン・四角にして枠線をつける */ .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; }
SANGOのタイトル下シェアボタンのカスタマイズ・まとめ
以上SANGOのシェアボタンのカスタマイズについて解説しました。
当サイトはSNSをやっていませんが、それでもシェア数は増えたので、SNSに注力しているサイトならかなり効果を見込めると思います。
トップへ戻るFABの上に表示させているので、邪魔にならないはず。もしくは左側にしてもいいかもしれません。
【SANGO】のデフォルトアニメーションを完全OFFにするCSS
【SANGO】PCで見たときのあらゆる幅を広げるカスタマイズ
コピペですぐ使える・ブログデザイン用カスタマイズコードまとめ
※日本語が含まれていないコメントは投稿できません。(スパム対策)