Cocoonでは、投稿の上下に、↓このようなSNSのシェアボタンを設置することができます。
今回は、このSNSのシェアボタンのデザインをカスタマイズする方法と、デザインサンプルを紹介します。
編集するのは、スタイルシート(CSS)のみです。
→Cocoonテーマのダウンロード | Cocoon
カスタマイズ例
先に、私のカスタマイズ例を載せておきます。
編集がしやすいので、Cocoon設定でボタンカラーを「モノクロ」に設定しています。
黒い背景のボックスと、各SNS名のテキストを非表示にし、カウントはそのまま残しました。
ひとつずつがコンパクトになったので、SNSシェアボタン全体を右寄せにしています。
SNSシェアボタンのデザインをカスタマイズする
まずはこのサイトで適用しているシェアボタンのデザインのCSSコードを説明します。
私は、これくらいの軽い編集であれば、Wordpressの管理画面内でやってしまうことが多いです。
事前に、Wordpress管理画面左側にある「Cocoon設定」→「Cocoon設定」→「SNSシェア」タブから「ボタンカラー」を、「モノクロ」に設定しておいて下さい。
①シンプルなデザインに変更する
子テーマ(Cocoon Child)のスタイルシート (style.css)を開き、以下のコードを貼り付けて下さい。
/************************************ ** SNSシェアボタン ************************************/ /* 各SNSボタン共通 */ #main .sns-buttons a{ color:#5d5d5d; background-color:#fff; width:2.5em; margin-left:0.5em; } /* テキストを非表示 */ .sns-share.ss-high-and-low-lc a .button-caption{ display:none; } /* 全体を右寄せ */ .sns-share-buttons{ justify-content:flex-end; }
文字色を変更したい場合は、「#main .sns-buttons a」という箇所の「color:#5d5d5d;」の値を変更してください。
②マウスホバー時に、アイコンの色を各SNSのイメージカラーにする
マウスホバー時に、色を付けるカスタマイズです。
ボタンのデザインをシンプルにしたので、マウスをホバーしたときに、SNSシェアボタンだと分かるように色を付けました。
【サンプル:Twitterホバー時】
【サンプル:Facebookホバー時】
ホバー時に色を付けるカスタマイズを施すには、以下のCSSコードをスタイルシートに貼り付けて下さい。
/* ホバー時 */ .sns-buttons .icon-twitter:hover{ color:#55acee; } .sns-buttons .icon-facebook:hover{ color:#3b5998; } .sns-buttons .icon-hatena:hover{ color:#3C7DD1; } .sns-buttons .icon-pocket:hover{ color:#EE4257; } .sns-buttons .icon-line:hover{ color:#00c300; } .sns-buttons .copy-button:hover{ color:#5d5d5d; }
このサンプルでは、Twitter、Facebook、はてなブックマーク、Pocket、LINE、リンクコピーの6つのボタンについて記述しています。
これにPinterestとLinkedInを追加したい場合は、同じように追記すればOKです。
シェアボタンのデザインサンプル
デザインサンプルです。コピペして使ってください。
すべて、上の「①シンプルなデザインに変更する」のデザインを元にしています。
このコードを貼り付けてから対象の箇所だけ変更してください。
背景色をつけて丸くする+SNSカウント非表示
/* 各SNSボタン共通 */ #main .sns-buttons a { color: #f7f7f7; background-color: #484848; border-radius: 30px; width: 2.5em; margin-left: .5em; } /* SNSカウント非表示 */ .sns-share-buttons a .share-count { display: none; }
マウスホバー時に下線をつける
.sns-buttons a:hover { border-bottom: 1px solid #5d5d5d; }
さいごに
SNSシェアボタンは便利なのですが、なるべく目立たないシンプルなデザインにしたかったので、このようなカスタマイズをしました。
コピペで使ってみてください。
他のカスタマイズがしたいけれどやり方がわからない、という場合はコメントをしていただければ、時間があるときに対応します。
Comments
[…] 「Cocoon設定」から白抜き、黒塗りなど3種類のデザインで変更できますが、ボクはこちらの記事を参考にカスタマイズしました。ボタンの存在感を減らし、全体のデザインとの調和を目指 […]
[…] 「Cocoon設定」から白抜き、黒塗りなど3種類のデザインで変更できますが、ボクはこちらの記事を参考にカスタマイズしました。ボタンの存在感を減らし、全体のデザインとの調和を目指 […]