くるみ
- 「SANGOの記事下のシェアボタンをいい感じのデザインしたい」
- 「シェアボタンのクリック率を上げたい」
という方に向けてSANGOで「記事下のシェアボタンを可愛く&スクロールした時に浮き上がらせるカスタマイズ方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
シェアボタンの完成イメージ
記事下のSNSシェアボタンを上のようにカスタマイズしてみました。
- 丸くし可愛く主張しすぎないように
- スクロールに合わせて、ほんわりと下から浮き上がっているように動く
ブログ主の勝手なこだわりで需要の少なそうなボタンは削除しこの3種だけにしてますが、「はてブとpocketのボタンも表示させたいんじゃ」という方のためにそちらのカスタマイズにも対応してるのでご安心を⸝⸝- ̫ -⸝⸝
ブログ主
実際にスクロールした時の動きはこんな感じ。
ちなみに、上からスクロールした時であれば何度もアニメーションが適用されます。
カスタマイズ手順
方法はいたってシンプルかつ簡単です。くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
SANGOのシェアボタンのカスタマイズ方法
CSSをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

シェアボタンを丸くする
.sns-btn__item i {
padding: .37em;
font-size: 2.2em;
}
.sns-btn__item a {
border-radius: 50%;
width: 4.3em;
height: 4.3em;
opacity:.9;
}
.sns-btn ul li a:hover {
box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width:480px){
.sns-btn__item {
margin: 0 0.4em;
}
}
.tw a {
background: #7dcdf7!important;
}
.fb a {
background: #7c9dec!important;
}
.line a {
background: #8ed97a!important;
}
.tw a, .fb a, .line a{
color: white;
}
.hatebu,.pkt{
display:none;
}
.share_txt {
display:none;
}
.sns-btn__item i {
padding: .37em;
font-size: 2.2em;
}
.sns-btn__item a {
border-radius: 50%;
width: 4.3em;
height: 4.3em;
opacity:.9;
}
.sns-btn ul li a:hover {
box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width:480px){
.sns-btn__item {
margin: 0 0.4em;
}
}
.tw a {
background: #7dcdf7!important;
}
.fb a {
background: #7c9dec!important;
}
.hatebu a {
background: #7cb1ec!important;
}
.line a {
background: #8ed97a!important;
}
.pkt a {
background: #f99593!important;
}
.tw a, .fb a, .hatebu a, , .line a, .pkt a{
color: white;
}
.share_txt {
display:none;
}
アニメーション用のセレクタを用意
.sns-shere-float{
animation:sns-shere-float 1.7s ease 0s;
}
.sns-shere-float2{
animation:sns-shere-float2 1.7s ease 0s;
}
.sns-shere-float3{
animation:sns-shere-float3 1.7s ease 0s;
}
.sns-shere-float-mozi{
animation:sns-shere-float-mozi 1.7s ease 0s;
}
@keyframes sns-shere-float{
0%{
opacity:0;
}
5%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float2{
0%{
opacity:0;
}
20%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float3{
0%{
opacity:0;
}
35%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float-mozi{
0%{
opacity:0;
}
60%{
opacity:0;
transform:translateY(10px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
.sns-shere-float{
animation:sns-shere-float 1.7s ease 0s;
}
.sns-shere-float2{
animation:sns-shere-float2 1.7s ease 0s;
}
.sns-shere-float3{
animation:sns-shere-float3 1.7s ease 0s;
}
.sns-shere-float4{
animation:sns-shere-float4 1.7s ease 0s;
}
.sns-shere-float5{
animation:sns-shere-float5 1.7s ease 0s;
}
.sns-shere-float-mozi{
animation:sns-shere-float-mozi 2s ease 0s;
}
@keyframes sns-shere-float{
0%{
opacity:0;
}
5%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float2{
0%{
opacity:0;
}
20%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float3{
0%{
opacity:0;
}
35%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float4{
0%{
opacity:0;
}
50%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float5{
0%{
opacity:0;
}
65%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
@keyframes sns-shere-float-mozi{
0%{
opacity:0;
}
80%{
opacity:0;
transform:translateY(10px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
JSコードをコピペする
//記事下のSNSボタンの浮き上がり
$(window).scroll(function () {
let sns_shere_button1 = $(".sns-btn ul li:nth-child(1)");
let sns_shere_button2 = $(".sns-btn ul li:nth-child(2)");
let sns_shere_button3 = $(".sns-btn ul li:nth-child(4)");
let sns_shere_mozi = $(".sns-btn__title");
$(".entry-content .sns-btn ul").each(function () {
let sns_shere_position = $(this).offset().top;
let diff = sns_shere_position - $(window).height();
if ($(window).scrollTop() > diff) {
sns_shere_button1.addClass("sns-shere-float");
sns_shere_button2.addClass("sns-shere-float2");
sns_shere_button3.addClass("sns-shere-float3");
sns_shere_mozi.addClass("sns-shere-float-mozi");
} else {//2回目以降も上からスクロールした時も動かしたい場合
sns_shere_button1.removeClass("sns-shere-float");
sns_shere_button2.removeClass("sns-shere-float2");
sns_shere_button3.removeClass("sns-shere-float3");
sns_shere_mozi.removeClass("sns-shere-float-mozi");
}
});
});
//記事下のSNSボタンの浮き上がり
$(window).scroll(function () {
let sns_shere_button1 = $(".sns-btn ul li:nth-child(1)");
let sns_shere_button2 = $(".sns-btn ul li:nth-child(2)");
let sns_shere_button3 = $(".sns-btn ul li:nth-child(3)");
let sns_shere_button4 = $(".sns-btn ul li:nth-child(4)");
let sns_shere_button5 = $(".sns-btn ul li:nth-child(5)");
let sns_shere_mozi = $(".sns-btn__title");
$(".entry-content .sns-btn ul").each(function () {
let sns_shere_position = $(this).offset().top;
let diff = sns_shere_position - $(window).height();
if ($(window).scrollTop() > diff) {
sns_shere_button1.addClass("sns-shere-float");
sns_shere_button2.addClass("sns-shere-float2");
sns_shere_button3.addClass("sns-shere-float3");
sns_shere_button3.addClass("sns-shere-float4");
sns_shere_button3.addClass("sns-shere-float5");
sns_shere_mozi.addClass("sns-shere-float-mozi");
} else {//2回目以降に上からスクロールした時も動かしたい場合
sns_shere_button1.removeClass("sns-shere-float");
sns_shere_button2.removeClass("sns-shere-float2");
sns_shere_button3.removeClass("sns-shere-float3");
sns_shere_button3.removeClass("sns-shere-float4");
sns_shere_button3.removeClass("sns-shere-float5");
sns_shere_mozi.removeClass("sns-shere-float-mozi");
}
});
});
以上のコードをjsファイルに貼り付けます。
やってることとしては、シェアボタン達の位置にスクロールさせたらクラスを付与して動かしてる、という感じ。
ブログ主
「スクロール時のアニメーションは一度きりでいい」という場合はelse〜以下を消してあげてください。
ここまで終わればカスタマイズは終了。お疲れ様です!
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
上のショートカットキーで削除できます。
まとめ
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