【Cocoon】SNSシェアボタンのカスタマイズ（コピペOK）

WordPressの無料テーマ「Cocoon」のSNSシェアボタンのカスタマイズ方法について解説していきます。

完成イメージ

サイトの雰囲気に合わせてパステルカラーに変更しました。

ブランドカラーバージョン、白抜きバージョンの両方に対応しているので、どちらを選んでもかわいくお使いいただけます。

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

手順

1. カスタマイズ用CSSコードをカスタマイザーの「追加CSS」にコピペして保存
2. ページを更新して完成！

たったのこれだけで完成します。

すぐにできるのでぜひ、手軽に試してみてください。

「追加CSS」の場所

「追加CSS」は管理画面→「外観」→「カスタマイズ」を開いた1番下にあります。

これをクリックすると、CSSを書き込める画面が出てきます。

カスタマイズ用CSSコード

以下のCSSを「追加CSS」にコピペします。

あとは「Cocoon 設定」から「ブランドカラー」「ブランドカラー(白抜き)」どちらを選んでも、それぞれに対応したパステルカラーのデザインになります。

白抜きの方はハバーエフェクトも変えているのでぜひ試してみてください。

/* SNS */
 /* ホワイト全体 */
.bc-brand-color-white.sns-share a:hover, .bc-brand-color-white.sns-follow a:hover {
  opacity: 1;
	color: #fff;
	transition: all .3s ease-in-out;
}

/* Twitter */
.bc-brand-color-white.sns-share .twitter-button, .bc-brand-color-white.sns-follow .twitter-button {
	border: 1px solid #7fbfff; /* 枠線色 */
	color: #7fbfff; /* 文字色 */
}
.bc-brand-color-white.sns-share .twitter-button:hover, .bc-brand-color-white.sns-follow .twitter-button:hover,
/* color */
.bc-brand-color.sns-share .twitter-button, .bc-brand-color.sns-follow .twitter-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.twitter-button {
    background-color: #7fbfff;
}
/* Facebook */
.bc-brand-color-white.sns-share .facebook-button, .bc-brand-color-white.sns-follow .facebook-button {
	border: 1px solid #3b97f3; /* 枠線色 */
	color: #3b97f3; /* 文字色 */
}
.bc-brand-color-white.sns-share .facebook-button:hover, .bc-brand-color-white.sns-follow .facebook-button:hover,
/* color */
.bc-brand-color.sns-share .facebook-button, .bc-brand-color.sns-follow .facebook-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.facebook-button {
	background-color: #3b97f3;
}

/* LinkedIn */
.bc-brand-color-white.sns-share .linkedin-button, .bc-brand-color-white.sns-follow .linkedin-button {
        border: 1px solid #57abd6; /* 枠線色 */
	color: #57abd6; /* 文字色 */
}
.bc-brand-color-white.sns-share .linkedin-button:hover, .bc-brand-color-white.sns-follow .linkedin-button:hover,
/* color */
.bc-brand-color.sns-share .linkedin-button, .bc-brand-color.sns-follow .linkedin-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.linkedin-button {
    background-color: #57abd6;
}
/* Pinterest */
.bc-brand-color-white.sns-share .pinterest-button, .bc-brand-color-white.sns-follow .pinterest-button {
	border: 1px solid #ea4c89; /* 枠線色 */
	color: #ea4c89; /* 文字色 */
}
.bc-brand-color-white.sns-share .pinterest-button:hover, .bc-brand-color-white.sns-follow .pinterest-button:hover,
.bc-brand-color.sns-share .pinterest-button, .bc-brand-color.sns-follow .pinterest-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.pinterest-button {
	background-color: #fb82b1;
	border-color: #fb82b1;
}

/* はてブ */
.bc-brand-color-white.sns-share .hatebu-button, .bc-brand-color-white.sns-follow .hatebu-button {
	border: 1px solid #488ce4; /* 枠線色 */
	color: #488ce4; /* 文字色 */
}
.bc-brand-color-white.sns-share .hatebu-button:hover, .bc-brand-color-white.sns-follow .hatebu-button:hover,
/* color */
.bc-brand-color.sns-share .hatebu-button, .bc-brand-color.sns-follow .hatebu-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.hatebu-button{
	background-color: #488ce4;
	color: #fff;
}

/* Pocket */
.bc-brand-color-white.sns-share .pocket-button, .bc-brand-color-white.sns-follow .pocket-button {
	border: 1px solid #f58694; /* 枠線色 */
	color: #f58694; /* 文字色 */
}
.bc-brand-color-white.sns-share .pocket-button:hover, .bc-brand-color-white.sns-follow .pocket-button:hover,
/* color */
.bc-brand-color.sns-share .pocket-button, .bc-brand-color.sns-follow .pocket-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.pocket-button{
	background-color: #f58694;
	color: #fff;
}

