WordPress『ストーク』でSNSシェアボタンのデザインをカスタマイズ

本記事は「ストーク」「ハミングバード」のワードプレステーマ向けの内容です。

以前、このブログでは「ハミングバード」を使用していましたが、2018年4月にJIN（WordPressテーマをJIN（ジン）に変更！デザインのカスタマイズ性が◎）にテーマを変更しました。

▼記事タイトル下

▼記事下

.sns li a {
font-size:80%;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius: 2px;
text-align:center;
text-decoration: none;
text-shadow:none;
}
.sns li a:hover {
-webkit-transform: none;
-moz-transform: none;
transform: none;
box-shadow:none;
}

.sns li a .text{
font-weight:none;
}

/* ツイッター */
.sns .twitter a {
color: #22b8ff !important;
border: solid 1px #22b8ff !important;
background: #fff !important;
box-shadow:none;
}
.sns .twitter a:hover {
color: #fff !important;
border: solid 1px #22b8ff !important;
background: #22b8ff !important;
}

/* Facebook */
.sns .facebook a {
color: #6680d8 !important;
border: solid 1px #6680d8 !important;
background: #fff !important;
box-shadow:none;
}
.sns .facebook a:hover {
color: #fff !important;
border: solid 1px #6680d8 !important;
background: #6680d8 !important;
}

/* グーグル */
.sns .googleplus a {
color: #db4a39 !important;
border: solid 1px #db4a39 !important;
background: #fff !important;
box-shadow:none;
}
.sns .googleplus a:hover {
color: #fff !important;
border: solid 1px #db4a39 !important;
background: #db4a39 !important;
}

/* はてぶ */
.sns .hatebu a {
color: #5d8ac1 !important;
border: solid 1px #5d8ac1 !important;
background: #fff !important;
box-shadow:none;
}
.sns .hatebu a:hover {
color: #fff !important;
border: solid 1px #5d8ac1 !important;
background: #5d8ac1 !important;
}

/* Pocket */
.sns .pocket a {
color: #ff6d82 !important;
border: solid 1px #ff6d82 !important;
background: #fff !important;
box-shadow:none;
}
.sns .pocket a:hover {
color: #fff !important;
border: solid 1px #ff6d82 !important;
background: #ff6d82 !important;
}

/* Feedly */
.sns .feedly a {
color: #6cc655 !important;
border: solid 1px #6cc655 !important;
background: #fff !important;
box-shadow:none;
}
.sns .feedly a:hover {
color: #fff !important;
border: solid 1px #6cc655 !important;
background: #6cc655 !important;
}