IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

      2016/02/18  あとで読む   はてブする

アフィリエイト表示が切れている

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されないということがありました。

これはWordPressのテーマ「Stinger3」のcssの関係で表示されなくなっています。それの直し方を紹介します。

スポンサーリンク

 WordPressのテーマ「Stinger」だとCSSの関係で表示されない

AdSenseはmoreタグに表示するプラグインを入れています。詳しくは下の記事をあわせて読んでみてください▼

【関連】[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

 

アフィリエイト表示が切れている

WordPressのテーマ「Stinger3」で普通にAmazonアソシエイトやGoogle Adsenseを記事内に表示すると以上のようになります。

なぜなんだっ!と色々調べてみるとStinger3の公式ページのQ&Aに以下のことが書かれていました。

Q:「記事中」にアドセンスを入れましたが、スマホで見ると画像が半分位で切れてしまいます。

A:divタグのクラスのkizi内やkizi02内だとpaddingのせいでハミ出るので出す必要があります。

 

なるほど、そういうことか。ブログの記事はすべて<div class=”kizi”>内に入っているからpaddingが何%かかかっているというのです。

その中にGoogle AdsenseやAmazonアソシエイトを追加すると同じくpaddingが入り切れてしまうのです。

kizi-hyoji04

理由がわかったので、下のように変更してみました。

 

 記事の中にGoogle AdsenseやAmazonアソシエイトを追加する場合

kizi-hyoji06

上の図のように挟み込む手前で</div>で終了し。その後Google AdsenseやAmazonアソシエイトを追加。

その後の記事の続きは再び<div class=”kizi”>に入れてあげる、この方法をするとはっきりと表示されました。

kizi-hyoji07
↑サンプル画像です。上の方法にすると100%表示されました。

 

スポンサーリンク

最後に

WordPressのテーマ「Stinger3」のデフォルトの状態で、記事の中にGoogle AdsenseやAmazonアソシエイトを追加する時は、以上のように一度<div class=”kizi”>から出してあげて広告を入れ、記事の続きに<div class=”kizi”>で最下位してあげると100%表示されました。

つまり</div>+広告+<div class=”kizi”>が必要ということです。みなさん試してみて下さい。

広告が右や左にはみ出すときは下も読んでみてください▼

【関連】[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

【関連】記事中でもAdsenseをPCとスマホで切り替えOK!レスポンシブ広告ユニット

【関連】Google Adsense広告の右側がはみ出しているのを調整する方法

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - WordPress

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

WorePress
WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

WordPressの投稿画面で「B」を押すと、<b>タグでは無く&l …

WorePress
[WordPress]記事内の画像リンクを全部まとめて外す方法

WordPressにはデフォルトで、画像をリンクする設定になっています。スマホで …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

サーバ移転
ロリポップからシックスコア(sixcore)へサーバー移転に成功!どこに躓いたか

サーバをロリポップからシックスコアに移転しました。理由は別のサイトのPVが増えて …

WorePress
[WordPress]テキストリンクの色を変更→クリックされやすくなるらしい

リンクの文字の色を変えるとクリックされやすくなるそうです。僕はWordPress …

stinger3
WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法

本日Stinger2からStinger3に変更しました。その関係でStinger …

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …