【JINカスタマイズ】SNSシェアボタンのデザイン(サイズ)変更CSSを公開

きたむ(wakajps)です。

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

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

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

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

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

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

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

というわけで、

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

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

  • デザイン1の場合
  • デザイン2の場合
きたむ
きたむ
コピペだけかんたんにカスタマイズできちゃいます!

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シェアボタンの位置を入れ替える

記事下のSNSシェアボタンとプロフィールの位置を入れ替える方法を紹介しています。応用で関連コンテンツユニットも入れ替え可です。

【JINカスタマイズ】プロフィールとSNSシェアボタンの位置を入れ替える
【JINカスタマイズ】プロフィールとSNSシェアボタンの位置を入れ替えるWordPressテーマ「JIN」ユーザーのきたむ(wakajps)です。 WordPress有料テーマのJIN(WordPres...

 

きたむ(wakajps)でした。

 

ABOUT ME
きたむ
アフリカではたらくフリースタイルジャパニーズ |三度の飯と写真|87年生の伊豆下田育ち→大学職員人事→ 南ア現地NGOでICT・マイクロファイナンスを軸に活動中|キリマンジャロ登頂|スマホ歴12年|旅行14カ国|仕事7カ国|<プロフィール詳細>

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

error: Content is protected !!