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

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

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

kaerebalink-imageとは？
箱に合わせた画像のCSS設定法
大きい画像よる全体への影響
「em」や「inherit」に関して
「!important」の強制力
「float」と「flex」の関係性
画像全体をリンク化させる方法

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

kaerebalink-imageの紹介

kaerebalink-imageとは？

カエレバHTML内にある、<div>に指定されたclass名の一つです。
主に、カエレバのアフィリエイトリンクを構成する中で「画像」に関しての表示・配置をコントロールしているclass名です。

kaerebalink-imageの役割

「商品の役割」と「写真元になっているサイトのリンク」が中に入っている（囲っている）。
主に写真の表示・配置系をコントロールします。

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

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

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

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

一応、スマホ版の表示も載せておきます

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

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

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

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

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

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

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

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

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

画像のサイズが小さくなった

※画面幅800pxで見たときです。

画像が小さくなったというか見やすい大きさになりましたね。

影響しているCSSは以下です。


@media screen and (max-width: 834px){
    .kaerebalink-image {
        width: 120px;
}
}

上記CSSを訳すと、
「画面幅834px以下の時、kaerebalink-image（画像とリンクを入れる箱）の幅は120px。」
ということですよね。

ちなみにCocoonカエレバCSSの場合、メディアクエリを利用して、画面幅に合わせた「kaerebalink-image」の幅に設定されていました。

以下「kaerebalink-image」の幅に関するプロパティです。

何も指定がない時とメディアクエリの数値外…（画面幅835px以上）


.kaerebalink-image {
    width: 160px;
}

kaerebalink-imageの幅は160pxとなります。

画面幅481px～834px


@media screen and (max-width: 834px){
    .kaerebalink-image {
        width: 120px
}
}

kaerebalink-imageの幅は120pxとなります。

画面幅480px以下（スマホ対応）


@media screen and (max-width: 480px){
.kaerebalink-image {
    width: 80px;
}
}

kaerebalink-imageの幅は80pxとなります。

画像でまとめると…

ちょっと待って、
「kaerebalink-image（画像・リンクを入れる箱）」だけ大きくしても「そもそもの画像の幅」とかはどうなるっているの？

おっしゃる通りです。上記の「kaerebalink-image」の幅設定だけだと、以下の画像のようになってしまいます。

「img」が大きすぎて、「kaerebalink-image」の箱から飛び出してしまっていますね。

なので、「img」自体にもCSSの指定が必要になってきます。

Cocoonでは、以下のCSSで対応させていました。


img {
    max-width: 100%;
    height: auto;
}

上記CSSを訳すと、: 画像の最大幅（幅の上限）は、親要素の100％の幅まで使えます。; 画像の高さは、自動的に元の画像の縦横比に合わせて調整されます。

上記CSSをkaerebalink-image内のimg(画像)に適用させると…: img幅は、kaerebalink-imageの幅100％までしか広がりません。
数値をみますと・・・: 「箱の中のimg幅」は320px; 「箱（kaerebalink-image）の幅」の最大値（160、120、80px）

つまり、中にあるimgはkaerebalink-imageの幅100％を常時超えることになるので、箱の「max-width:100%;」は効果を発揮し、

箱の幅が160pxなら→画像の幅は160px
箱の幅が120pxなら→画像の幅は120px
箱の幅が80pxなら→画像の幅は80px

という感じになります。

img高さの数値から縦横比をみると・・・: 「元の画像の大きさ」は、320×320（幅×高さ）。

つまり１：１なので、

画像の幅が160pxなら→画像の高さは160px
画像の幅が120pxなら→画像の高さは120px
画像の幅が80pxなら→画像の高さは80px

という感じになります。

imgのCSSが入るとこんな感じに変化します。↓

参考記事

画像の大きさを最適化する

全体のカエレバリンクが小さくなった。

※「cstmreba」がカエレバ全体を囲っています。

これは単純な仕組みで、

