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

Cocoonカスタマイズ

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

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

 

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

 

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

 

Tweet / Twitter

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

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

 

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

 

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

 

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

 

スポンサーリンク

SNSシェアボタンって何?

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

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

 

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

Cocoonカスタマイズ1

 

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

 

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

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

Cocoonカスタマイズ12

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

 

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

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

 

Hana
Hana

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

と言う方、安心してね。

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

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

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

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

Cocoonカスタマイズ1

 

「外観」をクリック

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

Cocoonカスタマイズ2

 

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

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

Cocoonカスタマイズ3

 

「追加CSS」をクリック

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

Cocoonカスタマイズ4

 

CSSコードを入力していく

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

Cocoonカスタマイズ5

 

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

Cocoonカスタマイズ6

 

 

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

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

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

 

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

.button-caption{
display: none;
}

 

 

Cocoonカスタマイズ7

 

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

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

 

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

 

Cocoonカスタマイズ8

 

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

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

 

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

 

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

Cocoonカスタマイズ9

 

ボタンを中央に寄せます

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

 

 

Cocoonカスタマイズ10

 

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

 

Cocoonカスタマイズ11

 

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

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

Cocoonカスタマイズ12

 

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

 

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

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

Cocoonカスタマイズ13

 

貼り付ける。

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

Cocoonカスタマイズ14

 

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

Cocoonカスタマイズ15

 

丸くなった。

Cocoonカスタマイズ16

 

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

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

 

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

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

 

Cocoonカスタマイズ17

 

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

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

 

まん丸になった。

Cocoonカスタマイズ18

 

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

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

Cocoonカスタマイズ19

 

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

Cocoonカスタマイズ20

 

コピペする場合はこちら

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

 

 

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

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

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

 

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

Cocoonカスタマイズ21

 

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

ダッシュボード

【Cocoon設定】をクリック

Cocoonカスタマイズ22

 

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

Cocoonカスタマイズ23

 

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

Cocoonカスタマイズ24

 

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

Cocoonカスタマイズ25

 

満足っ!!!

Cocoonカスタマイズ26

 

SNSボタンCSSコード(コピペ用)

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

.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-follow-buttons a {
border-radius: 50%; /*丸み*/
margin: 2px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
width: 35px; /*ボタンの幅*/
height: 35px; /*ボタンの高さ*/
margin-bottom: 0.5em; /*ボタンの下の余白*/
}
.sns-follow-buttons {
justify-content: center;
}

フォローボタン・シェアボタンのまとめ

CSS無知だった私が、独学で調べながらカスタイマイズ楽しんでいます。

 

私はまだ専門家ではないので、専門用語がわからないことが多く

こここれこーなったらいいのに…。誰にどうやって聞けばいいんだ?」

と、つまづくことが多かったです。

 

そんな専門用語はわからないんだけど、見た目にはこだわりたいんだ!!
という方のために、私がしてきたカスタマイズを公開していっています。

 

ご質問や「ここのこれはどうやったら直るの?」などございましたら、お問い合わせTwitterからお気軽にご質問くださいませ。

 

 

 

 

 

 

 

 

 

 

 

 

 

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