今回は、広告を横に並べて表示してみる。
テーブルを使うと簡単なのだが、レイアウトにテーブルを使うのもいかがなものかと思うので、今回は<div>とfloatを使う。
もちろん、広告でなくても良い、画像でも、文章でもOKだ。
wordpressでなくても利用できる。
広告を横に並べて表示する
広告を表示したい位置に以下の記述を貼り付けるだけ。
<!--▼PCのみ表示-->
<?php if (!wp_is_mobile()) :?>
<!--▼記事ページのみ表示-->
<?php if(is_single()): ?>
<div class="ad10">
<div style="float:left;">
広告のコード
</div>
<div style="float:left;">
広告のコード
</div>
<br clear="all">
</div>
<div style="clear:both;">
フロートの下のブロック
</div>
<!--▲記事ページのみ表示-->
<?php endif; ?>
<?php endif; ?><!--▲PCのみ表示-->
説明
<div class="ad10"></div>
書き込んだ広告全体の配置の設定を行う。
ad10は英数字なら何でもいい。
スタイルシートには.ad10{ここにスタイル}のように書き込む。
<div style="float:left;"></div>
左に回りこませる。
<br clear="all"></div>
回り込みを解除する。
スタイルシートの例
.ad10{ここにスタイル}
例)
.ad10{ margin: 10px 20px 30px 40px;}
この記述だと広告を表示したブロックの[上][右][下][左]に隙間が出来る。
上10px、右20px、下30px、左40px、に隙間が出来ることになる。
記事ページだけに表示したい場合
記事ページだけ表示したい部分を<?php if(is_single()): ?><?php endif; ?>で囲む。
<!--▼記事ページのみ表示-->
<?php if(is_single()): ?>
<!--▼広告を横並べ-->
<div class="ad10">
<div style="float:left;">
広告のコード
</div>
<div style="float:left;">
広告のコード
</div>
<br clear="all">
</div>
<div style="clear:both;">
フロートの下のブロック
</div>
<!--▲広告を横並べ-->
<?php endif; ?>
<!--▲記事ページのみ表示-->
パソコンとモバイルで表示を変えたい場合
記事ページでスマートフォンのみ表示する場合
<?php if (wp_is_mobile()) :?><?php endif; ?>でスマートフォンで表示したい部分を囲む。
<!--▼モバイルのみ表示-->
<?php if (wp_is_mobile()) :?>
<!--▼記事ページのみ表示-->
<?php if(is_single()): ?>
<div class="ad10">
<div style="float:left;">
広告のコード
</div>
<div style="float:left;">
広告のコード
</div>
<br clear="all">
</div>
<div style="clear:both;">
フロートの下のブロック
</div><?php endif; ?>
<!--▲記事ページのみ表示-->
<?php endif; ?>
<!--▲モバイルのみ表示-->
記事ページでパソコンだけに表示したい場合
<?php if (!wp_is_mobile()) :?><?php endif; ?>でパソコンで表示したい部分を囲む。
<!--▼PCのみ表示-->
<?php if (!wp_is_mobile()) :?>
<!--▼記事ページのみ表示-->
<?php if(is_single()): ?>
<div class="ad10">
<div style="float:left;">
広告のコード
</div>
<div style="float:left;">
広告のコード
</div>
<br clear="all">
</div>
<div style="clear:both;">
フロートの下のブロック
</div>
<!--▲記事ページのみ表示-->
<?php endif; ?>
<?php endif; ?><!--▲PCのみ表示-->
wordpressの条件分岐は便利だが、ウィジェットの中では使えないし、プラグインで広告を配置するような場合も利用不可。
でも、上手に利用すれば、広告を表示するだけでなく、画像を表示したりしてブログの表現力を上げることができる。
コメント