きたむ（wakajps）です。
WordPress有料テーマのJIN（WordPressテーマをJIN（ジン）に変更！デザインのテンプレートが豊富！）を購入して2カ月ほど経ちました。
ここまで使っての感想ですが…
デザインのテンプレート数が多く洗練されているのと、それによって記事の執筆に集中できるのが最高！これまでのところとても満足しています。購入して良かった…！
ハミングバード（ストーク）からJINに乗り換えたためか、JINのSNSシェアボタンのサイズが少し小さい…？かなぁと。
ハミングバード（ストーク）を使用していたときは、標準のドカッと大きめのSNSシェアボタンを設置していました。
というわけで、
ワードプレステーマJINで使えるSNSシェアボタン・カスタマイズ用のCSSを用意しました。以下で、そのCSSを公開しています。
これを使うことで以下のように、JIN標準のSNSシェアボタンを”少しだけ”大きくすることができます。（上のボタンが標準のサイズ、下のボタンが本記事で紹介するCSSを適用したサイズです）
- デザイン１の場合
- デザイン２の場合
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シェアボタンの位置を入れ替える
記事下のSNSシェアボタンとプロフィールの位置を入れ替える方法を紹介しています。応用で関連コンテンツユニットも入れ替え可です。
きたむ（wakajps）でした。
