記事内に広告が含まれています。

広告を横に並べて表示

HTMLとスタイルシート ウェブサイト・ブログ作成
HTMLとスタイルシート
ウェブサイト・ブログ作成
この記事は約5分で読めます。

 今回は、広告を横に並べて表示してみる。

 テーブルを使うと簡単なのだが、レイアウトにテーブルを使うのもいかがなものかと思うので、今回は<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の条件分岐は便利だが、ウィジェットの中では使えないし、プラグインで広告を配置するような場合も利用不可。

 でも、上手に利用すれば、広告を表示するだけでなく、画像を表示したりしてブログの表現力を上げることができる。

コメント

タイトルとURLをコピーしました