「kaerebalink-image内にあるimg」が大きすぎる
「imgに合わせて、imgを入れるkaerebalink-imageも巨大化」
「kaerebalink-imageが巨大化より、囲っているkaerebalink-boxも巨大化」

というように、カエレバ全体が巨大化しちゃっていたわけです。

しかし、箱全体を大きくしている根源のimgに「max-width:100%;」や「height:auto;」を指定にしたことで、連動するように囲っている箱たちも小さくなったというわけです。

800px画面幅で右・左・下に余白ができた。

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


 .kaerebalink-image {
    margin: 0 auto 1em !important;
}

CSSを訳すと、

kaerebalink-imageの周りの余白は、
上の余白0、左右の余白は自動（オート）、下の余白は1emという感じです。

一応用語の解説をしておきますね。

1emとは？: 1em=font-size（文字サイズ）分に相当します。

じゃあじゃあ、CocoonのカエレバCSSでは、どのfont-sizeでemの数値を決めているの？

kaerebalink-imageを囲う「kaerebalink-box」に、以下のフォントサイズで「em」の数値は設定されていました。


@media screen and (min-width: 769px){
.kaerebalink-box {
    font-size: inherit !important;
}
}

inherit（インハイト）とは？: 親要素と同じプロパティ値を受け継ぎたい時に、子要素に設定したりするプロパティ値。

検証ツールを使用してフォントサイズを確認してみた

kaerebalink-boxに設定されていた「font-size」を調べたところ、16pxでした。

※CocoonカエレバCSSの「font-size」には特に指定もなく、デフォルト（初期値）=16pxのままで、これをinheritで受け継いでいるようです。

よって、kaerebalink-imageの下余白は1emで、1文字分の16px分空いていることになります。

余白を設定したのはいいけど、左にやけに広い余白がある・・・。

上記の原因は、以下のCSSにあります。


@media screen and (max-width: 834px){
 .kaerebalink-image {
        margin-right: 3% !important;
}
}

CSSを訳すと、画面幅834px以下の時、「kaerebalink-image」の右横は、3％の余白を空ける（重要‼）みたいな感じです。

これにより、無理やり「kaerebalink-image」と「kaerebalink-info」の間に3％（画面サイズ800px時、21.2969px）という余白を作った反動で、結果的に左の余白が無駄に空いちゃった
という感じです。

さらに、「!important」がかかっているので、優先的に利かせていますね。

参考

CSSのセレクタとは？覚えておきたい25種類と書き方

CSSのmin-widthの使い方【初心者向け】

スマホ版だと必ず写真は左寄せになった

商品リンクの画像はよく左側にあることが多いですよね。

CocoonカエレバCSSでは、以下のCSSで操作しています。


@media screen and (max-width: 834px){
.kaerebalink-image {
        float: left !important;
}
}

上記CSSを訳すと、「kaerebalink-image」を浮かせて左に寄せる（重要‼）という意味です。

画像を左側にしたければ、上記CSSをかけましょう。

しかし、画面幅800px表示ではfloatの効力が発揮しているのか、微妙な感じでした。

原因として、画面サイズが769px以上～適用される、kaerebalink-boxの「display:flex;」が影響していると考えられます。


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

kaerebalink-imageの親要素（kaerebalink-box）にかけられた「flex」の作用が強く、子要素（kaerebalink-image）にかけた「float:left !important;」の効果が埋もれてしまっていると思われます。

「float」の効果が埋もれてしまうということが分かるアニメーションを作成してみました。

動作環境としては、以下です。

画面幅769px: kaerebalink-boxの「flex」が作用してる。; kaerebalink-imageの「float:left !important」が作用してる。←効果が埋もれてる
画面幅768px: kaerebalink-boxの「flex」が作用してない。; kaerebalink-imageの「float:left !important」が作用してる。

やはり、全体でかけている親要素の方が主導権を握る形になるんですかね…。

一応「float:left;」が効いている（768px以下の画面幅で）ことがわかる画像も載せておきますね