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

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にしてみました。

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

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

 

興味がある方は「こちら」をご覧ください〜

ストレスフリーなブロガーライフを送ろうWPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG