【Cocoon】SNSボタンの設定方法について詳細解説

【Cocoon】SNSボタンの設定方法について詳細解説Cocoonの使い方

今回は『CocoonのSNSボタンの設定方法』について解説していきます。

CocoonのSNSボタンには『SNSシェアボタン』と『SNSフォローボタン』の2つがあり、どちらも簡単に設定することができます。

各設定項目を詳しく解説していきますので、ぜひ参考にしてみてください。

スポンサーリンク

CocoonのSNSボタンの設定方法

動画でも解説しています。

SNSボタンのデザインはスキンで変わる

CocoonのSNSボタンのデザインは、選ぶスキンで変わります。

Cocoonのスキンの選択

 

例えば、当ブログでも使っている『COLORS(グリーン)』のSNSボタンがこちらです。

COLORS(グリーン)のSNSボタン

 

『Fuwari -海老茶(えびちゃ)-』を選ぶと、このようなSNSボタンになります。

Fuwari -海老茶(えびちゃ)-のSNSボタン

「なんで他のCocoonユーザーとSNSボタンのデザインが違うんだろう?」と思ったときは、このスキン設定をまず確認してみましょう。

SNSシェアボタン

CocoonのSNSシェアボタン

SNSシェアボタンは、読者に記事をSNSで紹介してもらうために設置します。

 

Cocoonでは『Cocoon設定 ⇒ SNSシェア』で設定していきます。

『Cocoon設定 ⇒ SNSシェア』で設定

 

なお、CocoonのSNSシェアボタンには『トップシェアボタン』と『ボトムシェアボタン』の2つがあり、それぞれ設定する必要があります。

  • トップシェアボタン:本文の上に表示
  • ボトムシェアボタン:本文の下に表示

【トップシェアボタンの設定】
トップシェアボタンの設定

【ボトムシェアボタンの設定】
ボトムシェアボタンの設定

『トップシェアボタン』と『ボトムシェアボタン』それぞれ設定する必要はありますが、設定する項目はほぼ一緒なので、まとめて解説していきます。

シェアボタンの表示

【トップシェアボタンの表示】
トップシェアボタンの表示

【ボトムシェアボタンの表示】
ボトムシェアボタンの表示

こちらにチェックを入れるとSNSシェアボタンが表示、チェックを外すと非表示なります。

別々で設定できるので、当ブログではトップを非表示、ボトムを表示にしています。

シェアメッセージ

シェアメッセージ

『シェアメッセージ』はボトムシェアボタンの上に表示させるメッセージです(トップシェアボタンには設定できません)

ボトムシェアボタンの上のメッセージ

不要な場合は、空欄にしてメッセージを削除することも可能です。

表示切替

表示切替

『表示切替』では、表示させるボタンを以下の9つから選択できます。

  • Twitter
  • Facebook
  • はてなブックマーク
  • Pocket
  • LINE@
  • Pinterest
  • Linkedln
  • タイトルとURLをコピー
  • コメント

なるべく自分のブログの読者が利用しそうなボタンを選びましょう。

表示ページ

表示ページ

『表示ページ』では、SNSシェアボタンを設置するページを以下の5つから選択できます。

  • フロントページ
  • 投稿
  • 固定ページ
  • カテゴリー
  • タグ

通常ブログ記事は『投稿』で作成しますので、『投稿』にはチェックを入れておきましょう。

ボタンカラー

ボタンカラー

『ボタンカラー』では、以下の3種類からボタンのデザインを選択できます。

【モノクロ】
モノクロのSNSボタン

【ブランドカラー】
ブランドカラーのSNSボタン

【ブランドカラー(白抜き)】
ブランドカラー(白抜き)のSNSボタン

なお、当ブログではブランドカラー(白抜き)を使っています。

カラム数

カラム数

『カラム数』では、SNSボタンを横並びで設置する数を設定します。

【3列にした場合】
カラム数を3列にした場合のSNSボタン

【6列にした場合】
カラム数を6列にした場合のSNSボタン

『表示切替』で選択したボタンの数も考慮しながら、バランスの良いカラム数を選択してください。

ただし、スマホでは画面サイズの影響で表示が変わることもありますので、スマホ表示も必ず確認しておきましょう。

ロゴ・キャプション配置

ロゴ・キャプション配置

『ロゴ・キャプション配置』では、SNSのロゴと名称の配置を以下の3つから選択できます。

【ロゴ・キャプション 左右】
ロゴ・キャプション 左右 にした場合のSNSボタン

【ロゴ・キャプション 上下】
ロゴ・キャプション 上下 にした場合のSNSボタン

【キャプション・ロゴ 上下】
キャプション・ロゴ 上下 にした場合のSNSボタン

こちらはお好みで選択してください。

シェア数の表示

シェア数の表示

『シェア数の表示』にチェックを入れると、以下のようにシェアされた数が、ボタンの右下に表示されます。

シェア数が表示されたSNSボタン

ただし、シェアされていないと『0』と表示されてしまうため、人気がない記事と思われてしまう可能性もあります。

また、TwitterやLINEなど、SNS側の仕様でシェア数が表示されないものもありますので、その点は理解しておきましょう。

