今回は「SNSボタン」について、Word Press【Cocoon】で説明していきます
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-24_00h18_46-1-1024x148.png)
ホームページやブログにこういうボタンがあるのよく見かけますよね
このボタンは読者さんに、自分のサイトをシェア・フォローしてもらうためのボタンです
「SNSボタン」には、「シェアボタン」と「フォローボタン」の2種類あります
まずは「シェアボタン」の設定方法を解説していきますね
SNSシェアボタンの設置方法
SNSシェアボタンは、自分のサイトを読者さんに、SNS上拡散してもらうために設置します。
SNSシェアボタンには、トップシェアボタン(本文の上に表示)とボトムシェアボタン(本文の下に表示)の2種類があります。
両方に表示させたい場合は、それぞれ設定が必要です。
まずは、トップシェアボタンから解説していきますね(^^)
トップシェアボタンの設定
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-14_01h00_12-1024x256.png)
①Word Pressダッシュボードから「Cocoon設定」・「SNSシェア」をクリック
トップシェアボタンの設定項目の画面になります。
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-14_18h52_46-1024x511.png)
②トップシェアボタンの表示:メインカラムトップカラムシェアボタンを表示にチェックを入れる
(本文の上にシェアボタンを表示)
③表示切替:表示させたいSNSにチェックを入れる
④表示ページ:シェアボタンを表示させたいページにチェックを入れる
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-23_23h58_28-1024x329.png)
⑤ボタンカラー:モノクロ・ブランドカラー・ブランドカラー(白抜き)の中から、好きなものを選ぶ
モノクロ
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-14_18h32_37-1024x88.png)
ブランドカラー
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-14_18h23_52-1024x82.png)
ブランドカラー(白抜き)
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-14_18h24_36-1024x84.png)
⑥カラム数:1~6列選べます
1列
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-15_01h05_41-1024x352.png)
3列
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-15_01h06_22-1024x139.png)
6列
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-15_01h08_08-1024x97.png)
⑦ロゴキャプションの配置:ロゴ・キャプション左右、ロゴ・キャプション上下、キャプションロゴ上下の3種類から選ぶ
ロゴ・キャプション左右
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-24_00h18_46-1024x148.png)
ロゴ・キャプション上下
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-24_00h20_46-1024x138.png)
キャプション・ロゴ上下
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-24_00h22_42-1024x136.png)
⑧シェア数を表示:シェア数を表示する場合は、「シェア数を表示」にチェック
⑨ボトムシェアボタンの設定をしない場合は、下にスクロールして「変更をまとめて保存」をクリック
(保存後、上にスクロールしていくと、シェアボタンのプレビューが見れるよ)
次に、ボトムシェアボタンの設定を解説しますね(^^)
ボトムシェアボタンの設定
①Worldpressダッシュボードから「Cocoon設定」・「SNSシェアボタン」をクリック
(トップシェアボタンの設定を行った場合は、①をすっ飛ばして続けて操作してね)
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-17_02h03_01-1024x338.png)
②ボトムシェアボタンの表示:メインカラムボトムシェアボタンを表示にチェックを入れる
③シェアメッセージ:空欄にコメントをいれる
メッセージを入れない場合は、空欄のままでOK
以降の操作は、トップシェアボタンの設定と同じです。
トップシェアボタンの設定③に戻る場合は、ここをクリック➡設定③に戻る
SNSフォローボタン設置方法
SNSフォローボタンは、自分のサイトを読者さんにフォローしてもらうために設置していきます。
SNSフォローボタンは、SNSシェアボタンと違って本文の上には設置できず、本文の下のみの設置となります。
では、SNSフォローボタンの設定について説明していきますね(^^)
SNSフォローボタンの設定
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-18_01h22_43-1024x221.png)
①Word pressダッシュボードから、「Cocoon設定」・「SNSフォローボタン」をクリック
フォローボタン設定項目の画面になります。
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-19_00h43_57-1-1024x337.png)
②フォローボタンの表示:本文下のフォローボタンを表示するにチェックを入れる
③フォローメッセージ:枠内にメッセージを入力します。
投稿者名・メッセージは、入れても入れなくても大丈夫です。
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-19_00h56_49-1024x428.png)
④SNSサービスのURL:青文字の(あなたのプロフィール)というところをクリック
プロフィール画面になります。
下にスクロールしていくと、各SNSのURLを入力する欄があるので入力してい きます。
ここでURLを入力したSNSのフォローボタンが表示されます。
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-19_01h38_14-1024x399.png)
⑤表示ページ:フォローボタンを表示させたいページにチェックを入れる
⑥feedlyの表示:feedlyボタンを表示させる場合はチェックを入れる(右側がfeedlyボタン)
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-25_00h55_53-1024x104.png)
⑦RSSの表示:RSS購読ボタンを表示させる場合はチェックを入れる(右側がRSS購読ボタン)
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-25_00h59_35-1024x89.png)
⑧ボタンカラー:モノクロ・ブランドカラー・ブランドカラー(白抜き)の中から好きなのを選ぶ
(トップシェアボタンと同じ。確認したい方はこちら)
⑨デフォルトユーザー:複数人でブログ運営していて、カテゴリー・タグページにSNSボタンを設置した場合、フォローボタンに誰のSNSを設定するかを選択する
![](https://naolog703.com/wp-content/uploads/2023/10/2023-10-20_01h15_14-1024x255.png)
個人ブログの運営をしていたり、カテゴリーページ・タグページにフォローボタンを設置しない場合は、特に気にしなくても大丈夫です。
⑩フォロー数の表示:SNSボタンにフォロー数を表示させたい場合は、チェックを入れる
⑪feedly購読者数:feedly購読者数が正確に表示されない場合、ここで数字を入力する。
⑫「変更をまとめて保存」をクリック
まとめ
今回はSNSボタンの設置方法について解説しました。
SNSボタンは簡単に設置出来て、拡散力もありますが、多すぎるとコンテンツの妨げになってしまうこともあるので、サイトに合わせて多くなり過ぎないようにしましょう。
コメント