JINでSNSボタンのデザインをカスタマイズする方法！コピペでOK！

教えて君

JINって人気のWordPressテーマだけど、みんなとデザインが被っちゃうんだよなぁ・・・。

SNSボタンも他人とは違うものにしたいなぁ・・・。

このように思っている方必見です。

当ブログのテーマはAFFINGERですが、私の運営している別の特化型ブログはJINを利用しており、SNSボタンを独自にカスタマイズして差別化しています。

カケル

今回は、JINでSNSボタンのデザインをカスタマイズする方法を紹介します。

全てのデザインでコピペでOKです。

+ クリックすると結論を先読みできます！

JINのSNSボタンを枠のみ色付きのデザインの変更は、JINの機能で可能。
JINでSNSボタンのデザインをカスタマイズするには、本文中のコードを追加CSSにコピペすることで対応可能。

カケル

本文で詳しく解説しているよ♪

JINでSNSボタンを枠のみ色付きのデザインに変更する方法は？

JINのSNSボタンはデフォルトだと、以下のデザインですよね。

これだけでもオシャレだとは思いますが、JINを使っている人はめちゃくちゃ多いので、他人と被ってしまいます。

JINのテーマには標準で枠のみ色付きのデザインも用意されています。

変更方法は以下の通りです。

WordPress管理画面から「外観＞カスタマイズ」を選択
SNS設定(OGP)を選択
「SNSボタンのデザイン」を「スタイル2」に変更

JINでSNSボタンのデザインをカスタマイズする方法！コピペでOK！

JINでSNSボタンのデザインをカスタマイズするには、WordPress管理画面から、「外観＞カスタマイズ＞追加CSS」へ進み、各コードをコピペしてください。

非常に簡単にカスタマイズすることができます。

スタイル1のカスタマイズ

影を消してフラット化

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

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a{

box-shadow:none;

}

連結デザイン

.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-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-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-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-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-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;

}

太いデザイン

JINのSNSボタンは細いので、太くすることで差別化できます。

@media (min-width: 768px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
box-shadow: none;
height: 44px;
opacity: .7;
}
.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {
padding-top: 9px!important;
}
.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {
padding-top: 11px !important;
}
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {
padding: 13px!important;
}
.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {
padding-top: 8px!important;
}
.sns-design-type01 .sns li a {
line-height: 11px;
}}
@media (max-width: 767px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
padding: 6px 6px;
box-shadow: none;
height: 44px;
opacity: .7;
}
.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {
padding-top: 11px !important;
}
.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {
padding-top: 9px!important;
}
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {
padding: 13px!important;
}
.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {
padding-top: 8px!important;
}}

@media (min-width: 768px){

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {

box-shadow: none;

height: 44px;

opacity: .7;

}

.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {

padding-top: 9px!important;

}

.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {

padding-top: 11px !important;

}

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {

padding: 13px!important;

}

.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {

padding-top: 8px!important;

}

.sns-design-type01 .sns li a {

line-height: 11px;

}}

@media (max-width: 767px){

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {

padding: 6px 6px;

box-shadow: none;

height: 44px;

opacity: .7;

}

.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {

padding-top: 11px !important;

}

.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {

padding-top: 9px!important;

}

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {

padding: 13px!important;

}

.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {

padding-top: 8px!important;

}}

オシャレデザイン

こちらのデザインは一番のおすすめです。

サイドバーに同じデザインがあるので、合わせると統一感を持たせることができます。

.sns-design-type01 .sns-top li.twitter a, .sns-design-type01 .sns-top li.facebook a, .sns-design-type01 .sns-top li.hatebu a, .sns-design-type01 .sns-top li.pocket a, .sns-design-type01 .sns-top li.line a {
border: 3px double;
border-color: white;
}
.sns-design-type01 .sns li.twitter a, .sns-design-type01 .sns li.facebook a, .sns-design-type01 .sns li.hatebu a, .sns-design-type01 .sns li.pocket a, .sns-design-type01 .sns li.line a {
border: 3px double;
border-color: white;
}
@media (min-width: 768px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
box-shadow: none;
height: 44px;
opacity: .7;
}
.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {
padding-top: 9px!important;
}
.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {
padding-top: 11px !important;
}
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {
padding: 13px!important;
}
.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {
padding-top: 8px!important;
}
.sns-design-type01 .sns li a {
line-height: 11px;
}
}
@media (max-width: 767px){
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {
padding: 6px 6px;
box-shadow: none;
height: 44px;
opacity: .7;
}
.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {
padding-top: 11px !important;
}
.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {
padding-top: 9px!important;
}
.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {
padding: 13px!important;
}
.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {
padding-top: 8px!important;
}}

