Theme Naked Blog

Nakedのカスタマイズを紹介するブログ

広告などを横並びで配置する方法

カスタマイズ（Naked） カスタマイズ（一般）

この記事は、テーマNaked以外でもご利用いただけます。

広告などを文章内で横並びにする方法です。

実装図

PC

f:id:ftmaccho:20160523190759p:plain

このように横並びで配置することができます。

スマホ

f:id:ftmaccho:20160523191735p:plain

注意点

注意点としましては、

  • 広告の横幅のサイズは、最大で300pxまで（それ以上のものを貼ると、はみ出ます）
  • レスポンシブ設定にしていると、スマホのときに広告が縦並びになります。

Googleアドセンスなど一部の広告は、画面が広告で覆われることを推奨していません。

アカウント停止などされる場合などの可能性もあるため、そのあたりは自己責任でお願いします。（スマホサイズのときに右側の広告を消す方法を、その他のカスタマイズのところに書いています。）

カスタマイズ

カスタマイズは、

<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="display: inline-block; width: 300px; margin-bottom: 10px; vertical-align: top">
<!--右ここから-->

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

をご自身のブログの貼りたい位置（記事下など）にコピペしてください。

その後、「左ここから」「右ここから」の下の空行のところに、貼りたいHTMLを貼り付けてください。

以上でカスタマイズは終了です。

その他のカスタマイズ

全体をセンタリング

全体をセンタリングする場合は、コードの１行目の「left」を「center」にしてください。

スマホサイズのときに右側の広告を消す

スマホサイズのときに、右側の広告を消すことで、画面が広告で覆われることを防ぎます。

やり方はメディアクエリを使ってスマホサイズのときに消えるようにします。

<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>

これを貼ったら、同じように広告のHTMLを入れてください。