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

CSS

CSS

nakamuです。

nakamu
nakamu

SNSボタン、デザイン変更についての記事です。


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

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




WordPress変更前デザイン

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

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

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

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


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

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

ポイント

SNSのシェアボタンとフォローボタン共通動作コード

/*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-share-message」「.sns-follow-message」

文字箇所が違うだけです。


/************************************
** 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へコピー&ペースト。


ポイント

HTML、CSSカラーコード(#a52a2a)を変えます

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