wordpress 小技 広告横並び やや応用編・・

タイトル通りになりますが、私のサイトでやったことを書きたいと思います。以下の書き方を参考にさせていただきました。

 
<div style="text-align: left; font-size: 90%">スポンサーリンク<br>
<div>
<div style="display: inline-block; width: 300px; margin-bottom: 10px; vertical-align: top">
<!--左ここから-->

<!--左ここまで-->
</div>
<div style="width: 300px; margin-bottom: 10px; vertical-align: top" class="right-ads">
<!--右ここから-->

<!--右ここまで-->
</div>
</div>
</div>

<style>
.right-ads {
    display: inline-block;
}
@media screen and (max-width: 680px) {
.right-ads {
    display: none;
}
}
</style>
</style>

サイトの構成によると思いますが、私のサイトはアーカイブの記事とフッターの間が寂しいので広告を入れていますが、いまいちしっくりきませんでした。

300×250　4つでも大きいし多いと、しかし、以下のやり方でPC、タブレット、スマホと表示も分かれて良い感じになりました。もっと応用してやってみてください。

<style>
.right-adss, 
.right-adst {

    display: inline-block;
}
@media screen and (max-width: 1024px) {
.right-adss, 
.right-adst {

    display: none;
}
}
</style>
</style>

<div style="text-align: center; font-size: 90%">スポンサーリンク<br>
<div>
<div style="display: inline-block; width: 300px; margin-bottom: 10px; vertical-align: top">


300×250の広告(スマホ・タブレット方面）

</div>
<div style="width: 250px; margin-bottom: 10px; vertical-align: top" class="right-adss">


250×250の広告（PC側）


</div>
</div>
</div>

<br>
<br>

<div style="text-align: center; font-size: 90%">スポンサーリンク<br>
<div>
<div style="display: inline-block; width: 300px; margin-bottom: 10px; vertical-align: top">


300×250の広告（スマホ・タブレット方面）


</div>
<div style="width:250px; margin-bottom: 10px; vertical-align: top" class="right-adst">


250×250の広告（PC側）

</div>
</div>
</div>

レクタングルが２つでダブルレクタングル、に対してダブルレクスク。以上です。