広告を横に並べて表示

公開日: : 最終更新日:2014/08/20 広告を入れるぞよ ,

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

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

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

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

WordpressテーマSimplicity

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。  見た目はごくシンプルなW

記事を読む

wordpressテーマSTINGER3カスタマイズ

STINGER3のスマートフォン表示で広告が途中で切れるを解決

 STINGER3で広告を表示すると広告が半分に切れたりする。  プラグインやウィジェットを使

記事を読む

wordpressに広告を表示する

トップページやアーカイブページの任意の記事の下に広告を入れる

 トップページやアーカイブページに複数の記事が表示されるように設定している場合に、任意の記事の下

記事を読む

wordpressに広告を表示する

記事の途中で広告を入れるプラグイン

 wordpressで記事の途中で広告が入っているのを見たことがあると思う。  実はこのサイト

記事を読む

wordpressに広告を表示する

記事タイトルの上に広告を表示する・wordpressテーマSTINGER3

 wordpressテーマSTINGER3には、広告表示用のウィジェットが付いている。  でも

記事を読む

wordpressに広告を表示する

プラグインを使わずにWordPressの記事の中に広告を入れる方法

 Wordpressの単独記事の中に広告などを入れる場合方法はいくつかある。  今回はプラグイ

記事を読む

Message

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


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