【JIN】アイコンボックスの中の余白を調整するカスタマイズ方法

JIN アイコンボックス 余白調整
おかぴーおかぴー
おかぴーです!
今回はJINのアイコンボックスの余白を調整したいと思います^^
記事作成時のテーマのバージョン:2.701

 

『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。

 

目次

JINのアイコンボックスの導入方法

ご存知の方はさっそく本題へどうぞ^^

 

記事投稿のページで、「ショートコード>アイコンボックス」と進むと、様々なデザインのアイコン付きボックスを入れることができます。

JIN アイコンボックス 余白調整

JIN アイコンボックス 余白調整

JIN アイコンボックス 余白調整

どれもスッキリしてて、きれいですよね!

 

余白の初期値

ではまず、デフォルトの余白はどのくらいのピクセル数で設定してあるのか?

ですが、上下左右共に20pxになっています(ピンク背景の部分です)↓

JIN アイコンボックス 余白調整

なので、この数値を調整することで調整できます。

 

CSSでカスタマイズ

CSSのコードは、「外観>カスタマイズ>追加CSS」の中にコピペしていきましょう!

 

おかぴーおかぴー
ちなみに、今回のカスタマイズをすると全てのデザインのアイコンボックスの余白が調整されます。

もし個別に星マークだけの調整をしたいなどあれば、コメントください^^

 

初期値のコードは、

.jin-iconbox{
padding: 20px;
}

となっているので、これを好きな数値に変えてみてください。

 

例えば、上下左右を10pxにするとこんな感じに↓

.jin-iconbox{
padding: 10px;
}

 

Before / After

JIN アイコンボックス 余白 10px 20px

少し狭くなった感じがしますね。

上がデフォルト、下が10pxにしたものです。

 

 余白を調整するコード「padding・margin」について
余白を調整するには、padding・marginという2つのコードがあります。

違いは、要素の内側にある余白を調整するときは、paddingの数値を変えていきます。
今回であれば、緑色の背景色の内側の余白ということですね。

逆にmarginとは、要素の外側の余白なので、marginを指定しても緑色の背景部分は何も変わらないということになります。

 

左右のみ、全て個別に余白を調整する場合

例えば、左右だけ10pxにしたい場合は、コードを↓にします。

.jin-iconbox{
padding: 20px 10px;
}

padding: 「上下の数値」 「左右の数値」と指定でき、

 

全て別で指定したい場合は、

.jin-iconbox{
padding: 20px 10px 8px 5px;
}

と指定します。

左から順番に時計回りで、「上」「右」「下」「左」の数値をカスタマイズできます。

 

では、10pxになったアイコンボックスで実際に文字を横幅いっぱいに入れてみましょう。

そうすると↓

JIN アイコンボックス 余白調整

 

もしかしたら、ここでアイコンの右側・本文の左側の余白が少し違いことに気づきましたか?↓

JIN アイコンボックス 余白調整

実は、この部分にも余白設定をしてあるので、ピンクのところの余白も気になる方は、別のコードをコピペする必要があります。

 

アイコン右・文字の左の余白も調整したい場合

今回は先ほど設定した10pxと合わせていきましょう。

最初は、アイコンの右側の余白です。

JIN アイコンボックス 余白調整

 

まずはデフォルトはアイコン右に14pxの余白があります。

.jin-iconbox-icons{
padding-right:14px;
}

↓↓↓

.jin-iconbox-icons{
padding-right:10px;
}

 

次に、テキスト部分。

JIN アイコンボックス 余白調整

 

デフォルトがテキスト左に15pxの余白なので、

.jin-iconbox-main{
padding-left:15px;
}

↓↓↓

.jin-iconbox-main{
padding-left:10px;
}

とします。すると、

JIN アイコンボックス 余白調整

全体的な余白を全て10pxにしてみました。

ぜひそれぞれお好みのカスタマイズをしてくださいね〜

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • 先日に続き度々恐れ入ります。

    アイコンボックスではなく、
    1〜21まである「ボックス」内の上下左右の余白調整を行うための追加CSSなどはご存知でしょうか。
    お手数ですが、ご存知でしたらお教えいただけますとありがたいです。

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次