【Cocoon】カスタマイズ | SNSボタン編

wordpress
この記事は約3分で読めます。
Sponsor Link
Sponsor Link

当サイトではシェア用しか使っていませんが
今回はSNSのシェア、フォローボタンのカスタマイズ記事を書いていこうと思います

Cocoonの設定

Cocoonの設定自体はこんな感じにしています

使用SNSはTwitter、はてブ、Pocket、コピーの4つ
ここで変える必要はないけどカラーをモノクロ
カラム数を横一列で配置したいので使用SNSと同じ数の4列

2列表示にさせたい場合は使用SNSを偶数にしてカラム数を2列にすると良いですよ

シェア数の表示をONです

CSSコード

/* cocoon純正シェアボタン */
.sns-share-message {
    margin: 10px 0 0 5px;
    text-align: left;
}
.sns-share-buttons a {
    border: 2px solid #bfbfbf;
    background-color: #fff;
    color: #6c6c6c;
}
.sns-share-buttons a:hover {
    color: #6c6c6c;
    background-color: #f2fcff;
}

記事本文下部に表示させるSNSシェアボタンのタイトルを左へ移動させ、marginで位置の調整をしています
ボタン自体はサイトの他の部分に合わせ白抜きにしボーダーの調整をしています
最後にマウスホバーカラーを指定して完了です

ボタン幅自体を変更したい場合は

.sns-buttons {
    width: ◯◯;
}

こんな感じで追加しましょう (表示個数によっては調整が面倒ですが…)

またボタンアイコンを変更したい場合は以下の部分の“\e91c”を変更してあげればOKです

.icon-twitter:before {
    content: "\e91c";
}
上記コードのクラスはTwitterですが、デベロッパーツールを使いセレクタを調べて変更しましょう

上記コードを追記して完成した物は当サイトの記事本文上下に表示されている物になります

当サイトではフォロー用のボタンは使っていませんが
.sns-follow-buttonsがフォロー用ボタンの指定クラスセレクタな筈ですので
この部分を変更してあげれば思い通りに出来ると思いますよ

おわり

いかがだったでしょうか?この部分も比較的簡単に出来るカスタマイズではないかと思います
フォントやガッツリ変わるカスタマイズは行っていないので、そのままコピーして使う事も出来ると思いますよ
そう難しい事はやっていませんが参考になったら幸いです

[share]

タイトルとURLをコピーしました