【SANGO】記事下のシェアボタンをスクロールした時に浮き上がらせるカスタマイズ

どうもおはようポテト(@ohayoupoteto22)です。

記事下のシェアボタンを可愛くしたいんだぞ

ということで今回は

「SANGOの記事下のシェアボタンをいい感じのデザインしたい」

「シェアボタンのクリック率を上げたい」

という方に向けてSANGOで「記事下のシェアボタンを可愛く&スクロールした時に浮き上がらせるカスタマイズ方法」をまとめました。

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

ブログ主

早速いってみよう！

お品書き

シェアボタンの完成イメージ
バックアップを忘れずに
カスタマイズ手順
SANGOのシェアボタンのカスタマイズ方法
- CSSをコピペする
- JSコードをコピペする
CSSの変更が反映されない場合
- キャッシュ系プラグイン
- プラウザのキャッシュを削除
まとめ

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

記事下のSNSシェアボタンを上のようにカスタマイズしてみました。

丸くし可愛く主張しすぎないように

スクロールに合わせて、ほんわりと下から浮き上がっているように動く

ブログ主の勝手なこだわりで需要の少なそうなボタンは削除しこの3種だけにしてますが、「はてブとpocketのボタンも表示させたいんじゃ」という方のためにそちらのカスタマイズにも対応してるのでご安心を⸝⸝- ̫ -⸝⸝

ブログ主

我ながら可愛く仕上がった希ガス。

実際にスクロールした時の動きはこんな感じ。

ちなみに、上からスクロールした時であれば何度もアニメーションが適用されます。

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

【WordPress】CSSをカスタマイズする際のバックアップの取り方

ブログ主

備えあれば何とやらだね

カスタマイズ手順

方法はいたってシンプルかつ簡単です。

手順

step1

CSSコードをコピペする

step2

JSコードをコピペする

レッツゴー！

ソロモン

SANGOのシェアボタンのカスタマイズ方法

CSSをコピペする

「追加CSS」に追加

「テーマエディター」を使って追加

FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

ブログ主

CSSの場合「追加CSS」が最もお手軽にできるよ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressでCSSコードを追加する3つの方法

シェアボタンを丸くする

.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;
}

はてブとpocketのボタンを消さない場合

.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);
  }
}

はてブとpocketのボタンを消さない場合

.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");
    }
  });
});

はてブとpocketのボタンを消さない場合

//記事下の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ファイルに貼り付けます。

やってることとしては、シェアボタン達の位置にスクロールさせたらクラスを付与して動かしてる、という感じ。

ブログ主

カスタマイズでJavaScriptをいじったことが無い場合は以下の公式の方法を参考にしてね

参考カスタマイズでJavaScriptを利用する方法SANGO

「スクロール時のアニメーションは一度きりでいい」という場合はelse〜以下を消してあげてください。

ここまで終わればカスタマイズは終了。お疲れ様です！

お疲れ様！

ソロモン