【Cocoon】誰でも簡単にSNSアイコンを丸くする方法【カスタマイズ】

ゾムビット

ドーモ、僕(@zomubbit)です。ぞむぅ。

前回の記事はここからどうぞ☆

【Cocoon】誰でも簡単にTwitterのシェア数を表示させる方法【カスタマイズ】

Twitter社の仕様により表示されなくなってしまったTwitterのSNSシェア数の表示方法を解説しています。

ゾムビットのブログのSNSシェア、フォローアイコンはこんな風に丸形になっています。

これはCSSを編集しているからで、何も編集しないとこんな感じです。

今回は四角いアイコンを丸形に変更する方法を解説していきます。秒で終わります。

Contents

最初に
SNSボタンをアイコンのみにする
文字の装飾
ボタンを一列にする
ボタンを丸くする
ボタンの形を整える
ボタンに影をつける
SNSシェアボタンまとめ
SNSフォローボタンまとめ
まとめ

Sponsored Links

最初に

①Cocoon設定

WordPressの編集画面から『Cocoon設定→SNSシェア』に行きます。

カラム数⇒表示切替のチェック数と同じ（今回の場合は6列）
ロゴ・キャプション配置⇒ロゴ・キャプション左右

上記2点を設定後、変更をまとめて保存してください。

②バックアップを取る

style.cssを編集するので、作業前に必ずバックアップを取ってください。

バックアップの取り方はこちらからどうぞ

【Cocoon】SNSフォローボタンにpixivを追加する方法【カスタマイズ】

ブログ上に表示したいのに選択項目がないSNSアカウントの追加方法を解説しています。

③style.cssの場所

WordPressの編集画面から『外観→テーマエディター→style.css』。

『編集するテーマを選択』はCocoon childを選択してください。

ソースコードを貼り付けたら、「ファイルを更新」を押してください。

※貼り付ける場所は列の一番下です。

SNSボタンをアイコンのみにする

以下のコードをstyle.cssに貼り付けてください。

/*SNSボタンをアイコンのみにする*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

SNSシェアボタン、フォローボタン共通で作用するコード。

文字の装飾

以下のコードをstyle.cssに貼り付けてください。

/*文字の装飾*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}

#875d5bの『875d5b』を変えたら色が変わります。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

Sponsored Links

ボタンを一列にする

以下のコードをstyle.cssに貼り付けてください。

/*ボタンを一列にする*/
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}

ボタンを丸くする

以下のコードをstyle.cssに貼り付けてください。

/*ボタンを丸くする*/
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 8px; /*ボタン同士の間隔*/
}

ボタンの形を整える

以下のコードをstyle.cssに貼り付けてください。

/*ボタンの形を整える*/
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

ボタンに影をつける

以下のコードをstyle.cssに貼り付けてください。

/*ボタンに影をつける*/
.sns-share-buttons a {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
	}

Sponsored Links

SNSシェアボタンまとめ

/*文字の装飾*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}

/*ボタンを一列にする*/
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}

/*ボタンを丸くする*/
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 8px; /*ボタン同士の間隔*/
}

/*ボタンの形を整える*/
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*ボタンに影をつける*/
.sns-share-buttons a {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
	}

SNSフォローボタンまとめ

/*文字の装飾*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}

/*ボタンを一列にする*/
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}

/*ボタンを丸くする*/
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}

/*ボタンの形を整える*/
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*ボタンに影をつける*/
.sns-follow-buttons a {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
	}

シェアボタンとフォローボタンのコードは、

『.sns-share-buttons {』『.sns-follow-buttons a {』

赤字の箇所が違うだけであとは同じ。

参考にさせていただきました