SANGO3【adsense】関連記事のinfeed広告の表示がされない原因と解決

SANGO3で、関連記事にadsenseのinfeed広告を表示する際に、つまったのでまとめておきます。

1 関連記事に広告設定をしても表示されない
2 関連記事のデザインをいろいろ試す
3 adsenseのinfeed広告の仕様を確認し、原因判明
4 タイプAで幅が220以上になるように３段から２段へCSSを変更
5 確認すると表示されるようになりました！
6 あとがき

adsenseのinfeed広告の仕様を確認し、原因判明

タイプCの横長では表示されたので、幅が問題なのかな～と考えました。
アドセンスの仕様を見てみますと、

Google AdSense レスポンシブインフィード広告のサイズ
https://support.google.com/adsense/answer/9189958?hl=ja&ref_topic=9183242&sjid=2877367288808117222-AP

インフィード広告の幅の最小値は 250 ピクセルです

で、タイプA、タイプCの幅を確認すると、幅が220pxでした。どうもこれが原因のようです。

ぞの

関連記事の幅が小さくて、広告が表示されていないようですね。

タイプAで幅が220以上になるように３段から２段へCSSを変更

CSSを調査しますと、タイプAは、幅1030以上で、１行３列の設定になっていますが、
これを１行２列に変更するようにしました。

CSS変更前

@media only screen and (min-width: 1030px) {
   .related-posts.type_a ul,.related-posts.type_a.no_slide ul,.related-posts.type_b ul,.related-posts.type_b.no_slide ul {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3,1fr)
    }
}

CSS変更後

@media only screen and (min-width: 1030px) {
   .related-posts.type_a ul,.related-posts.type_a.no_slide ul,.related-posts.type_b ul,.related-posts.type_b.no_slide ul {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2,1fr)
    }
}

また、タイプAは、幅768px以下の場合は、横にスライドする表示となりますが、その場合も、幅が足りていませんでしたので、修正します。

CSS変更前

@media only screen and (max-width: 768px) {
    .related-posts.slide ul li {
        min-width: 240px;
    }
}

CSS変更後

@media only screen and (max-width: 768px) {
    .related-posts.slide ul li {
        min-width: 250px;
    }
}

この修正したCSSを
[外観]-[カスタマイズ] 追加CSSに追記します。

追記したCSS

/** 関連記事 typeA 3段→2段 start **/
@media only screen and (min-width: 1030px) {
   .related-posts.type_a ul,.related-posts.type_a.no_slide ul,.related-posts.type_b ul,.related-posts.type_b.no_slide ul {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2,1fr)
    }
}

@media only screen and (max-width: 768px) {
    .related-posts.slide ul li {
        min-width: 250px;
    }
}
/** 関連記事 typeA 3段→2段 end **/