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

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

くるみ

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

ということで今回は

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

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

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

私と一緒に見ていこう!

くるみ

SNSボタンの完成イメージ

before

JINのカスタマイズ前のSNSボタン

after

JINのカスタマイズ後のSNSボタン

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

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

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

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

くるみ

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

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

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

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

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

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

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

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

手順
step1
SNSボタンの設定を「デザイン1」にする
step2
CSSを追加する
step3
jsを追加する(任意)

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

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

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

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

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

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

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

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

カスタマイズ画面をまず開きます。
step2
SNS設定(OGP)を選択

SNS設定(OGP)を選択

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

「デザイン1」に設定

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

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

step2:CSSを追加する

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

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加
「追加CSS」が最もお手軽にできるよ

くるみ

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

WordPressで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ファイルを作成

空の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");

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

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

お疲れ様!

くるみ

余談ではありますが上のアニメーション付与ためのコードはサイトのパフォーマンスのことを考慮し、jQueryは使わずVanilla JSで書いています。コードが多少長ったらしくなっているのはそのためです。

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

「CSSを追記して保存したにも関わらず反映されないぞ…」となった場合は、以下が原因であることが多いです。

  • キャッシュ系プラグイン
  • プラウザキャッシュ

キャッシュ系プラグインを疑う

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

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

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

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、JINのSNSボタンのカスタマイズ方法でした。

SNSでシェアされることもSEO的に重要な要素になってきてますから、少しでも拡散してもらえるようシェアボタンの見た目には気を配っていきたいところですね。
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】

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

コメントを残す