くるみ
ということで今回は
- JINのSNSボタンが横に長い四角であまり気に入ってない
- シェア率が高くなるようなデザインのSNSボタンにしたい
という方に向けて、JINのSNSボタンを丸くして可愛くするカスタマイズ方法をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
SNSボタンの完成イメージ
before
after
調整した点は主に以下の通りです。
- 丸くすることでより可愛いデザインに
- 透明度を上げてチカチカしない色に
- アイキャッチ下の方は画像との間に余白を設ける
デフォルトの横長のデザインだとどうしても区切り線のように見えてしまい、中々クリック(シェア)してもらえないように感じたので丸くしてより「ボタン感」を強めました。
くるみ
ちなみにカスタマイズの話からは逸れますが、個人的にSNSボタンは記事下のみに配置するのがおすすめです。
というのも本カスタマイズの場合ですと、デフォルトの四角形のものと比べてアイキャッチ下のSNSボタンの方は余白が生まれ少し不格好に映ってしまいます。
(カスタマイズのデザインの都合で元々配置していた要素を消したら本末転倒ではあるんですけどね。)
アニメーションをつけることも可能
本記事では上のようにSNSボタンを浮き上がるアニメーションの実装方法もご紹介します。
スクロールしていき特定の範囲まで来ると浮き上がるようになります。ちなみに適用されるのは記事下のシェアボタンのみ。
もちろんアニメーションをつけないで見た目だけカスタマイズすることも可能なので安心してください。
JINのSNSボタンのカスタマイズ方法
カスタマイズ手順は以下の通り。step3に関してはアニメーションを付けたい方のみが対象です。
バックアップは忘れずにしておこう
早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。
「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

step1:SNSボタンの設定を「デザイン1」にする
次にCSSをいじっていきます。
step2:CSSを追加する
以下のどれかの方法でCSSのコードをコピペします。
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
くるみ
「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

コードはこちら
.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のファイルを用意してカスタマイズしたことが無い場合、まず以下の手順を踏む必要があります。
このファイルを下手にいじるとサイトが真っ白になるので注意してください。
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」キー |
まとめ
SNSでシェアされることもSEO的に重要な要素になってきてますから、少しでも拡散してもらえるようシェアボタンの見た目には気を配っていきたいところですね。
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