【JIN】SNSボタンを丸くして可愛くカスタマイズする方法

くるみ

JINのSNSボタンをもっとサイトに溶け込ませたいんだな

ということで今回は

JINのSNSボタンが横に長い四角であまり気に入ってない
シェア率が高くなるようなデザインのSNSボタンにしたい

という方に向けて、JINのSNSボタンを丸くして可愛くするカスタマイズ方法をまとめました。

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

お品書き

SNSボタンの完成イメージ
- アニメーションをつけることも可能
JINのSNSボタンのカスタマイズ方法
CSSの変更が反映されない場合の対処法
- キャッシュ系プラグインを疑う
- プラウザのキャッシュを削除
まとめ

SNSボタンの完成イメージ

before

after

調整した点は主に以下の通りです。

丸くすることでより可愛いデザインに
透明度を上げてチカチカしない色に
アイキャッチ下の方は画像との間に余白を設ける

デフォルトの横長のデザインだとどうしても区切り線のように見えてしまい、中々クリック(シェア)してもらえないように感じたので丸くしてより「ボタン感」を強めました。

これなら押したくなる！…はず！

くるみ

ちなみにカスタマイズの話からは逸れますが、個人的にSNSボタンは記事下のみに配置するのがおすすめです。

というのも本カスタマイズの場合ですと、デフォルトの四角形のものと比べてアイキャッチ下のSNSボタンの方は余白が生まれ少し不格好に映ってしまいます。
(カスタマイズのデザインの都合で元々配置していた要素を消したら本末転倒ではあるんですけどね。)

アニメーションをつけることも可能

本記事では上のようにSNSボタンを浮き上がるアニメーションの実装方法もご紹介します。

スクロールしていき特定の範囲まで来ると浮き上がるようになります。ちなみに適用されるのは記事下のシェアボタンのみ。

もちろんアニメーションをつけないで見た目だけカスタマイズすることも可能なので安心してください。

JINのSNSボタンのカスタマイズ方法

カスタマイズ手順は以下の通り。

手順

step1

SNSボタンの設定を「デザイン1」にする

step2

CSSを追加する

step3

jsを追加する(任意)

step3に関してはアニメーションを付けたい方のみが対象です。

バックアップは忘れずにしておこう

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

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

step1：SNSボタンの設定を「デザイン1」にする

step1

「外観」→「カスタマイズ」を選択

カスタマイズ画面をまず開きます。

step2

SNS設定（OGP）を選択

下の方にある「SNS設定」をクリック。ちなみにここで表示するSNSの種類を指定できます。

step3

「デザイン1」に設定

「SNSボタンのデザイン」を「スタイル1」に設定します。

次にCSSをいじっていきます。

step2：CSSを追加する

以下のどれかの方法でCSSのコードをコピペします。

「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加

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

くるみ

「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

.sns-design-type01.share-top{
  margin-top:10px;
}
.sns-design-type01 ol{
  justify-content:center!important;
}
.sns-design-type01 ol li a {
  width: 50px;
  height: 50px!important;
  border-radius: 50%!important;
  box-shadow:none!important;
  opacity:.7;
  padding:0!important;
  margin:0 auto;
}
.sns-design-type01 ol li {
  opacity:.7;
}
@media screen and (min-width:768px){
  .sns-design-type01 ol li {
    width:12%!important;
  }
}
.sns-design-type01 ol li a i {
  height: 50px!important;
  line-height: 48px;
  font-size:1.7em!important;
}
.sns-design-type01 ol li a i:before{
  padding:0;
}
.sns .hatebu a {
  padding-top: 0;
}

これでデザインは適用されました。

次はアニメーション(任意)についてです。

step3：jsを追加する

こちらは浮き上がらせるアニメーションを実装したい場合のみ行ってください。

jsファイルを用意していない場合

もしまだjsのファイルを用意してカスタマイズしたことが無い場合、まず以下の手順を踏む必要があります。

step1

空のjsファイルを作成

空のjsファイルを作成します。名前は「scripts.js」としてあげてください。

step2

子テーマにアップロード

先程作成したscripts.jsを子テーマのディレクトリにアップロードしてあげます。

step3

functions.phpに追記する

以下を子テーマのfunctions.phpに追記してあげます。
このファイルを下手にいじるとサイトが真っ白になるので注意してください。

function theme_enqueue_scripts(){
  wp_enqueue_script('child-js', get_stylesheet_directory_uri().'/scripts.js',array(), '', true );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

これでscripts.jsを読み込むことができました。

コードはこちら

先程作成したscripts.jsに以下のコードを追記してあげます。

document.addEventListener("DOMContentLoaded", function () {
  className = "sns-share-float";
  let sns_share_buttons = document.querySelector(".share.sns-design-type01");
  //設定しているSNSボタンの数に合わせる
  let sns_share_button1 = document.querySelector(".share.sns-design-type01 li:nth-child(1)");
  let sns_share_button2 = document.querySelector(".share.sns-design-type01 li:nth-child(2)");
  let sns_share_button3 = document.querySelector(".share.sns-design-type01 li:nth-child(3)");
  let sns_share_button4 = document.querySelector(".share.sns-design-type01 li:nth-child(4)");
  let sns_share_button5 = document.querySelector(".share.sns-design-type01 li:nth-child(5)");

  window.addEventListener('scroll', function () {
    let windowHeight = window.innerHeight;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (sns_share_buttons) {
      let rect_sns = sns_share_buttons.getBoundingClientRect();
      let sns_share_position = rect_sns.top + scrollTop;
      let sns_share_diff = sns_share_position - windowHeight;
      if (scrollTop > sns_share_diff) {
        //設定しているSNSボタンの数に合わせる
        sns_share_button1.classList.add(className + "1");
        sns_share_button2.classList.add(className + "2");
        sns_share_button3.classList.add(className + "3");
        sns_share_button4.classList.add(className + "4");
        sns_share_button5.classList.add(className + "5");
      }
    }
  });
});

「//設定しているSNSボタンの数に合わせる」とあるように、表示するよう設定しているSNSボタンの数に合わせて記述を変える必要があります。

例えば3つしか設定していない場合は以下のようにしてあげればOKです。

let sns_share_button1 = document.querySelector(".share.sns-design-type01 li:nth-child(1)");
let sns_share_button2 = document.querySelector(".share.sns-design-type01 li:nth-child(2)");
let sns_share_button3 = document.querySelector(".share.sns-design-type01 li:nth-child(3)");
(省略)
sns_share_button1.classList.add(className + "1");
sns_share_button2.classList.add(className + "2");
sns_share_button3.classList.add(className + "3");

これでスクロールに合わせてアニメーションが適用されるはず。

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

お疲れ様！

くるみ