ダブルレクタングル・スマホ/PCの広告切り替えの簡単な方法

色々なサイトを巡回して私なりのダブルレクタングル表示の仕方と、スマホとPCでの広告の切り替えの方法を見つけました。

web上にはプラグインを利用した方法が多く、プラグインが好きじゃない私にはこの方法が一番楽でした。

まず先に、スマホとPCでの広告の切り替えの方法です。

スマホとPCでの広告切り替え

主に2通りの方法があります。

PHPを用いる
CSSのメディアクエリを用いる

今回、私は２のCSSを使ってみました。というのも、CSSの方が簡単だからです。

では実際にやっていきましょう。

まずはこの二つをstyle.cssシートの中に書きましょう。style.cssはテーマの編集にあるはずです。またはカスタマイズ（外観）の一番下の欄に追加シートというものがあるはずなので、そこに書き入れても良いです。

[css]@media screen and (min-width:768px){
.no_pc {
display: none !important;
}
}[/css]

[css]@media only screen and (max-width:767px){
.no_sp {
display: none !important;
}
}[/css]

これはメディアクエリと呼ばれるものです。（）内のサイズによって式を決めることができるというものです。

上の式で解説をすると、(min-width:768px)は768pxよりも大きいときに

.no_pc {
display: none !important;}

となります。display: noneは表示をしないというものです。

768pxよりも大きいと（＝つまりPCでサイトを訪れた時）.no_PCで指定したクラスの広告が表示されなくなります。

次に、以下のコードを広告表示させたいところに貼り付けます。私の場合はウィジェットに貼り付けています。

<div class="no_pc">
広告コードをここに入力(※スマホで表示させたい広告)
</div>

<div class="no_sp">
広告コードをここに入力（※PCで表示させたい広告）
</div>

これでスマホとPCでの広告切り替えができます。

では次に、ダブルレクタングルの仕方いついてです。