【WordPress】SNSシェア&フォローボタンを丸型へ簡単に変更

こんにちは、ナカムです。

本日はSNSボタン、デザイン変更について解説します。

WordPressのCSSを変更すると、誰でも簡単にデザインの変更ができます。

アイコンに少し影を持してオシャレな感じです。

 

WordPress変更前デザイン

こちらが変更前のデザインです。

WordPressのベースデザインは、押し出し感があります。

このようなデザインでは、シェアなどを進んでする方は少ないでしょう。

もう少し、丸みを帯びたカワイイ感じにしたいです。

SNSボタンをアイコンのみへ変更

style.cssへコピー&ペースト。

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

 

SNSシェアボタン変更

style.cssへコピー&ペースト。

/************************************
** 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フォローボタン変更

style.cssへコピー&ペースト。

/************************************
** 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シェアボタン&フォローボタン変更まとめ

style.cssへコピー&ペースト。

 

/************************************
** SNSシェアボタン&フォローボタン変更
************************************/
/*SNSボタンをアイコンのみへ変更*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*シェア&フォローの文字色変更*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #a52a2a; /*文字色*/
}

/*ボタンを一列へ変更*/
.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: #a52a2a; /*文字色*/
}

/*ボタンを一列へ変更*/
.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); /*影*/
	}

 

丸型ボタン影つき

style.cssへコピー&ペースト。

/*丸型ボタン影つき変更*/
.sns-share-buttons a {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
	}

 

丸型ボタン横幅&高さ変更

style.cssへコピー&ペースト。

/*丸型ボタン横幅&高さ変更*/
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

 

ボタンを丸く変更

style.cssへコピー&ペースト。

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

 

ボタンを一列へ変更

style.cssへコピー&ペースト。

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

 

シェア&フォローの文字色変更

style.cssへコピー&ペースト。

 

/*シェア&フォローの文字色変更*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #a52a2a; /*文字色*/
}