...

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

SANGOの記事下のシェアボタンのカスタマイズ

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

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

ということで今回は

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

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

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

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

ブログ主

早速いってみよう!

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

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

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

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

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

ブログ主

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

 

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

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

バックアップを忘れずに

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

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

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

ブログ主

備えあれば何とやらだね

カスタマイズ手順

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

手順
step1
CSSコードをコピペする
step2
JSコードをコピペする
レッツゴー!

ソロモン

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

CSSをコピペする

「追加CSS」に追加

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

FTPソフトを使って追加

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

ブログ主

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

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

WordPressで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;
}
.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ファイルに貼り付けます。

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

ブログ主

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

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

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

お疲れ様!

ソロモン

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

Windows :[Shift]+[Ctrl]+[Delete]キー

Mac:[shift]+[command]+[delete」キー

上のショートカットキーで削除できます。

まとめ

以上、SANGOの記事下のシェアボタンのカスタマイズ方法でした。

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

コピペでできるSANGOのカスタマイズまとめ【他と差をつける】SANGOの魅力的なカスタマイズまとめ

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

参考になったらシェアしよう

コメントを残す

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

CAPTCHA