Cocoon〜SNSフォローボタン表示方法〜

はじめに

CocoonにおいてSNSボタンを表示させる方法を備忘録としてメモしておきます。

サイトやブログを運営する際にSNSと連携させている方も多数いらっしゃると思います。

私もブログ上に自身のSNSを良い具合に表示しようとしたのですが、Cocoonの便利な機能を知らずにHTMLコードなどの難しい方法しか試していませんでした。

そのような難しいコードいらずの設定ですので是非ご覧いただければと思います。

手順

以下に簡単に画像とともに、手順を簡単に示します。

なお、WordPressの画面は2022年1月15日現在のものになります。

時間が経過するとアップデートが入り多少画面と異なる場合がありますのでご了承いただきたいと思います。

表示例

以下が実際の私のサイト上でのフォローボタンの表示例になります。

本文下、あるいは関連記事の上部にフォローボタンが表示されています。

SNSのフォローボタンによる色が入るだけで、殺風景だった本文の下のエリアが少し華やかになった気がします。

色の効果は侮れません。

私の利用しているSNSは現時点では「Twitter」、「Instagram」のみですが増やすことができます。

他のSNSを載せたい方も是非試してみてください。

SNSのURL入力

では本題に入ります。

最低限ボタン表示に求められる設定の方法を選んで手順を示していきます。

初めてでも5〜10分あればボタンを設置することができます。

まず、WordPressの編集画面に入ります。

左のメニューより「ユーザー」→「プロフィール」を選択します。

すると以下のようなサイトのURLの入力欄が現れます。

入力できるURLは以下のサービスになります。

※赤字はボタン表示の設定なし

有名なものから私が知らないものまで多数のSNSに対応していることがわかります。

以降もSNSの変化によって利用できるSNSの数が増えるでしょう。

ボタン表示設定

SNSのURLを入力したらフォローボタンを表示するための設定をします。

WordPressの編集画面から左のメニューより「Cocoon設定」→「SNSフォロー」を選択します。

すると以下のようなフォローボタンに関する設定画面が現れます。

まずフォローボタンを表示させたいなら、「フォローボタンの表示」の右の「本文下のフォローボタンを表示する」にチェックを入れます。

「フォローメッセージ」の入力欄に文字を入れるとフォローボタンの上にメッセージを表示させることができます。

私の場合は英語で「Follow me」と設定しています。

日本語なら「SNSをフォロー」などと入れておくと誘導しやすいでしょう。

「表示ページ」ではフォローボタンを表示するページを切り替えることができます。

表示させたいページにチェックを入れます。

表示できるページは以下の5つとなっています。

私の場合はプライバシーポリシーが置かれている固定ページにはフォローボタンを表示させたくないので、固定ページ以外にチェックを入れています。

最後の「ボタンカラー」については下の章で詳しく示します。

ボタンのデザイン

「ボタンカラー」で切り替えができるフォローボタンの種類は以下の3種類となっています。

SNSのボタンひとつもサイトを構成する一部分であることは違いないので、サイトのメインカラーや色使いを見ながら見た目が良いものを選ぶようにしましょう。

モノクロ

黒色をベースにアイコンを白で表現したものになります。

シンプルなデザインですので目立ちにくい反面、モノクロ調や淡色系の色と合わせるときにうるさくなりすぎないです。

フォローボタン上のメッセージや周りの装飾で目立ちにくさをカバーすることもできます。

ブランドカラー

SNSを表す色を中心にデザインされたものです。

画面上の彩りが豊かになるので私はこれを使用しています。

逆に色を抑えたい場合は「モノクロ」や下で紹介している「ブランドカラー(白抜き)」を使用すると良いでしょう。

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

白を基調とし、アイコンにブランドカラーを使用しています。

ブランドカラーと色使いが反転したようなデザインになります。

少し色を抑えたい場合に使用すると良いでしょう。

ボタン周りの色が暗ければ一層ボタンが引き立つように見えます。

最後に

ここで示したブログを少しでも良く見せる方法は、ほんの一部にしか過ぎません。

私自身も試していないものがたくさんありますので、特に共有したいもの、役に立つものは少しでも記事にしていけたらと思います。

Twitterでは記事の更新の通知、Instagramでは主に植物や栽培関係の写真をアップしています。

興味あればフォローよの方よろしくお願いいたします。