【Cocoonカスタマイズ初心者】CSSコピペOK！SNSシェアボタン・フォローボタンを丸くする方法

こんにちは。
はな(@hana_simplicity)です。

独学でCocoonカスタマイズをしています。

超初心者でもわかるように26枚の画像を使って
わかりやすく説明しています。

今回のカスタマイズは
「SNSシェアボタン・SNSフォローボタン」のカスタマイズ。

https://twitter.com/hana_simplicity/status/1257999827448721410?s=20

この丸いアイコンを作ってみましょう。

コピー&貼りつけで作れます。

Cocoonカスタマイズしてみたいけれど、CSSがわからない。
Cocoon専用サイトを見ても専門用語がわからない。
Cocoonに見えないサイトをつくってみたい。

こんなCocoonカスタマイズ初心者の皆さま、何でも気軽にご質問ください！
一緒にCocoonライフ楽しみましょう～!!

※「手順ややり方はいいからコピペだけが早く知りたい」と言う方は、見出しから「SNSボタンCSSコード(コピペ用)」へ飛んでください。

SNSシェアボタンって何？
SNSフォローボタンって何？
SNSボタンを丸くする手順(全体像)
SNSシェアボタンを丸くする方法(画像付き)
SNSフォローボタンを丸くする
ボタンの種類の変え方(CSS不要)
1. ボタンの種類の変え方(実践編)
SNSボタンCSSコード（コピペ用）
フォローボタン・シェアボタンのまとめ

SNSシェアボタンって何？

私がまずつまづいたのが、これです。

「質問したくても、名称がわからない!!」ってやつ。

SNSシェアボタンとは、記事のタイトル下にあるこれのこと↓

この四角いボタンを丸くしていきます。

SNSフォローボタンって何？

ちなみに、
「SNSフォローボタン」は、本文の下にあるこのボタン。↓

これも後ほど丸くしていきます。

SNSボタンを丸くする手順(全体像)

SNSボタンを丸くする

STEP1
アイコンの文字を消す
Twitter、Facebookなどの英語文字を消します
STEP2
角を丸くする
まずは角を丸くします
STEP3
楕円形から丸にする
楕円形になってるので幅や高さを調節してまん丸にします
STEP4
中央に寄せる
離れているので中央に集めます。
STEP5
SNSフォローボタンも丸くする
同じ要領でSNSフォローボタンも丸くします

Hana

ちょっと何言ってるかわからない。

と言う方、安心してね。

26枚の画像とともに解説していくよーん！

SNSシェアボタンを丸くする方法(画像付き)

では、さっそくいってみましょう！

この四角いボタン(SNSシェアボタン)を丸くしていきます。

「外観」をクリック

ダッシュボード　→　「外観」をクリックします。

「カスタマイズ」をクリック

「外観」の中の上から2番目。
「カスタマイズ」をクリック

「追加CSS」をクリック

一番下にある「追加CSS」をクリックします。

CSSコードを入力していく

Cocoonの場合、
この「追加CSS」の中にコードを入力していくことでカスタマイズが可能です。

この右側は、CSSコードを入力した際のプレビュー画面です。
CSSコードを入力するたび見た目が変わっていくから面白いよ～。

ボタンの文字を消すコード

直接「追加CSS」に入力してもOK。

コピーして貼り付けしてもOKです。

まずは、ボタンの文字(Facebook・Twitterなど)を消すコード

.button-caption{
display: none;
}

ボタンに丸みをつけるコード

さきほどの続きに入力していきます。

.sns-share-buttons a {
border-radius: 50%; /*丸み*/
margin: 2px; /*ボタン同士の間隔*/
}

ボタンの高さと横幅を調整してまんまるに

追加でどんどん入力していきます。

#main .sns-share a {
width: 35px; /*ボタンの幅*/
height: 35px; /*ボタンの高さ*/
margin-bottom: 0.5em; /*ボタンの下の余白*/
}

まんまるになると可愛い…

ボタンを中央に寄せます

.sns-share-buttons {
justify-content: center;
}

SNSシェアボタンを記事上部と記事下部に設定している場合、
下部のアイコンも丸くなります。

SNSフォローボタンを丸くする

続いて、「SNSフォローボタン」を丸くしていきます。

私の場合は、
・Twitter
・Instagram
・YouTube
・note
の4種類です。

SNSフォローボタンに丸みをつける

直接入力する場合は、
さきほどのSNSシェアボタンのコードをコピーして…

貼り付ける。

そして、「share」を「follow」に変更すればOK。

ちなみに、私のように英語苦手な方は
「フォロー」と日本語入力すれば英語がでてくるので
そこで選んでも大丈夫です。

丸くなった。

コピペする場合はこちらをどうぞ。

.sns-follow-buttons a {
border-radius: 50%; /*丸み*/
margin: 2px; /*ボタン同士の間隔*/
}

フォローボタンをまん丸にする

これもシェアボタンのCSSコードをコピーして、
貼り付けて、「share」を「follow」に変更すればOK。

コピペしたい場合はこちら。

#main .sns-follow a {
width: 35px; /*ボタンの幅*/
height: 35px; /*ボタンの高さ*/
margin-bottom: 0.5em; /*ボタンの下の余白*/
}

まん丸になった。

フォローボタンを真ん中に寄せる

これもSNSシェアボタンのCSSコードをコピーして
下の行に貼り付ける。

そして
「share」を「follow」に変更。

コピペする場合はこちら

.sns-follow-buttons {
justify-content: center;
}

ボタンの種類の変え方(CSS不要)

SNSシェアボタンやSNSフォローボタンには種類があります。

これは、CSSコードを使わなくてもCocoon標準装備で変更可能！

フォローボタンだけが白抜きになってるのが気になる…

ボタンの種類の変え方(実践編)

ダッシュボード

↓

【Cocoon設定】をクリック

タブの中の「SNSフォロー」をクリック

「ボタンカラー」のところで好きなボタンに変更可能。

今回は「白抜き」から「ブランドカラー」に変更してみました。

満足っ!!!

SNSボタンCSSコード（コピペ用）

今までのをまとめたのがこちら。