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

JIN JIN アイコンボックス 余白調整
おかぴーおかぴー
おかぴーです。
前回に引き続き、今度はJINのボックス内の余白をカスタマイズしたいと思います。
記事作成時のテーマのバージョン:2.701
『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。

JINのボックスの種類

ボックスは全部で21種類あり、

  1. 1〜9までのデザイン(simple-box)
  2. 10〜15までのデザイン(kaisetsu-box)
  3. 16〜21までのデザイン(concept-box)

で、コードが若干異なります。

 

①「simple-box」一覧

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

 

②「kaisetsu-box」一覧

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

 

③「concept-box」一覧

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

 

例えば、「concept-box2のデザイン」は、左上に「注意点」というアイコンがあるので「simple-box」の種類に比べて、上の余白が大きく設定されているようです。

①〜③でそれぞれ若干余白の設定が違うようなので、一つずつみていきましょう。

 

①の余白の初期値

①のデザインの初期値は、

・上下が20px
・左右が25px

(ピンク背景の部分です)↓

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

この数値を変更して調整ができます。

 

①をCSSでカスタマイズ

初期値のコードはこちら↓

.simple-box1, .simple-box2, .simple-box3, .simple-box4, .simple-box5, .simple-box6, .simple-box7, .simple-box8, .simple-box9{
padding: 20px 25px;/*上下左右の余白*/
}
.simple-box1 P, .simple-box2 P, .simple-box3 P, .simple-box4 P, .simple-box5 P, .simple-box6 P, .simple-box7 P, .simple-box8 P, .simple-box9 P{
padding-bottom: 20px !important;/*下の余白を上書き*/
}

 

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

赤文字のところを変更しています。

.simple-box1, .simple-box2, .simple-box3, .simple-box4, .simple-box5, .simple-box6, .simple-box7, .simple-box8, .simple-box9{
padding: 10px 10px;
}
.simple-box1 P, .simple-box2 P, .simple-box3 P, .simple-box4 P, .simple-box5 P, .simple-box6 P, .simple-box7 P, .simple-box8 P, .simple-box9 P{
padding-bottom: 0px !important;
}

→2つ目のコードに「!important」という指定も忘れないようにしましょう。

 

 !importantとは?

「最優先で適用させる」意味のコードで、CSSファイルで指定してある中で優先度MAXで適用させるためのものです。

たまにCSSにコードをコピペしてあるのに、なぜかレイアウトが変わらないってことがあります。その場合は、CSSの優先度が関係している可能性があります。

CSSの優先度は、「こちらの記事」でまとめています。

 

 

コードを細かくみていくと、「padding: 10px 10px;」で上下を設定するコードなのですが、その下の「padding-bottom: 10px !important;」というコードで下の余白を個別に指定しています。

なので、下の余白は2つ目の部分で指定しましょう。

 

 

では、次に②のデザインです。

 

②の余白の初期値

②のデザインの初期値は、

・上
タブレット・パソコンなどで見た場合→40px
スマホで見た場合→30px
・下が20px
・左右が25px

(ピンク背景の部分です)↓

 

タブレット・パソコン↓

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

 

スマホ↓

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

 

注意点

ちなみに、先ほどと同じように全ての余白を10pxにしてしまうと、下の画像のように「注意点」の文字がアイコンと重なってしまいます。

なので、ちょうどいい数字で調整が必要になりますね。

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

 

僕がしてみた結果、横幅は最低25pxにしないとアイコンと重なってしまうようです。

 

②をCSSでカスタマイズ

今回は、

・横幅768px以上の画面で見た場合(タブレットやパソコン画面など)
・それ以下のサイズで見た場合(スマホなど)

で上の余白が異なるので、

 

.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6{
padding: 20px 25px;
}
@media screen and (min-width:768px) {
.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6{
padding-top: 40px !important;/*主にタブレット・パソコンサイズ*/
}
}
@media screen and (max-width:767px) {
.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6{
padding-top: 30px !important;/*スマホサイズ*/
}
}
.concept-box1 P, .concept-box2 P, .concept-box3 P, .concept-box4 P, .concept-box5 P, .concept-box6 P{
padding-bottom: 20px !important;
}

 

こちらのコードを、

例えば上下左右30pxにするなら、↓のように赤文字のところを変更。

