はじめに
CocoonにおいてSNSのシェアボタンの設置方法について紹介していきます。
SNSシェアボタンとは以下のように記事の記事の先頭、または本文の下に表示できるボタンのことです。
そのボタンをクリックすることで記事の内容とともにSNSに投稿することができます。
表示例
この記事で紹介するCocoonでSNSシェアボタンを実際に記事上に表示させるとどのように表示されるのか、このサイト上での表示例を下に示します。
記事トップ
記事のタイトルの下、目次の上に表示されます。
また目次の表示位置の設定により、少し見た目が変わる場合もあります。
記事本文下
本文の下、SNSフォローボタンの上に表示されます。
こちらも本文下周りの表示の設定によって多少シェアボタンの表示位置が人によってずれる場合があります。
SNSのフォローボタンの表示方法はこちらの記事もご覧ください↓
手順
それでは実際にWordPressの編集画面よりSNSのシェアボタンを設置するまでの流れを画面の画像とともに示します。
SNSシェアボタンにはページのトップと記事下の2箇所に設置することができますが、どちらが設定できれば、同じ容量でもう片方も設定できます。
トップシェアボタンより順に手順を示していきます。
トップシェアボタン
まず、WordPressの編集画面より左のメニューから「Cocoon設定」を選択します。
右側に表示されたタブから「SNSシェア」を選択します。
シェアボタンの表示
「SNSシェア」を選択すると下方にSNSシェアボタンの設定画面が出てきます。
まずSNSシェアボタンを表示するには、「トップシェアボタンの表示」にチェックを入れます。
そして、「表示切替」よりSNSごとに表示の設定ができますので、シェアして欲しいSNSにチェックを入れます。
表示できるシェアボタンは以下の７種類になります。
- はてなブックマーク
- LINE@
- Linkedln
次に「表示ページ」よりシェアボタンを表示するサイトページを設定します。
表示できるページは以下の5つになります。
- フロントページ
- 投稿
- 固定ページ
- カテゴリー
- タグ
私の場合は、投稿ページにのみ表示させています。
基本的にシェアしたい内容は記事の内容になると思いますので、最初のうちは投稿ページのみでも問題ないと思います。
ここまでの「」「」「」
ここまでの「トップシェアボタンの表示」「表示切替」「表示ページ」の3つの設定を完了し、設定画面上部または下部の「変更をまとめて保存」を選択すれば、基本的なボタンは設置完了です。
とても簡単です。
プレビュー通りのボタンが表示されているか、実際にサイトを見て確認してみてください。
ボトムシェアボタン
ボトムシェアボタンについてもトップシェアボタン同様に設定できます。
ただし１点だけトップシェアボタンの時と異なる設定ができますので、その１点を以下に示します。
シェアメッセージ
トップシェアボタンにはない設定になります。
シェアボタンの上に読者にシェアを促すメッセージを入力することができます。
私の場合はシンプルに「Share」と入力していますが、もっとエクスクラメーションマーク(!)などを入れて派手に宣伝することもできるでしょう。
さらに細かい設定
ここより下はさらに細かい設定について書いていきます。
もう少しシェアボタンの調整を行いたい場合は、是非ご覧ください。
ボタンカラー
「ボタンカラー」ではシェアボタンのデザイン要素に関わる色を設定することができます。
以下の３パターンよりボタンのカラーを設定することができます。
- モノクロ
- ブランドカラー
- ブランドカラー(白抜き)
モノクロ
黒色をベースにロゴを白で表現しています。
シンプルなデザインのサイトと合わせると良いでしょう。
目立ちにくくもあるので、周りのデザインにも気を配ると良いです。
ブランドカラー
SNSごとのブランドカラーをベースに白色でロゴを表現しています。
一番スタンダードな表示ではないでしょうか。
はじめのうちはこのデザインにしておけば見栄えも良くなります。
ブランドカラー(白抜き)
白色をベースにロゴをブランドカラーにすることで、少し落ち着いた色合いになっています。
上のブランドカラー表現よりも主張が控えめになっています。
私の場合は「ブランドカラー」に設定してありますが、サイト全体のデザインの遷移を見つつ、変更することも忘れないようにしていきたいです。
カラム数
ここでのカラム数とはSNSシェアボタンを表示する際の列の数のことです。
想像しにくいかと思いますので、下の表示例も合わせてご覧ください。
1〜６列の間で設定できます。
SNSシェアボタンの数によって調整します。
以下にSNSシェアボタンが4つの場合の「２列」と「４列」の表示例を示します。
２列表示
4つのボタンが２列で表示されています。
ボタンの数が2つ以上の場合は、縦にもスペースを使用します。
４列表示
4つのボタンを４列で表示するので、１行でボタンを表示することができます。
ボタンの数と設定した列数が同じ場合には1行で表示されます。
ロゴ・キャンプション配置
SNSボタン内のロゴとSNS名の表示位置を設定できます。
ここでのキャプションとはボタン内に表示されるSNSの名称のことです。
これも分かりにくいかと思いますので、下に示した表示例もご覧ください。
設定できるロゴ、キャプションの位置は以下の３種類になります。
- ロゴ・キャプション左右
- ロゴ・キャプション上下
- キャプション・ロゴ左右
ロゴ・キャプション左右
ロゴ、キャプションの順に左から右へ表示されます。
左右のスペースを使用しますので、ボタンの横幅が大きい場合に適しています。
ロゴ・キャプション上下
ロゴ、キャプションの順に上から下へ表示されます。
ボタンの幅が狭く、横にあまりスペースを使用したくない場合に適しています。
キャプション・ロゴ上下
キャプション、ロゴの順に上から下へ表示されます。
１つ上で示したもとは上下逆の配置になります。
ボタンの幅が狭く、横にあまりスペースを使用したくない場合に適しています。
シェア数の表示
これにチェックを入れることで、SNSによってはシェア数をボタンの右下に表示させることができます。
「シェア数の表示」にチェックを入れるとSNSによってはボタンの右下に数字が表示されるようになりました。
現時点では全てのSNSに対応しているようではなさそうです。
最後に
Cocoonで使用できる便利なのに隠れている機能はまだたくさんあると思いますので、役に立ちそうなものはできるだけ分かりやすく記事に書いていこうと思います。
