Cocoon SNS フォローボタンをカスタマイズ

ワードプレスのテーマ「Cocoon」のカスタマイズにどハマり中のタロです。

今回はCocoonのSNSフォローボタンをカスタマイズしてみました！！

CSSのコピペだけでOKです♩

完成イメージがこちら

上のようなフォローアイコンを作成します。

SNSフォローボタンのカスタマイズ手順

カスタマイズ手順は以下の通り。

SNSフォローボタンの設定

「SNSフォロー」で下記の設定をします。

設定が完了したら忘れずに保存をしましょう。

style.css にコードをコピペ

次に下記のコードを style.css にコピペします。

/* SNSフォローボタン
-------------------------------------------------- */
.article-footer .sns-follow .sns-follow-buttons {
  justify-content: center;
}

.article-footer .sns-follow .sns-follow-buttons a {
  width: 10%;
  border: unset;
  transition: 0.3s;
}

.article-footer .sns-follow .sns-follow-buttons a:hover {
  transform: translateY(-4px);
}

.article-footer .sns-follow .sns-follow-buttons a .button-caption {
  display: none;
}

.article-footer .button-caption .button-caption {
  display: none;
}

.article-footer .sns-share-buttons {
  padding-right: 15%;
  padding-left: 15%;
}

.article-footer .sns-share-buttons a {
  transition: 0.4s;
}

.article-footer .comment-btn {
  margin-top: 1em;
}

以上で実装完了です！

見出しのカスタマイズ

SNSフォローアイコン上の見出しのカスタマイズは下記の記事で紹介しています。

Cocoon SNS ボタン見出しをCSSでカスタマイズ

このブログはワードプレスのテーマ「Cocoon」を使っています。今回はCocoonのSNSボタンの見出しをカスタマイズしてみました！！CSSのコピペで実現できるのでぜひ真似してみてください♩完成イメージがこちらSHAREボタンの前後にちょっ...

tarovlog.com

2021.02.23

読むな危険！Cocoon カスタマイズを一挙公開中

このブログでも実装しているCocoonカスタマイズを大公開！！

デザインには正解がないためやればやるほど沼にハマってしまいます。

ですので、Cocoon ユーザーは絶対に読まないでください。

【初心者でもできる！】Cocoonカスタマイズまとめ！コピペで簡単開発

たろ当ブログのカスタマイズを一挙大公開中！！このブログはわいひらさんという方が作られたCocoonというワードプレスのテーマを使ってサイトを作っています。もし同じCocoonを使っている方はこれから紹介する記事の通りにカスタマイズすることで...

tarovlog.com

2021.02.20