SNSフォローボタン

CocoonのSNSフォローボタン

SNSフォローボタンは、読者に自分のSNSをフォローしてもらうために設置します。

 

Cocoonでは『Cocoon設定 ⇒ SNSフォロー』で設定していきます。

『Cocoon設定 ⇒ SNSフォロー』で設定

なお、SNSシェアボタンは本文の上下に設置可能でしたが、ここから解説するSNSフォローボタンは本文の下のみ設置可能となっています。

フォローボタンの表示

フォローボタンの表示

SNSフォローボタンを表示させるには、こちらにチェックを入れます。

なお、必須ではありませんので、不要な場合はチェックを外して非表示にしても構いません。

フォローメッセージ

フォローメッセージ

『フォローメッセージ』には、SNSフォローボタンの上に表示させるメッセージを入力します。

 

『#{author}』と入れると、投稿者名が入力されますが、不要なら削除しても構いません。

SNSフォローボタンの上のフォローメッセージ

また、フォローメッセージ自体が不要な場合は、削除して空欄にすることも可能です。

SNSサービスのURL

SNSサービスのURL

『SNSサービスのURL』は、WordPress管理画面の『ユーザー ⇒ プロフィール』で入力します。

WordPressの『ユーザー ⇒ プロフィール』

 

こちらで入力したSNSサービスのフォローボタンは、このように表示されます。

SNSサービスのURLを入力した場合のフォローボタン

SNSのフォロワー数を増やしたい方は、こちらの入力を忘れずに行いましょう。

表示ページ

SNSフォローボタンの表示ページ

『表示ページ』では、SNSフォローボタンを設置するページを以下の5つから選択できます。

  • フロントページ
  • 投稿
  • 固定ページ
  • カテゴリー
  • タグ

SNSフォローボタンを設置する場合は、少なくともブログ記事を書く『投稿』にはチェックを入れておきましょう。

feedlyの表示

feedlyの表示

feedlyはRSSを利用してブログの更新通知を受け取るサービスで、RSSリーダーの中では最も人気です。

『feedlyの表示』にチェックを入れると、左側の緑色のボタンが表示されます。

feedlyのフォローボタン

RSSの表示

RSSの表示

Cocoonでは、feedly以外のRSSサービス利用者のために、RSS取得用ボタンを表示させることもできます。

『RSSの表示』にチェックを入れると、右側のオレンジ色のボタンが表示されます。

RSSのフォローボタン

ボタンカラー

SNSフォローボタンのボタンカラー

『ボタンカラー』では、以下の3種類からSNSフォローボタンのデザインを選択できます。

【モノクロ】
モノクロのSNSフォローボタン

【ブランドカラー】
ブランドカラーのSNSフォローボタン

【ブランドカラー(白抜き)】
ブランドカラー(白抜き)のSNSフォローボタン

デフォルトユーザー

デフォルトユーザー

複数人でブログを運営している場合、投稿・固定ページのSNSフォローボタンは、投稿者のSNSが設定されます。

こちらの『デフォルトユーザー』では、カテゴリーやタグページにSNSボタンを設置した場合、フォローボタンに誰のSNSを設定するかを選択します。

カテゴリー・タグページにSNSフォローボタンを設置しない場合や、一人でブログを運営している場合は、特に気にする必要はありません。

しかし、複数人で運営している場合は、メインとなる管理者を設定しておくと良いでしょう。

フォロー数の表示

フォロー数の表示

『フォロー数の表示』にチェックを入れると、SNSフォローボタンにフォロー数が表示されます。

SNSフォロー数にチェックを入れた場合の表示例

しかし、フォロワーがいない場合は『0』と表示されます。

また、TwitterやYoutubeのように、SNS側の仕組みでフォロー数が表示されない場合もあります。

feedlyの購読者数

feedlyの購読者数

先に解説した『フォロー数の表示』にチェックを入れても、feedlyの購読者数は正確に表示されない場合があります。

その際はこちらの『feedlyの購読者数』に数値を入れることで、フォロー数を表示させることができます。

スポンサーリンク

【最後に】当ブログで行っている設定方法

今回は『CocoonのSNSボタンの設定方法』について解説してきました。

最後に当ブログで行っているSNSシェアボタンの設定をご紹介します。

  • シェアボタンの表示はボトムのみ
    ⇒ 記事をシェアするのは読んだ後と考えているため、トップは非表示
  • 表示切替:Twitter・Facebook・はてブ・Pocket・LINE@・タイトルとURLをコピー
  • シェアメッセージ:空欄にして非表示
  • 表示ページ:投稿のみ
  • ボタンカラー:ブランドカラー(白抜き)
  • カラム数:3列
  • ロゴ・キャプション配置:ロゴ・キャプション 左右
  • シェア数の表示:チェックしていない

この下に表示されているSNSシェアボタンと同じ設定にしたい方は、上記の設定を参考にしてみてください。

 

なお、このブログではSNSフォローボタンは非表示にしています。

SNSフォローボタンはプロフィールにも表示されるためですが、こちらも同じように設定したい方は、プロフィール設置の解説記事も合わせて参考にしてみてください。

 

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