この記事では、CocoonのSNSシェアボタンとフォローボタンの役割の違いから、表示・非表示の設定、かんたんなデザインカスタマイズまでをまとめて紹介します。
先に結論を言うと、「よく使うSNSだけを厳選して表示し、CocoonのSNSボタンをコンパクトに整える」のが、一番ストレスが少なくて成果も出やすい配置です。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
CocoonのSNSボタン・フォローボタンでできることを整理しよう
この章では、CocoonのSNSボタン周りで何ができるのか、ざっくり全体像をそろえます。まずは「シェア」と「フォロー」の違いを押さえておくと、そのあとの設定で迷いにくくなります。
CocoonのSNSシェアボタンとフォローボタンの違い
最初に、CocoonのSNSシェアボタンとフォローボタンの役割を表で比べてみます。
| 種類 | 役割 | 主な表示場所の例 |
|---|---|---|
| SNSシェアボタン | 読者が記事のURLを自分のSNSで共有するためのボタン。ページビューを増やすのが主な目的です。 | 記事上（トップシェア）、記事下（ボトムシェア）など |
| SNSフォローボタン | あなたのSNSアカウントのページへ誘導し、フォローしてもらうためのボタン。ファンづくりが目的です。 | 記事下、サイドバー、プロフィール下など |
ざっくり言うと、シェアボタンは「記事を広めるためのボタン」、フォローボタンは「あなた自身を知ってもらうためのボタン」です。
Cocoonでは、この2種類を「SNSシェア」タブと「SNSフォロー」タブで別々に設定できるようになっています。
どのSNSボタンを表示すべきかの考え方
SNSボタンを片っ端から全部オンにすると、画面がカラフルになりすぎて、読者からすると少し落ち着かない印象になります。
私がいろいろ試してしっくりきた考え方は、次のようなシンプルなものです。
- 自分がきちんと運用しているSNSだけフォローボタンを出す
- 読者がよく使っていそうなSNSだけシェアボタンを出す
- とりあえず全種類表示ではなく、3〜5個程度に絞る
実際、Cocoonの設定画面では、シェアボタンもフォローボタンも、どのSNSを表示するかを個別にオン・オフできます。
なので、すでにごちゃっとしている場合は、一度すべてオフにしてから「本当に使うSNS」だけを選び直すのがおすすめです。
Cocoonのsnsボタン（シェアボタン）の基本設定
ここからは、CocoonのSNSシェアボタンの基本設定を順番に見ていきます。Cocoon設定の「SNSシェア」タブを押さえておけば、表示場所や色、カラム数など、必要な調整はほとんどここで完結します。
Cocoon設定「SNSシェア」タブでできること一覧
WordPress管理画面の左メニューから「Cocoon設定」→「SNSシェア」タブを開くと、シェアボタンに関する設定がひとまとめになっています。
代表的な項目を整理すると、次のようなイメージです。
| 項目 | 内容のイメージ |
|---|---|
| トップシェアボタン | 記事タイトルやアイキャッチ付近に表示するシェアボタンのオン・オフ |
| ボトムシェアボタン | 記事本文の最後に表示されるシェアボタンのオン・オフ |
| 表示ページ | 投稿・固定ページなど、どの種類のページに出すかの指定 |
| ボタン色 | ブランドカラー、モノクロ、白ベースなど、ボタンの色味 |
| カラム数 | ボタンを何列で並べるか。スマホでの見た目にも影響 |
| ロゴ・キャプション配置 | アイコンとテキストを縦積みか横並びかなどのレイアウト |
| シェア数の表示 | シェア数カウンターを表示するかどうか |
一度ずらっと見渡してみるだけでも、「自分のブログにはこの並び方が合いそうだな」とだいたいの方向性が見えてきます。
トップシェア・ボトムシェアの使い分け
Cocoonでは、記事上に出る「トップシェアボタン」と、記事下に出る「ボトムシェアボタン」を別々にオン・オフできます。
- 記事上は非表示で、記事下だけにシェアボタンを出す
- 記事下は非表示にして、記事上のみにする
- どちらも出さない
など、自由度は高めです。
読者の行動を考えると、まずは「ボトムシェアボタンだけ残す」設定から試すのがおすすめです。
記事を読み切って内容に満足したタイミングで、シェアボタンが目に入ると、自然と押してもらいやすいからです。
シェアメッセージとシェア数表示の考え方
SNSシェアの設定画面には「シェアメッセージ」という項目もあります。
ここには、ボタンの上に小さく表示される「よかったらシェアしてね」のような一言メッセージを自由に入力できます。
また、シェア数カウンターをオンにすると、共有された回数が数字で表示されます。ある程度アクセスがあるブログなら数値が励みになりますが、立ち上げたばかりのサイトだと「0」がずらっと並んでしまうこともあります。
私の場合は、最初のうちはシェア数をオフにしておき、安定して読まれるようになってからオンにする、という流れが精神的にも楽だと感じました。
Cocoon フォローボタンの基本設定と設置場所
次はフォローボタンです。こちらは「あなたのSNSアカウントへの入り口」になる部分なので、フォロワーを増やしたい人にとってはかなり大事なパーツです。
Cocoonが対応しているSNSフォローボタン
Cocoonでは、よく使われるSNSのフォローボタンに標準で対応しています。
代表的なものを簡単に表にまとめると、次のようになります。
| 種類 | 説明 |
|---|---|
| Webサイト | 別サイトやポートフォリオなどへのリンクに使えるボタン |
| X（旧Twitter） | テキスト中心で発信している人向けのボタン |
| 実名ベースの発信やコミュニティを広げたいときに便利 | |
| 写真・イラスト・ハンドメイド作品などと相性がよい | |
| YouTube | 動画コンテンツをメインにしている人向けの導線 |
このほかにも、フィード購読用のボタンなどが用意されており、プロフィールの入力内容に応じてフォローボタンが表示される仕組みになっています。
Cocoon フォローボタンのURL登録の流れ
フォローボタンを動かすには、事前にあなたの各SNSアカウントのURLを登録しておく必要があります。
ざっくりした流れは次のとおりです。
- WordPress管理画面で「ユーザー」→「プロフィール」を開く
- プロフィール画面の「連絡先情報」などに、各SNSのURLを入力する
- 一番下の「プロフィールを更新」ボタンを押して保存する
- 「Cocoon設定」→「SNSフォロー」タブで、表示したいフォローボタンにチェックを入れる
これで、記事下やサイドバーなどにCocoonのフォローボタンが表示されるようになります。
記事下・サイドバー・プロフィールのどこに置くか
フォローボタンの表示位置は、Cocoonの設定とウィジェットを組み合わせて決めていきます。
- 記事下のフォローボタン
記事を読み終えた直後、「この人の情報を追いかけてみようかな」と思ってもらえた瞬間にフォローしてもらいやすいです。 - サイドバーのフォローボタン
どの記事を読んでいても目に入るので、ゆるくフォローを促したいときに向いています。 - プロフィール下のフォローボタン
自己紹介とセットで見てもらえるので、「この人面白そう」と感じてもらいやすくなります。
特にフォローしてほしいSNSが決まっているなら、そのボタンを目立つ位置に置くなど、メリハリをつけるのがおすすめです。
CocoonのSNSボタンデザインを簡単にカスタマイズする方法
ここからは、CocoonのSNSボタンの「見た目」を整える話です。初期状態のデザインでも十分使えますが、CSSを少し足すだけで、だいぶスッキリした印象に変えられます。
カスタマイズ前に知っておきたい基本ルール
CSSで手を入れる前に、最低限押さえておきたいポイントを表にまとめました。
| 項目 | ポイント |
|---|---|
| 変更場所 | 「外観」→「カスタマイズ」→「追加CSS」か、子テーマのstyle.cssに記述するのが基本 |
| バックアップ | いきなり大量に書き換えず、元のコードはメモ帳などにコピーして残しておく |
| 影響範囲 | SNSシェアだけなのか、フォローボタンだけなのか、両方に効くのかを意識しておく |
| 反映確認 | PCだけでなく、スマホ表示でも崩れていないか必ずチェックする |
とくに子テーマ側のstyle.cssを触るときは、誤って別のデザインまで崩してしまうことがあるので、「どこを変えたのか」をメモしておくと安心です。
ボタンを小さく・丸くしてスッキリ見せる
デフォルトのシェアボタンは横長で存在感があり、悪く言うと少しゴツい印象になることもあります。
これを少し小さくしたり、丸いアイコン風にしたりすると、全体のバランスが取りやすくなります。
よくあるカスタマイズの方向性は、次のようなイメージです。
- シェアボタンもフォローボタンも、丸いアイコンスタイルに揃える
- 背景色を各SNSのブランドカラーから、グレーや白ベースに変えて主張を抑える
- 普段はシンプルな色で表示し、カーソルを乗せたときだけ色が変わるようにする
【稼げるキーワード教えます】
▼ ▼ ▼
ネット上にはCocoon向けのCSSサンプルがたくさんあるので、最初はそういったコードをそのまま試してみて、「こんな雰囲気になるのか」と体感しながら調整していくと失敗が少ないです。
シェアボタンだけ・フォローボタンだけを別デザインにする
「記事のシェアは目立たせたいけれど、フォローボタンは落ち着いた雰囲気にしたい」といったケースもよくあります。
Cocoonでは、シェアボタンとフォローボタンにそれぞれ別のクラス名が付いているため、「シェアだけ」「フォローだけ」といった個別のカスタマイズも可能です。
イメージとしては、次のような使い分けがしやすくなります。
| 対象 | デザインイメージ | ねらい |
|---|---|---|
| シェアボタン | ブランドカラーで少し大きめのボタン | 記事を積極的に広めてもらいたいときに目立たせる |
| フォローボタン | グレーや白ベースの丸アイコンなど落ち着いたデザイン | サイトデザインになじませつつ、さりげなくフォローを促す |
最初から完璧なデザインを目指す必要はありません。
「どちらをより目立たせたいか」だけ決めておき、それに合わせてCSSサンプルを選ぶ、くらいの軽い気持ちで始めてみると気楽です。
Cocoonのsnsボタン・フォローボタンを非表示／最小限にする設定
ここでは、「そもそもSNSボタンはいらない」「記事上のボタンだけ消したい」といったときの減らし方を整理します。CocoonはSNSまわりが充実していますが、ブログの目的によっては思い切って非表示にしてしまうのも選択肢のひとつです。
設定画面からの非表示（おすすめの基本手順）
もっとも簡単なのは、Cocoon設定のチェックを外す方法です。
よくあるパターンを表にすると、次のようになります。
| やりたいこと | 主な設定方法 |
|---|---|
| 記事上だけシェアボタンを消したい | 「Cocoon設定」→「SNSシェア」で、トップシェアボタンに関するチェックを外す |
| 記事下だけシェアボタンを残したい | トップシェアボタンをオフにして、ボトムシェアボタンだけオンにする |
| 投稿だけシェアボタンを表示したい | 表示ページの設定で「投稿」のみにチェックを入れる |
| シェアもフォローも全部消したい | 「SNSシェア」と「SNSフォロー」の両方で、ボタン表示のチェックをすべて外す |
まずはこのあたりのチェックを整理するだけでも、「ここはいらないのに表示されている」というモヤモヤをかなり減らせます。
CSSで特定ページ・固定ページだけSNSボタンを消す
「この固定ページだけシェアボタンを消したい」「プロフィールページだけフォローボタンを表示したくない」といった細かい調整は、CSSで行うことが多いです。
たとえば、特定の固定ページだけシェアボタンを非表示にするCSSや、そのページだけシェアボタンとフォローボタンをまとめて消すCSSなどが、Cocoon公式のカスタマイズ記事や解説ブログで紹介されています。
やり方の例としては、
- 子テーマのstyle.cssに、対象ページIDを指定したCSSを書く
- ページ編集画面の「カスタムCSS」欄に、必要なコードだけ記述する
といった方法があります。
LP（ランディングページ）のように使う固定ページでは、あえてSNSボタンを非表示にして、1つのゴールに集中させる、という使い方もありです。
スマホで見やすいCocoonのSNSボタン配置とクリックされやすい工夫
多くの読者はスマホからブログを読んでいます。そのため、CocoonのSNSボタンも「スマホでどう見えるか」を意識しておくと、グッと使いやすくなります。
スマホでのカラム数とボタン数のバランス
ボタンの数やカラム数を欲張りすぎると、スマホではアイコンが小さくなり、タップしづらくなってしまいます。
目安としては、次のようなバランスをイメージするとよいです。
| 項目 | 目安 |
|---|---|
| 表示するSNSの数 | 3〜5個程度 |
| カラム数 | PCは5〜6列でもOK、スマホは2〜3列だと見やすい |
カラム数を少なめにしておくと、1つひとつのボタンが大きく表示されるため、指で押しやすくなります。
どこにSNSボタンを置くと押されやすいか
私自身のサイトや、ほかのCocoonユーザーのブログを眺めていると、「押されやすい配置」にはある程度の傾向があると感じます。
- シェアボタンは本文のいちばん下に置くと押されやすい
- トップシェアボタンは、ニュース系や短めの記事などで効果的なことが多い
- フォローボタンは、記事下かサイドバーに置くと自然に目に入る
特にフォローボタンは、「プロフィール＋自己紹介文」とセットで見せると効果的です。
あなたの雰囲気や得意分野が伝わった直後にフォローボタンがあると、フォローしてもらいやすくなります。
モバイルメニューのSNSボタンの仕様には注意
Cocoonには、モバイル表示のときに「シェア」ボタンからSNSアイコンをまとめて表示する機能があります。このモバイル側のシェアボタンは、テーマやスキン、バージョンによって挙動が異なることがあります。
設定画面でシェアボタンを絞り込んでも、モバイルメニューの中では別の表示ルールが適用されているケースもあるので、「思ったとおりに減らせないな」と感じたら、公式マニュアルや使っているスキンの説明を確認してみてください。
それでもうまくいかない場合は、CSSで個別のSNSボタンだけを非表示にする、という方法もあります。
よくある質問（Cocoonのsnsボタン・フォローボタン）
最後に、CocoonのSNSボタンまわりでよくある疑問を、Q&A形式でまとめます。
Q1.CocoonのSNSシェアボタンが表示されないとき、どこをチェックすればいいですか？
A1.まず、「Cocoon設定」→「SNSシェア」で、トップシェアボタンとボトムシェアボタンがオフになっていないか確認します。
あわせて「表示ページ」のチェックが適切かどうか、表示したいSNSアイコンがオンになっているかも見直してみてください。
それでも表示されない場合は、キャッシュ系プラグインや、別のSNSボタン系プラグインとの干渉が原因になっていることもあります。
一時的にそれらをオフにして、表示が戻るか試してみると切り分けしやすいです。
Q2.Cocoon フォローボタンだけデザインを変えることはできますか？
A2.はい、可能です。
フォローボタンには専用のクラス名が付いているため、CSSでフォローボタン部分だけを狙ってデザインを変更できます。
丸いアイコンにしたり、背景色を単色にしたりといったサンプルコードも多く公開されているので、まずはそれをベースに、自分のサイトに合うよう少しずつ調整していくとよいと思います。
Q3.シェアボタンとフォローボタン、どちらを優先して設定したほうがいいですか？
A3.ブログを立ち上げたばかりの段階であれば、まずはシェアボタンのほうを整えるのがおすすめです。
記事を読んでくれた人が、シンプルな操作でシェアできるようにしておくだけでも、新しい読者に出会えるきっかけが増えるからです。
そのうえで、あなたが継続して投稿しているSNSがあるなら、フォローボタンも合わせて設置しておくと、ファンになってくれる読者とつながりやすくなります。
まとめ：CocoonのSNSボタン設定はサクッと終わらせよう
この記事のポイントを整理します
- CocoonのSNSボタンは「シェア」と「フォロー」の2種類があり、役割がまったく違う
- シェアボタンは「SNSシェア」タブ、フォローボタンは「SNSフォロー」タブからまとめて設定できる
- 表示するSNSは3〜5個程度に絞ると、スマホでも見やすく押しやすい
- CSSをほんの少し足すだけで、ボタンを小さくしたり丸くしたりして、おしゃれに整えられる
- いらない場所のSNSボタンは、設定画面やCSSでピンポイントに非表示にできる
今日からできる最初の一歩は、「Cocoon設定」→「SNSシェア」と「SNSフォロー」を開いて、今表示されているボタンを一度すべて眺めてみることです。
本当に使っているSNSだけを残し、CocoonのSNSボタンをスッキリ整理するだけでも、ブログ全体の印象はかなり変わります。
あなたのサイトらしいSNSボタンの形を、少しずつ育てていきましょう。
記事を読んだらコチラ
▼ ▼ ▼
