JSFiddle - React, Tailwind, and code Playground
CSS
/*
広告がひとつだけの場合は不要
*/
.moreBeforeAds {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.moreBeforeAds div {
-webkit-box-flex: 1;
-webkit-flex: 1 48%;
-ms-flex: 1 48%;
flex: 1 48%;
border: 1px solid;
margin: 0 5px;
}
JavaScript
(function($) {
$(function() {
/*xxxx部分に自信のid等を*/
var ad = '<ins class="adsbygoogle"' +
'style="display:block"' +
'data-ad-client="ca-pub-xxxxxxxxxx"' +
'data-ad-slot="xxxxxxxxxx"' +
'data-ad-format="auto"></ins>';
/*
ダブルレクタングルにする場合leftとrightを入れる
一つだけならleft、right不要
*/
$('.more-link').first().before("<div class='moreBeforeAds'><div class='left'></div><div class='right'></div></div>");
// ひとつだけの場合は以下
//$('.more-link').first().before("<div class='moreBeforeAds'>");
$.getScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', function() {
$('.moreBeforeAds').html(function() {
/*ダブルレクタングルの場合それぞれにadを入れてpushする*/
$(this)
.find(".left").append(ad);
(adsbygoogle = window.adsbygoogle || []).push({});
$(this)
.find(".right").append(ad);
(adsbygoogle = window.adsbygoogle || []).push({});
/* ひとつだけの場合は以下
$(this).append(ad);
(adsbygoogle = window.adsbygoogle || []).push({});
*/
});
});
});
})(jQuery);