WordPressの無料テーマ「Cocoon」のSNSシェアボタンのカスタマイズ方法について解説していきます。
完成イメージ
サイトの雰囲気に合わせてパステルカラーに変更しました。
ブランドカラーバージョン、白抜きバージョンの両方に対応しているので、どちらを選んでもかわいくお使いいただけます。
CocoonのSNSシェアボタンカスタマイズの手順
手順
- カスタマイズ用CSSコードをカスタマイザーの「追加CSS」にコピペして保存
- ページを更新して完成！
たったのこれだけで完成します。
すぐにできるのでぜひ、手軽に試してみてください。
「追加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限定なので、その他のテーマを使っている方は以下の記事を参考にしてください。
