【カエレバ-Cocoon仕様】「kaerebalink-box」のCSSを解説

今回はカエレバのHTML内にあるclass名の一つ、「kaerebalink-box」に設定されてるCSSに関して解説していこうと思います。

この記事を読むことで、以下が分かります。

kaerebalink-boxとは？
borderの簡単な付け方
「display:flex;」の役割
メディアクエリ
box-sizingの使い方

kaerebalink-boxの紹介
1. kaerebalink-boxとは？
2. kaerebalink-boxの役割
【Cocoon版】「kaerebalink-box」のデザインとそのCSSを解説
まとめ

kaerebalink-boxの紹介

kaerebalink-boxとは？

「kaerebalink-box」というのは、カエレバアフィリエイトリンクのHTMLを構成する<div>に指定されたclass名の一つです。

カエレバHTML内では、class名の「cstmreba」が一番外側を囲っていて、二番目に全体を囲っている<div>タグのclass名にあたります。

カエレバアフィリエイトリンクのHTMLとは？: ブログやサイトなどにカエレバアフィリエイトリンクを貼り付ける際に、必要なHTMLコードのことです。

kaerebalink-boxの役割

外側から二番目に来る箱。
リンク全体にCSSデザインを設定しています。

以降から、「Cocoonテーマ」に設定されていた「kaerebalink-box」のCSSについて解説していきますね。

以下のフローから得られた内容を説明しますね。

「kaerebalink-box」にCSSを設定
ブラウザ表示にあった変化をピックアップ
変化に影響しているCSSを説明する

ちなみに、下記の画像がCSS設定前とCSS設定後のビフォーアフターです。

画像の青・緑・黄・橙の部分

画像で元々色付けされている箇所は、検証ツールによるものです。

各色に関しては、以下の意味があります。

検証ツール widht×height
青（#8cb6c0）=content
(width×height)

検証ツール padding
緑（#c3d08b）=padding

検証ツール border
黄（#fddd9b）=border

検証ツール margin
橙（#f9cc9d）=margin

検証ツール position
無（#ffffff）=position

【Cocoon版】「kaerebalink-box」のデザインとそのCSSを解説

カエレバ全体にボーダーをつける

ちょっとボーダーが分かりにくいので、以下の画像です。

灰色のボーダーで囲まれました。

以下のプロパティが影響しています。


kaerebalink-box{
    border: 3px solid #dfdfdf;
}

上記のプロパティ値の意味を図で示しますね。

画像の下にあった文章達が横に並んだ

以下のプロパティが影響しています。


@media screen and (min-width: 769px){
.kaerebalink-box {
    display: flex;
}
}

上記のプロパティ値「flex」が、並べ方を設定します。

これは親要素（kaerebalink-box）にかかっていますね。

つまり「kaerebalink-box」（親要素）はflexを設定したことにより、子要素たちを入れる「フレックスコンテナ≒入れ物」になったわけです。

今回フレックスコンテナ内に入っている子要素たちは、以下の３つです。

➂kaerebalink-image
➃kaerebalink-info
➄booklink-footer

上記３つは、「フレックスアイテム」と言われます。

➂～➄というのは、別記事でカエレバHTMLで使われてるclass名を紹介した時の名残です。気にしなくてOKです。

結果、この子要素たちは今まで縦並びでしたが→「フレックスアイテム化」したことで、横並びになりました。

「flex」の変化がわかりづらい人に向けて、動画にしてみました。

↓

もしかしたら動画では分かりにくいかもなので、「flex」のON・OFFを示した画像も載せておきますね。

※並びの変化が分かりやすいように、各々にborderの色で分けました。


.kaerebalink-info{
    border:3px solid tomato;
}

.kaerebalink-image{
    border:3px solid violet;
}

.booklink-footer{
    border:3px solid yellowgreen;
}

縦並び→横並びになっていますね。

メディアクエリに関して

flexには、メディアクエリが指定されていましたね（下記です）。


@media screen and (min-width: 769px){{}}

これは、「画面幅が769px以上の画面では・・・{{}}←赤波括弧内のstyleを適用」という意味です。

※画面幅769px以上ですと大体、スマホ横にした場合～タブレット～PCでの表示になりますね。

今回、メディアクエリが組み込まれたflexのCSSを見てみると、
画面幅769px以上の時はkaerebalink-boxのflexは適用されるということです。

また768px以下の大きさですと、適用されず通常の縦並び（display:block;）になっていました。

ではでは、「min」ではなくてmax-width:〇〇px;だと？

画面幅〇〇px以下の画面でstyleが適用されます。

メディアクエリのまとめ

書き方の例


@media screen and (min-width:769px){
.xx{}
}

メディアクエリ用の「{}」があることに注意しましょう。

（）内に入れる値の「以上・以下」の決め方

以上→min-width
以下→max-width

幅が狭くなった

少しkaerebalink-boxの幅が狭くなり、うっとうしい感じが軽減されました。

影響しているCSSプロパティは以下ですね。


.kaerebalink-box{
    width: 96%;
}

この「96%」というのは、
「親要素である「cstmreba」の幅100%のうち、96%の幅を使用するよ。」という意味です。

※「cstmreba」というのは、「kaerebalink-box」を囲っている親要素です。

ボーダーと内側の内容との間隔が変化した。

borderと内容物との間隔が変化しました。

影響しているCSSプロパティは以下です。


@media screen and (max-width: 834px){
.kaerebalink-box, {
    padding: 10px 10px 24px;
}
}

よく使用される「padding」ですね。

border⇔コンテンツ（内容）の端っことの間隔を設定できるCSSプロパティですね。

あれ、3つ数値あるけどどうやってみるんだろう？

上記のような悩みが生まれそうなので内訳を示しました。

↓

padding-top: 10px;
padding-right: 10px;
padding-bottom: 24px;
padding-left: 10px;

つまり3つの数値の場合の見方は、
「padding: (上)(右左)(下) ;」という感じで見ればよいですね。

borderの無駄な広がりが軽減した。

「キュッ！」とborderやpaddingが収まって、見やすい大きさになりましたね。

影響しているプロパティは以下です。


.kaerebalink-box{
    box-sizing: border-box;
}

もしかしたら、「box-sizing」とは何ぞやって思う方もいるかもなので…以下で解説します。

box-sizingとは？: box-sizingプロパティは、要素の幅（width）と高さ（height）の算出方法を決めます。
box-sizingのプロパティ値
box-sizing:content-box;: 初期設定（デフォルト値）で、幅と高さをそのまま表示されます。
box-sizing:border-box;: 上記のプロパティにすることで、borderとpaddingも含めた幅や高さで表示されます。
「border-box」の影響を計算式的に見た場合・・・: 「width:〇〇;」や「height:△△;」と指定した時に、; width= 左右のborderの幅 + 左右のpaddingの幅 + widthの幅; height= 上下のborderの高さ + 上下のpaddingの高さ + heightの高さ; となるように調整されます。