/* LINE */
.bc-brand-color-white.sns-share .line-button, .bc-brand-color-white.sns-follow .line-button {
	border: 1px solid #41c9b4; /* 枠線色 */
	color: #03c8a8; /* 文字色 */
}
.bc-brand-color-white.sns-share .line-button:hover, .bc-brand-color-white.sns-follow .line-button:hover,
/* color */
.bc-brand-color.sns-share .line-button, .bc-brand-color.sns-follow .line-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.line-button{
	background-color: #41c9b4;
	color: #fff;
}
/* コピーボタン */
.bc-brand-color-white.sns-share a, .bc-brand-color-white.sns-follow a {
	border: 1px solid #f7d0f5; /* 枠線色 */
	color: #fb217580; /* 文字色 */
}
.bc-brand-color-white.sns-share a:hover, .bc-brand-color-white.sns-follow a:hover, .sns-buttons a{
	background-color: #fb217580;
}

/* RSS */
.bc-brand-color-white.sns-share .rss-button, .bc-brand-color-white.sns-follow .rss-button{
    border: 1px solid #ffbf7f; /* 枠線色 */
	color: #ff8204; /* 文字色 */
}
.bc-brand-color-white.sns-share .rss-button:hover, .bc-brand-color-white.sns-follow .rss-button:hover,
/* color */
.bc-brand-color.sns-share .rss-button, .bc-brand-color.sns-follow .rss-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.rss-button{
    background-color: #ffbf7f;
    color: #fff;
}
/* feedly */
.bc-brand-color-white.sns-share .feedly-button, .bc-brand-color-white.sns-follow .feedly-button {
	border: 1px solid #96e4df; /* 枠線色 */
	color: #62dad2; /* 文字色 */
}
.bc-brand-color-white.sns-share .feedly-button:hover, .bc-brand-color-white.sns-follow .feedly-button:hover,
/* color */
.bc-brand-color.sns-share .feedly-button, .bc-brand-color.sns-follow .feedly-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.feedly-button{
	background-color: #96e4df;
	color: #fff;
}
/* ブログ */
.bc-brand-color-white.sns-share .website-button, .bc-brand-color-white.sns-follow .website-button{
	border: 1px solid #f47fd7; /* 枠線色 */
	color: #f47fd7; /* 文字色 */
}
.bc-brand-color-white.sns-share .website-button:hover, .bc-brand-color-white.sns-follow .website-button:hover,
.bc-brand-color.sns-share .website-button, .bc-brand-color.sns-follow .website-button{
	background-color: #f47fd7
}
/* YouTube */.author-box .sns-follow-buttons a.follow-button
.bc-brand-color-white.sns-share .youtube-button, .bc-brand-color-white.sns-follow .youtube-button {
    color: #ea4c89;
    border-color: #ea4c89;
}
.bc-brand-color-white.sns-share .youtube-button:hover, .bc-brand-color-white.sns-follow .youtube-button:hover,
/* color */
.bc-brand-color.sns-share .youtube-button, .bc-brand-color.sns-follow .youtube-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.youtube-button{
    background-color: #ea4c89;
}
/* Github */
.bc-brand-color-white.sns-share .github-button, .bc-brand-color-white.sns-follow .github-button{
	border: 1px solid #4078c0; /* 枠線色 */
	color: #4078c0; /* 文字色 */
}
.bc-brand-color-white.sns-share .github-button:hover, .bc-brand-color-white.sns-follow .github-button:hover,
/* profile */
.author-box .sns-follow-buttons a.follow-button.github-button{
	background-color: #4078c0; /* 枠線色 */
	color: #fff; /* 文字色 */
}
/* Amazon */
.bc-brand-color-white.sns-share .amazon-button, .bc-brand-color-white.sns-follow .amazon-button{
border: 1px solid #ffbf7f; /* 枠線色 */
	color: #ff8204; /* 文字色 */
}
.bc-brand-color-white.sns-share .amazon-button:hover, .bc-brand-color-white.sns-follow .amazon-button:hover,
/* profile */
.author-box .sns-follow-buttons a.follow-button.amazon-button{
	background-color: #ffbf7f;
    color: #fff;
}
/* Rakuten */
.bc-brand-color-white.sns-share .rakuten-room-button, .bc-brand-color-white.sns-follow .rakuten-room-button{
	border: 1px solid #ea4c89; /* 枠線色 */
	color: #ea4c89; /* 文字色 */
}
/* hover */
.bc-brand-color-white.sns-share .rakuten-room-button:hover, .bc-brand-color-white.sns-follow .rakuten-room-button:hover,
/* color */
.bc-brand-color.sns-share .rakuten-room-button, .bc-brand-color.sns-follow .rakuten-room-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.rakuten-room-button{
	background-color: #ea4c89; /* 枠線色 */
	color: #fff; /* 文字色 */
}
/* CodePen, Instagram */
.bc-brand-color-white.sns-share .codepen-button, .bc-brand-color-white.sns-follow .codepen-button,
.bc-brand-color-white.sns-share .instagram-button, .bc-brand-color-white.sns-follow .instagram-button{
	border: 1px solid #ba91e2; /* 枠線色 */
	color: #ba91e2; /* 文字色 */
}
.bc-brand-color-white.sns-share .codepen-button:hover, .bc-brand-color-white.sns-follow .codepen-button:hover,
.bc-brand-color-white.sns-share .instagram-button:hover, .bc-brand-color-white.sns-follow .instagram-button:hover,
/* color */
.bc-brand-color.sns-share .codepen-button, .bc-brand-color.sns-follow .codepen-button, .bc-brand-color.sns-share .instagram-button, .bc-brand-color.sns-follow .instagram-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.codepen-button, .author-box .sns-follow-buttons a.follow-button.instagram-button{
	background-color: #ba91e2; /* 枠線色 */
	color: #fff; /* 文字色 */
}
/* note,slack */
.bc-brand-color-white.sns-share .slack-button, .bc-brand-color-white.sns-follow .slack-button,
.bc-brand-color-white.sns-share .note-button, .bc-brand-color-white.sns-follow .note-button {
	border: 1px solid #96e4df; /* 枠線色 */
	color: #62dad2; /* 文字色 */
}
.bc-brand-color-white.sns-share .slack-button:hover, .bc-brand-color-white.sns-follow .slack-button:hover,
/* color */
.bc-brand-color-white.sns-share .note-button:hover, .bc-brand-color-white.sns-follow .note-button:hover,
.bc-brand-color.sns-share .slack-button, .bc-brand-color.sns-follow .slack-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.note-button,
.author-box .sns-follow-buttons a.follow-button.slack-button{
	background-color: #96e4df;
	color: #fff;
}
/* flicker */
.bc-brand-color-white.sns-share .flickr-button, .bc-brand-color-white.sns-follow .flickr-button {
    color: #405de6;
    border-color: #405de6;
}
.bc-brand-color-white.sns-share .flickr-button:hover, .bc-brand-color-white.sns-follow .flickr-button:hover,
.bc-brand-color.sns-share .flickr-button, .bc-brand-color.sns-follow .flickr-button,
/* profile */
.author-box .sns-follow-buttons a.follow-button.flickr-button{
    background-color: #405de6;
}
/* SoundCloud */
.bc-brand-color-white.sns-share .soundcloud-button:hover, .bc-brand-color-white.sns-follow .soundcloud-button:hover,
/* profile */
.author-box .sns-follow-buttons a.follow-button.soundcloud-button{
    background-color: #ff8800;
}
/* 記事下ウィジェット用 */
.author-box .sns-follow-buttons a.follow-button{
	color: #fff;
	border: none;
}
/* SNSシェアメッセージ下のボーダー色 */
.sns-share-message, .sns-follow-message{
	display: inline-block;
	border-bottom: 4px solid #fbe3f9;
	margin-bottom: 1rem;
}

