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

Cocoon

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

【Luxeritasルクセリタス】SNSシェアボタンのカスタマイズ(コピペOK)

完成イメージ

CocoonSNSボタンカスタマイズ
完成イメージ

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

Luxeritasの時はホワイトのみの対応でしたが、今回はホワイトバージョン、カラーバージョンの両方に対応しています。

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

手順

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

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

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

「追加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,
.bc-brand-color.sns-share .twitter-button, .bc-brand-color.sns-follow .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,
.bc-brand-color.sns-share .facebook-button, .bc-brand-color.sns-follow .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,
.bc-brand-color.sns-share .linkedin-button, .bc-brand-color.sns-follow .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{
	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,
.bc-brand-color.sns-share .hatebu-button, .bc-brand-color.sns-follow .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,
.bc-brand-color.sns-share .pocket-button, .bc-brand-color.sns-follow .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,
.bc-brand-color.sns-share .line-button, .bc-brand-color.sns-follow .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,
.bc-brand-color.sns-share .rss-button, .bc-brand-color.sns-follow .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,
.bc-brand-color.sns-share .feedly-button, .bc-brand-color.sns-follow .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 */
.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,
.bc-brand-color.sns-share .youtube-button, .bc-brand-color.sns-follow .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{
	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 {
	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; /* 文字色 */
}
.bc-brand-color-white.sns-share .rakuten-room-button:hover, .bc-brand-color-white.sns-follow .rakuten-room-button:hover,
.bc-brand-color.sns-share .rakuten-room-button, .bc-brand-color.sns-follow .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,
.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{
	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,
.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{
	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{
    background-color: #405de6;
}
/* SoundCloud */
.bc-brand-color-white.sns-share .soundcloud-button:hover, .bc-brand-color-white.sns-follow .soundcloud-button:hover{
    background-color: #ff8800;
}

/* SNSシェアメッセージ下のボーダー色 */
.sns-share-message, .sns-follow-message{
	display: inline-block;
	border-bottom: 4px solid #fbe3f9;
	margin-bottom: 1rem;
}

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

このシンタックスハイライター(ブログ記事内にコードを綺麗に表示させるやつ)はCocoon設定の「コード」から、「ソースコードをハイライト表示」にチェックを入れると表示させられるようになります。

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

Cocoonシンタックスハイライター設定
Cocoonシンタックスハイライター設定

そのままでも十分おしゃれなのですが、枠線をつけてよりかわいい感じにしました。

以下のコードを「追加CSS」に追記すれば、このサイトのように枠線をつけることができます。

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

ちなみにこの方法はCocoon限定なので、Cocoon以外を使っている方は以下の記事を参考にしてください。

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

コメント

タイトルとURLをコピーしました