Cocoon設定の俺用メモ|SNS設定のハウツー

Cocoon カスタマイズ

WordPressでブログを始めるときに選んだテーマが「Cocoon」

理由は無料だったから!

同じ理由で Cocoon を使っている WordPress 初級者も多いのではないでしょうか?
無料とは思えない高機能が標準装備されているのテーマですが初級者がまずブチ当たるのが Cocoon設定のタブの多さ

Cocoon設定 SEO

そのままでもいい感じになるけど設定を変えるだけで簡単にカスタマイズできるのが Cocoon のやさしいところ。

Cocoon設定にはアクセス向上・収益化に影響がある設定もあります。
当ブログの Cocoon 設定とあなたの Cocoon 設定と比較してよさそうならマネしてください。

Cocoon設定 SNS シェア・フォローボタン設定

ブログとSNSをリンクさせるためのシェアとフォローのボタン。
設定しておくとフォロワーが増えたり、ブログ記事がシェアされます。

シェア・フォローボタンを表示しておくと実際に効果はあるのか!?

SNS シェアボタン

トップシェアボタン、ボトムシェアボタンの表示は全オフです。
ブログをはじめたときは SNS ボタンを並べまくってました…。が、やめた。

理由は それいる?と思ったから。

毎日、1000PVを超えるアクセスがあってもSNSでシェアされる記事はありません。つまりこれはいらん

SNS フォローボタン

フォローボタンも新規ユーザがアクセスして 0.1%(1人)でもフォロワーが増え続けていくなら意味がありますがゼンゼン増えない

これもいらんかな…。

と思ったけど投稿ページの最下部に「飾り」でシンプルにしたフォローボタンだけをおいてます。

まとめ

ブログを読んだときにスムーズに感じるのが記事下のフォローボタンだけ。
ニュース記事ならいいかもだけどブログ記事にシェアボタンは不要と感じる。

  • 記事を読む前のシェアボタンは邪魔
  • 中の人が気になったらフォローボタンでSNSを見る。
  • シェアしたい記事はボタンがなくてもシェアする

アイコンを丸くする方法

最後にフォローボタンを丸くするスタイルシートを紹介します。

デフォルトのフォローボタンは四角でデカい。
さっぱりとするために頻度の高いSNSだけアイコンを丸くしています。

Cocoon の追加 CSSに以下のコードを貼り付けてると丸くなります。

/*---SNSボタンを丸くする---*/
#main .button-caption {
display: none;
}

/*SNSフォローボタン*/
.sns-follow-message{
font-weight: bold; /*太字*/
/* color: #202020; /*文字色*/
}
.sns-follow-buttons {
justify-content: center;
}
.sns-follow-buttons a {
border-radius: 50%;
font-size: 20px;
margin: 0 10px;
}
#main .sns-follow a {
width: 40px;
height: 40px;
*}

関連記事 Cocoon設定の俺用メモ