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

このブログはワードプレスのテーマ「Cocoon」を使っています。

今回はCocoonのSNSボタンの見出しをカスタマイズしてみました！！

CSSのコピペで実現できるのでぜひ真似してみてください♩

完成イメージがこちら

SHAREボタンの前後にちょっとしたデザインを追加しています♩

SNSボタン見出しのカスタマイズ手順

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

SNSボタン表示の設定

ボトムシェアボタンで下記の設定をします。

シェアメッセージは任意の言葉でOKですよ。

変更したら忘れずに保存をします。

style.css にコードをコピペ

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

/* SNSシェア・フォローボタン
-------------------------------------------------- */
.article-footer .sns-share, .article-footer .sns-follow {
  text-align: center;
}

.article-footer .sns-share .sns-share-message, .article-footer .sns-share .sns-follow-message, .article-footer .sns-follow .sns-share-message, .article-footer .sns-follow .sns-follow-message {
  position: relative;
  color: #cccfd7;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  display: inline-block;
  padding: 0px 25px;
}

.article-footer .sns-share .sns-share-message:before, .article-footer .sns-share .sns-follow-message:before, .article-footer .sns-follow .sns-share-message:before, .article-footer .sns-follow .sns-follow-message:before {
  left: 0;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #d8dae1;
  content: "";
}

.article-footer .sns-share .sns-share-message:after, .article-footer .sns-share .sns-follow-message:after, .article-footer .sns-follow .sns-share-message:after, .article-footer .sns-follow .sns-follow-message:after {
  right: 0;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #d8dae1;
  content: "";
}

以上で作業はおしまいです。

反映がされているか確認してみてください。

SNSのシェアボタンのカスタマイズ

SNSのシェアボタンのカスタマイズは以下の記事で紹介しています↓

Cocoon おしゃれな SNS ボタンに！CSSコピペカスタマイズ

このブログはワードプレスのテーマ「Cocoon」を使っています。今回はCocoonのSNSボタンをカスタマイズしてみました！！管理画面で簡単な設定とCSSのコピペでこのブログと同じようなSNSのボタンを作成できます。完成イメージがこちらPC...

tarovlog.com

2021.02.23

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

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

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

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

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

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

tarovlog.com

2021.02.20