PHP 挿入する広告を要素の幅に合わせる サンプル

広告を配置した際のズレや、微妙な隙間はとても気になります。
挿入する広告のサイズが、わかっている前提のサンプルです。

独自関数に整形してお使いください。

$rand = function ($length = 4) {
    $chars = '0123456789abcdefghijklmnopqrstuvwxyz_-';
    $str = '';
    for ($i = 0; $i < $length; ++$i) {
        $str .= $chars[mt_rand(0, 37)];
    }
    return $str;
};

//広告のIDが被らないように、ランダムな文字を足しています。
$id="広告枠のDIVのID".rand();
$idp="広告枠内の拡縮用のDIVのID".rand();

echo "<div id='".$id."' style='width:100%;margin-bottom:10px;margin-top:20px;overflow:hidden;'><div id='".$idp."' style='transform-origin:top left;'>".$広告のコード."</div>";

//DOMContentLoadeで、要素の幅を取得してから、広告の高さと拡大率を設定しなおします。
echo "<script>
    document.addEventListener('DOMContentLoaded', function(event) {
  let scale = document.getElementById('$id').getBoundingClientRect().width / $広告の横幅;
    let wrap_height = scale * $広告の高さ;
    document.getElementById('$id').style.height = wrap_height + 'px';
    document.getElementById('$idp').style.transform = 'scale('+scale+')';
});
</script></div>";

見本①

【PR】

↑ のような感じになります。
ただ、このバナーは挿入要素の幅が画像幅より小さい場合は、自動で縮小かかってるみたいなので、拡大時のみONにしています。

ちなみに、レンタルサーバーをどれにすれば悩んでいる方がいたら、上記のmixhostがオススメです。
私もいろいろなサービスを試しましたが、今はmixhost一択になっています。

速度も速い。UIも一番使いやすい。
私の場合は、自分が書いているphpが悪いというのもありますが、一日10万PVあたりでスタンダードだと重くなってきたので、プレミアムにアップグレードしましたが、それ以降は重くならなくなりました。

コメント

タイトルとURLをコピーしました