【JINカスタマイズ】SNSシェアボタンのデザイン（サイズ）変更CSS

きたむ（wakajps）です。

WordPress有料テーマのJIN（WordPressテーマをJIN（ジン）に変更！デザインのテンプレートが豊富！）を購入して2カ月ほど経ちました。

ここまで使っての感想ですが…

デザインのテンプレート数が多く洗練されているのと、それによって記事の執筆に集中できるのが最高！これまでのところとても満足しています。購入して良かった…！

きたむ

ただ…ひとつだけ気になったのがSNSのシェアボタン。

ハミングバード（ストーク）からJINに乗り換えたためか、JINのSNSシェアボタンのサイズが少し小さい…？かなぁと。

ハミングバード（ストーク）を使用していたときは、標準のドカッと大きめのSNSシェアボタンを設置していました。

きたむ

JINでももう少し大きめのSNSシェアボタンを使いたい…！

というわけで、

ワードプレステーマJINで使えるSNSシェアボタン・カスタマイズ用のCSSを用意しました。以下で、そのCSSを公開しています。

これを使うことで以下のように、JIN標準のSNSシェアボタンを”少しだけ”大きくすることができます。（上のボタンが標準のサイズ、下のボタンが本記事で紹介するCSSを適用したサイズです）

デザイン１の場合

デザイン２の場合

きたむ

コピペだけかんたんにカスタマイズできちゃいます！

JINをカスタマイズするための準備【子テーマのダウンロード】
JINのカスタマイズ用CSSコード【SNSシェアボタンを大きくする】
- プロフィールとSNSシェアボタンの位置を入れ替える

JINをカスタマイズするための準備【子テーマのダウンロード】

JINの子テーマが必要です。JINの公式サイトから子テーマをダウンロードしてインストールします。

親テーマと同じようにWordPressにアップロードし、インストール→有効化すればOK！

JINのカスタマイズ用CSSコード【SNSシェアボタンを大きくする】

以下、SNSシェアボタンをすこしだけ大きくするためのCSSコードです。

コードをコピペしていくまえにstyle.cssのバックアップを取っておくことをおすすめします。

.sns-design-type01 .sns-top li a {
font-size: 1.2rem;
}
@media (min-width: 768px) {
.sns-design-type01 .sns-top li a {
padding: 7px 6px;
height: 35px;
font-size: 1.2rem;} }

@media (max-width: 767px) {
.sns-design-type01 .sns-top li a {
padding: 8px 6px;
height: 34px; } }

.sns-design-type01 .sns li a {
margin-top: 15px; }

@media (max-width: 767px) {
.sns-design-type01 .sns li a {
height: 35px;
font-size: 1.2rem;
padding: 8px 6px; } }
@media (min-width: 768px) {
.sns-design-type01 .sns li a {
height: 35px;
font-size: 1.2rem;
padding: 6px 6px; } }

.sns-design-type01 .sns .line a svg,
.sns-design-type01 .sns-top .line a svg {
width: 32px !important; }

.sns-design-type02 .sns-top li a {
font-size: 1.2rem;
}
@media (min-width: 768px) {
.sns-design-type02 .sns-top li a {
padding: 6px 6px;
height: 35px;
font-size: 1.2rem; } }
@media (max-width: 767px) {
.sns-design-type02 .sns-top li a {
padding: 6px 6px;
line-height: 12px;
height: 34px; } }

.sns-design-type02 .sns li a {
margin-top: 15px; }

@media (max-width: 767px) {
.sns-design-type02 .sns li a {
padding: 6px 6px;
line-height: 12px;
height: 35px;
font-size: 1.2rem;
} }
@media (min-width: 768px) {
.sns-design-type02 .sns li a {
padding: 6px 6px;
line-height: 21px;
height: 35px;
font-size: 1.2rem;
} }

.sns-design-type02 .sns .line a svg,
.sns-design-type02 .sns-top .line a svg {
width: 32px !important; }

このCSSを、子テーマのスタイルシート（jin-shild>style.css）にコピペ、「ファイルを更新」して完了です。

きたむ

SNSでシェアされるとうれしいので、このカスタマイズでさらにシェア数が増えるとうれしいですね！