カスタマイズ

SNSボタンのカスタマイズ

SNS(パターン1)のカスタマイズ

影を消してフラット化

/*SNS Type1 - デザインカスタマイズ*/

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a{
box-shadow:none;
}

連結デザイン

/*SNS Type1 - デザインカスタマイズ*/

.sns-design-type01 .sns-top li, .sns-design-type01 .sns li{
margin-right:0px;
width: 25.0%;
transition:0.3s;
}

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a{
font-size:0.8em;
border-radius:0px;
box-shadow:none;
}

枠付きデザイン

/*SNS Type1 - デザインカスタマイズ*/

.sns-design-type01 .sns-top li, .sns-design-type01 .sns li{
border: 2px solid #333;
border-radius:2px;
transition:0.3s;
}

.sns-design-type01 .sns li:hover,
.sns-design-type01 .sns-top li:hover {
opacity: 1 !important;
-webkit-transform: translateY(3px);
transform: translateY(3px);
filter: brightness(95%);
}

.sns-design-type01{
margin-bottom:10px;
}

/*SNS Type1 - 既存デザインの打ち消し*/

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a{
border-radius:0px;
}

.sns-design-type01 .sns li{
margin-bottom:0px;
}

.sns-design-type01 .sns li a:hover,
.sns-design-type01 .sns-top li a:hover {
opacity: 1 !important;
-webkit-transform: translateY(0px);
transform: translateY(0px);
filter: brightness(100%);
}

モノクロデザイン

/*SNS Type1 - デザインカスタマイズ*/

.sns-design-type01 .sns-top .twitter a,.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns-top .hatebu a, .sns-design-type01 .sns-top .pocket a, .sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .twitter a, .sns-design-type01 .sns .facebook a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a, .sns-design-type01 .sns .line a{
color: #fff;
background-color:#444;
border:2px solid #444;
}

.sns-design-type01 .sns .line a svg, .sns-design-type01 .sns-top .line a svg{
fill: #fff !important;
}

SNS(パターン2)のカスタマイズ

太枠デザイン

/*SNS Type2 - デザインカスタマイズ*/

.sns-design-type02 .sns-top .twitter a,.sns-design-type02 .sns-top .facebook a, .sns-design-type02 .sns-top .hatebu a, .sns-design-type02 .sns-top .pocket a, .sns-design-type02 .sns-top .line a, .sns-design-type02 .sns .twitter a, .sns-design-type02 .sns .facebook a, .sns-design-type02 .sns .hatebu a, .sns-design-type02 .sns .pocket a, .sns-design-type02 .sns .line a{
border:2px solid;
}

.sns-design-type02 .sns .line a, .sns-design-type02 .sns-top .line a{
border-color: #6cc655;

モノクロデザイン

/*SNS Type2 - デザインカスタマイズ*/

.sns-design-type02 .sns-top .twitter a,.sns-design-type02 .sns-top .facebook a, .sns-design-type02 .sns-top .hatebu a, .sns-design-type02 .sns-top .pocket a, .sns-design-type02 .sns-top .line a, .sns-design-type02 .sns .twitter a, .sns-design-type02 .sns .facebook a, .sns-design-type02 .sns .hatebu a, .sns-design-type02 .sns .pocket a, .sns-design-type02 .sns .line a{
color: #444;
border:2px solid #444;
}

.sns-design-type02 .sns .line a, .sns-design-type02 .sns-top .line a{
color: #444;
border-color: #444;
}

.sns-design-type02 .sns .line a svg, .sns-design-type02 .sns-top .line a svg{
fill: #444 !important;
}

CSS追加する場所

CSSを追加

WordPress管理画面から「外観」>「カスタマイズ」>「追加CSS」へと進んで、上記コードを追記してください。これだけでカスタマイズは完了です!

WordPressテーマ「JIN」
JINテーマイメージ

JIN(ジン)は読む人も書く人も、どちらも心地よく使える最高のWordPressテーマを目指して作り上げました。

月100万円以上稼ぐアフィリエイターのノウハウが凝縮されているテーマです。売れるメディア作りに必要なものは、このテーマ内にすべて揃えました。

JINをダウンロード!