SNSボタンを丸くする方法備忘

どんどん丸くなる男、たたりんです。

ブログを立ち上げた時にSNSのボタンを丸くする設定を備忘として残しておこうと思います。

わたしはCSSが読めないのでどこをどうすれば良いのか説明はできませんが、

似たようなことをしたい人の参考になれば幸いです。

CSSに追記した内容

/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*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 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*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フォローボタン*/
.sidebar .sns-follow-buttons {
    justify-content: center; /*ボタンを中央寄せにする*/
}
.sidebar .sns-follow {
    margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
    border-radius: 50%;
    width: 40px; /*ボタンの横の大きさ*/
    height: 40px; /*ボタンの縦の大きさ*/
    font-size: 20px; /*アイコンのサイズ*/
    margin: 0 6px; /*ボタン同士の間隔*/
}
.sidebar .instagram-button {
    background-color: #c522b8 !important;
}

ここに記載されているCSSを追記すれば、トップやサイドメニューにあるボタンのように配置されます。

以上、βуё (o’ω’o)ﾉｼ βуё