.sns-design-type01 .sns-top li.twitter a, .sns-design-type01 .sns-top li.facebook a, .sns-design-type01 .sns-top li.hatebu a, .sns-design-type01 .sns-top li.pocket a, .sns-design-type01 .sns-top li.line a {

border: 3px double;

border-color: white;

}

.sns-design-type01 .sns li.twitter a, .sns-design-type01 .sns li.facebook a, .sns-design-type01 .sns li.hatebu a, .sns-design-type01 .sns li.pocket a, .sns-design-type01 .sns li.line a {

border: 3px double;

border-color: white;

}

@media (min-width: 768px){

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {

box-shadow: none;

height: 44px;

opacity: .7;

}

.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {

padding-top: 9px!important;

}

.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {

padding-top: 11px !important;

}

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {

padding: 13px!important;

}

.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {

padding-top: 8px!important;

}

.sns-design-type01 .sns li a {

line-height: 11px;

}

@media (max-width: 767px){

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns li a {

padding: 6px 6px;

box-shadow: none;

height: 44px;

opacity: .7;

}

.sns-design-type01 .sns-top .facebook a, .sns-design-type01 .sns .facebook a {

padding-top: 11px !important;

}

.sns-design-type01 .sns-top .twitter a, .sns-design-type01 .sns .twitter a {

padding-top: 9px!important;

}

.sns-design-type01 .sns-top li a, .sns-design-type01 .sns .hatebu a, .sns-design-type01 .sns .pocket a {

padding: 13px!important;

}

.sns-design-type01 .sns-top .line a, .sns-design-type01 .sns .line a {

padding-top: 8px!important;

}}

スタイル2のカスタマイズ

太枠デザイン

.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-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-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;
}

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;

}

まとめ：JINでSNSボタンのデザインをカスタマイズする方法！コピペでOK！

いかがでしたか？

当記事のソースコードをコピペするだけで簡単にデザインを変更することができます。

デフォルトで使っている方がほとんどですので、ちょっと変えるだけで他人とは違うデザインになるのでおすすめです。

なお、当ブログではJINではなくAFFINGERを使っていますが、こちらのテーマは「アフィリエイトで稼ぐ」に特化しているのでおすすめですよ。

同じテーマでばかりブログを作っていると、ちょっと飽きてきちゃいますからね。

AFFINGERは、通常の「AFFINGER5(WING)」にプラスαの機能が追加された特別バージョンが「AFFINGER5EX(WING)」となっており、これに便利なプラグイン2つ(AFFINGERタグ管理マネージャー3・ABテストプラグイン)が追加されたものが「AFFINGER PACK3」となっています。

アフィリエイトではPDCAが重要です。

「AFFINGER PACK3」に付属する「AFFINGERタグ管理マネージャー3」、「ABテストプラグイン」はPDCAのCHECKを手助けしている機能です。

特に、「AFFINGERタグ管理マネージャー3」の方は、どの広告が最もクリックされているか、どの広告がイマイチか等、分析できるので超おすすめです。

トップアフィリエイターが多数利用しているテーマなので、間違いないテーマです。

カケル

通常版で十分！という方はこちらから。

＼トップアフィリエイターが多数利用！／

AFFINGER5(WING)公式サイトをを見てみる

カケル

「AFFINGERタグ管理マネージャー3」、「ABテストプラグイン」も欲しい！という方はこちらから。

＼期間限定特別価格／

AFFINGER PACK3公式サイトを見てみる