Cocoon〜SNSのシェアボタン表示方法〜

アイキャッチ画像
スポンサーリンク

はじめに

CocoonにおいてSNSのシェアボタンの設置方法について紹介していきます。

SNSシェアボタンとは以下のように記事の記事の先頭、または本文の下に表示できるボタンのことです。

そのボタンをクリックすることで記事の内容とともにSNSに投稿することができます。

表示例

この記事で紹介するCocoonでSNSシェアボタンを実際に記事上に表示させるとどのように表示されるのか、このサイト上での表示例を下に示します。

記事トップ

記事のタイトルの下、目次の上に表示されます。

また目次の表示位置の設定により、少し見た目が変わる場合もあります。

スポンサーリンク

記事本文下

本文の下、SNSフォローボタンの上に表示されます。

こちらも本文下周りの表示の設定によって多少シェアボタンの表示位置が人によってずれる場合があります。

SNSのフォローボタンの表示方法はこちらの記事もご覧ください↓

手順

それでは実際にWordPressの編集画面よりSNSのシェアボタンを設置するまでの流れを画面の画像とともに示します。

SNSシェアボタンにはページのトップと記事下の2箇所に設置することができますが、どちらが設定できれば、同じ容量でもう片方も設定できます。

トップシェアボタンより順に手順を示していきます。

トップシェアボタン

まず、WordPressの編集画面より左のメニューから「Cocoon設定」を選択します。

右側に表示されたタブから「SNSシェア」を選択します。

スポンサーリンク

シェアボタンの表示

「SNSシェア」を選択すると下方にSNSシェアボタンの設定画面が出てきます。

まずSNSシェアボタンを表示するには、「トップシェアボタンの表示」にチェックを入れます。

そして、「表示切替」よりSNSごとに表示の設定ができますので、シェアして欲しいSNSにチェックを入れます。

表示できるシェアボタンは以下の7種類になります。

  • Twitter
  • Facebook
  • はてなブックマーク
  • Pocket
  • LINE@
  • Pinterest
  • Linkedln


次に「表示ページ」よりシェアボタンを表示するサイトページを設定します。

表示できるページは以下の5つになります。

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

私の場合は、投稿ページにのみ表示させています。

基本的にシェアしたい内容は記事の内容になると思いますので、最初のうちは投稿ページのみでも問題ないと思います。

ここまでの「」「」「」

ここまでの「トップシェアボタンの表示」「表示切替」「表示ページの3つの設定を完了し、設定画面上部または下部の「変更をまとめて保存」を選択すれば、基本的なボタンは設置完了です。

とても簡単です。

プレビュー通りのボタンが表示されているか、実際にサイトを見て確認してみてください。

ボトムシェアボタン

ボトムシェアボタンについてもトップシェアボタン同様に設定できます。

ただし1点だけトップシェアボタンの時と異なる設定ができますので、その1点を以下に示します。

シェアメッセージ

トップシェアボタンにはない設定になります。

シェアボタンの上に読者にシェアを促すメッセージを入力することができます。

私の場合はシンプルに「Share」と入力していますが、もっとエクスクラメーションマーク(!)などを入れて派手に宣伝することもできるでしょう。

さらに細かい設定

ここより下はさらに細かい設定について書いていきます。

もう少しシェアボタンの調整を行いたい場合は、是非ご覧ください。

スポンサーリンク

ボタンカラー

ボタンカラー」ではシェアボタンのデザイン要素に関わる色を設定することができます。

以下の3パターンよりボタンのカラーを設定することができます。

  • モノクロ
  • ブランドカラー
  • ブランドカラー(白抜き)

モノクロ

黒色をベースにロゴを白で表現しています。

シンプルなデザインのサイトと合わせると良いでしょう。

目立ちにくくもあるので、周りのデザインにも気を配ると良いです。

ブランドカラー

SNSごとのブランドカラーをベースに白色でロゴを表現しています。

一番スタンダードな表示ではないでしょうか。

はじめのうちはこのデザインにしておけば見栄えも良くなります。

ブランドカラー(白抜き)

白色をベースにロゴをブランドカラーにすることで、少し落ち着いた色合いになっています。

上のブランドカラー表現よりも主張が控えめになっています。

私の場合は「ブランドカラー」に設定してありますが、サイト全体のデザインの遷移を見つつ、変更することも忘れないようにしていきたいです。

カラム数

ここでのカラム数とはSNSシェアボタンを表示する際の列の数のことです。

想像しにくいかと思いますので、下の表示例も合わせてご覧ください。

1〜6列の間で設定できます。

SNSシェアボタンの数によって調整します。

以下にSNSシェアボタンが4つの場合の「2列」と「4列」の表示例を示します。

2列表示


4つのボタンが2列で表示されています。

ボタンの数が2つ以上の場合は、縦にもスペースを使用します。

4列表示


4つのボタンを4列で表示するので、1行でボタンを表示することができます。

ボタンの数と設定した列数が同じ場合には1行で表示されます。

ロゴ・キャンプション配置

SNSボタン内のロゴとSNS名の表示位置を設定できます。

ここでのキャプションとはボタン内に表示されるSNSの名称のことです。

これも分かりにくいかと思いますので、下に示した表示例もご覧ください。


設定できるロゴ、キャプションの位置は以下の3種類になります。

  • ロゴ・キャプション左右
  • ロゴ・キャプション上下
  • キャプション・ロゴ左右

ロゴ・キャプション左右

ロゴ、キャプションの順に左から右へ表示されます。

左右のスペースを使用しますので、ボタンの横幅が大きい場合に適しています。

ロゴ・キャプション上下

ロゴ、キャプションの順に上から下へ表示されます。

ボタンの幅が狭く、横にあまりスペースを使用したくない場合に適しています。

キャプション・ロゴ上下

キャプション、ロゴの順に上から下へ表示されます。

1つ上で示したもとは上下逆の配置になります。

ボタンの幅が狭く、横にあまりスペースを使用したくない場合に適しています。

スポンサーリンク

シェア数の表示

これにチェックを入れることで、SNSによってはシェア数をボタンの右下に表示させることができます。


シェア数の表示」にチェックを入れるとSNSによってはボタンの右下に数字が表示されるようになりました。

現時点では全てのSNSに対応しているようではなさそうです。

最後に

Cocoonで使用できる便利なのに隠れている機能はまだたくさんあると思いますので、役に立ちそうなものはできるだけ分かりやすく記事に書いていこうと思います。

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