ブログ

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

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

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

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

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

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

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

今回、私は2の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での広告切り替えができます。

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

ダブルレクタングル

一番簡単な方法はテーブルを作って表示させる方法です。この方法で表示はできますが、私は少し気になってしまうことがあります。

それが、テーブルの線・ボーダーです。線が気にならない人はいいですが、私はどうしても線が気になるので色々やってみました。

試行錯誤の結果、コードはこうなりました。

<table style="border:none">
<tr>
<td style="border:none">
広告コード
</td><td style="border:none">
広告コード
</td>
</tr>
</table>

style=”border:none”を付け足しただけです。特に難しいことはしていません。

これで、上手く表示できます。この記事下にもおそらくダブルレクタングルの表示がされているはずです。

関連記事

COMMENT

メールアドレスが公開されることはありません。