きたむ(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)でした。