.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6{
padding: 30px 30px;
}
@media screen and (min-width:768px) {
.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6{
padding-top: 30px !important;/*主にタブレット・パソコンサイズ*/
}
}
@media screen and (max-width:767px) {
.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6{
padding-top: 30px !important;/*スマホサイズ*/
}
}
.concept-box1 P, .concept-box2 P, .concept-box3 P, .concept-box4 P, .concept-box5 P, .concept-box6 P{
padding-bottom: 0px !important;
}

 

③の余白の初期値

③のデザインについてですが、↓の2種類でコードがさらに分かれています。

JIN アイコンボックス 余白調整
・上
タブレット・パソコンなどで見た場合→80px
スマホで見た場合→70px
・下が20px
・左右が25px
JIN アイコンボックス 余白調整
<box04>
・上20px
・下が20px
・左右が25px

<box05・box06>
・上
タブレット・パソコンなどで見た場合→80px
スマホで見た場合→70px
・下が20px
・左右が25px

(ピンク背景の部分です)↓

 

パソコン↓

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

 

スマホ↓

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

 

box01〜03のコード

初期値のコードが↓なので、

.kaisetsu-box1, .kaisetsu-box2, .kaisetsu-box3{
padding: 20px 25px;
}
@media screen and (min-width:768px) {
.kaisetsu-box1, .kaisetsu-box2, .kaisetsu-box3{
padding-top: 80px !important;/*主にタブレット・パソコンサイズ*/
}
}
@media screen and (max-width:767px) {
.kaisetsu-box1, .kaisetsu-box2, .kaisetsu-box3{
padding-top: 70px !important;/*スマホサイズ*/
}
}
.kaisetsu-box1 P, .kaisetsu-box2 P, .kaisetsu-box3 P{
padding-bottom: 20px !important;
}

 

上下左右を10pxの余白にする場合は、↓のようにします。

.kaisetsu-box1, .kaisetsu-box2, .kaisetsu-box3{
padding: 10px 10px;
}
@media screen and (min-width:768px) {
.kaisetsu-box1, .kaisetsu-box2, .kaisetsu-box3{
padding-top: 70px !important;/*元々の80pxから-10pxしてます*/
}
}
@media screen and (max-width:767px) {
.kaisetsu-box1, .kaisetsu-box2, .kaisetsu-box3{
padding-top: 60px !important;/*元々の70pxから-10pxしてます*/
}
}
.kaisetsu-box1 P, .kaisetsu-box2 P, .kaisetsu-box3 P{
padding-bottom: 0px !important;
}

 

box04のコード

初期値の余白が、↓なので、

.kaisetsu-box4{
padding: 20px 25px;
}
.kaisetsu-box4 P{
padding-bottom: 20px !important;
}

 

上下左右を10pxの余白にする場合は、

.kaisetsu-box4{
padding: 10px 10px;
}
.kaisetsu-box4 P{
padding-bottom: 0px !important;
}

 

box05・06のコード

初期値の余白が、↓なので、

.kaisetsu-box5, ..innerlink-box1{
padding: 20px 25px;
}
@media screen and (min-width:768px) {
.kaisetsu-box5, .innerlink-box1{
padding-top: 40px !important;/*主にタブレット・パソコンサイズ*/
}
}
@media screen and (max-width:767px) {
.kaisetsu-box5, .innerlink-box1{
padding-top: 35px !important;/*スマホサイズ*/
}
}
.kaisetsu-box5 P, .innerlink-box1 P{
padding-bottom: 20px !important;
}

 

上下左右を10pxの余白にする場合は、

.kaisetsu-box5, .innerlink-box1{
padding: 10px 10px;
}
@media screen and (min-width:768px) {
.kaisetsu-box5, .innerlink-box1{
padding-top: 20px !important;
}
}
@media screen and (max-width:767px) {
.kaisetsu-box5, .innerlink-box1{
padding-top: 25px !important;
}
}
.kaisetsu-box5 P, .innerlink-box1 P{
padding-bottom: 0px !important;
}

 

で調整できるかと思います。

それぞれ、お好みのカスタマイズをしてください^^

おまけ

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

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

と思っている方へ。

 

ブログ収益化において、

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

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

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

 

どんな話かと言うと、

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

 

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

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

 

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

 

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

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

 

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

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

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

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

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

CTR IMG