/* Contact Form 7 */
/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #f58694; /* 背景色 */
	border-radius: 5px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #7fbfff; /* 背景色 */
	border-radius: 5px;
}

おまけ：このページで使用しているシンタックスハイライター(コードの表示)

このシンタックスハイライター（ブログ記事内にコードを綺麗に表示させるやつ）を表示させるには、管理画面→Cocoon設定→「コード」から、「ソースコードをハイライト表示」にチェックを入れます。

チェックを入れた後、そのまま画面を下にスクロールするとハイライトスタイル(シンタックスハイライターのデザイン)を選べます。このサイトでは「arduino-light」を選択しています。

シンタックスたいライターのデザインはそのままでも十分おしゃれなのですが、枠線をつけてよりかわいい感じにしました。

当スキン「アリス」ではデフォルトで枠線付きの使用にしていますが、他のスキンを使用中の方も以下のコードを「追加CSS」に追記することで、このサイトのような枠線をつけることができます。

/* シンタックスハイライター */
.hljs{
	padding: 1em;
    border-radius: 10px;
    border: 4px solid #c6eeee;
	 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18) inset;
}

ちなみにこの方法は、シンタックスハイライターがデフォルトで実装されているCocoon限定なので、その他のテーマを使っている方は以下の記事を参考にしてください。

【Prism.js使い方】WordPressプラグインなしシンタックスハイライターの使い方