広告を配置した際のズレや、微妙な隙間はとても気になります。
挿入する広告のサイズが、わかっている前提のサンプルです。
独自関数に整形してお使いください。
$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あたりでスタンダードだと重くなってきたので、プレミアムにアップグレードしましたが、それ以降は重くならなくなりました。
コメント