【STINGER7】スマホだけh2前にアドセンスを表示させる方法※余白修正版

スポンサーリンク
本ページには広告が含まれています

トップ

STINGER7がリリースされたということで別サイトで早速使ってみたのですが、困ったのがウィジェットの機能だけだとスマホではアドセンスが2つしか表示されないこと。

3つまで表示できるのに2つしか表示しないなんて控えめな真似は、守銭奴の僕にはできませんw

 

ということで今回の記事では、難しい作業は抜きで簡単に「スマホのh2見出し前に3つ目のアドセンスを表示させる方法」をシェアします。

※今回の方法はSTINGER7以外のバージョンでは試してません

 

スポンサーリンク

簡単にできる方法を見つけたけど余白が…

ちょっとしたCSSならともかく、僕には条件分岐の設定なんて出来るわけがないので、ひたすらググりましたw

そこで見つけたのが以下の参考サイトの記事。

※参考サイトの記事が消えてしまってました…

 

コピペで実装できると書いてあるだけあって僕にも出来そう。

本当に有難いと思いながらやってみたところ…

 

アドセンス①

たしかにスマホのh2前にだけアドセンスが表示されたのですが、アドセンスが見出しと引っ付いてしまっているので見た目がかなり悪いです。

 

アドセンスの下に少し余白を入れるだけなので、分かる人にはなんてことない問題なのでしょうが僕には分からない(;´Д`)

ということでブログ友達で、いつもお世話になっているokutani氏(@okutani_t)に相談してみたところ…

 

アドセンス②

あっという間に解決しましたw

もうokutani氏がいる東京のほうに足を向けては寝れませんです。はい。

 

ということでコードはこちら!

まずは以下のコードを「functions.php」の1番下に貼り付けてください。

子テーマを使っている人は、子テーマの「functions.php」の1番下に貼ればOKです。

 

function add_ads_before_1st_h2($the_content) {
  if (is_single()&&st_is_mobile()) {
    //広告(AdSense)タグを記入
    $ads = <<< EOF
<div class="mb10">
【アドセンス】
</div>
EOF;
    $h2 = '/<h2.*?>/i';//H2見出しのパターン
    if ( preg_match( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      $the_content  = preg_replace($h2, $ads.$h2s[0], $the_content, 1);//最初のH2を置換
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

【アドセンス】の部分にはご自身のアドセンスコードを貼り付けます。

【】←これは消してください

 

次に「style.css」に以下のコードを貼り付けます。これも子テーマに貼り付ければOK。

 

.mb10 {
  margin-bottom: 20px;
}

アドセンス下の余白は20pxの数字を変えれば調節できます。

 

スマホのアドセンスにはレスポンシブ広告がおすすめ!

スマホの画面もどんどん大きくなってきていますので、300×250より大きいサイズでも表示できるようになっています。

 

とはいえ、全ての人のスマホで336×280サイズが見切れずに表示されるわけでもないですから、スマホ用のアドセンスにはレスポンシブ広告ユニットを使うのがおすすめです。

レスポンシブであれば見る人の画面の大きさに応じて、最適なサイズの広告を表示してくれます。

 

レスポンシブ

これまで使ったことがない人は、アドセンスで新しい広告ユニットを作る際に、レスポンシブを選んであげればOKです!

関連 アドセンスでレスポンシブ広告を設置してみたよ!【simplicity】

 

STINGER7でレスポンシブ広告を使うときの注意点

STINGER7のウィジェット画面にある「Googleアドセンスのスマホ用300px」にレスポンシブ広告を貼れば、h2見出し前以外の2つのアドセンスもレスポンシブ表示になりますが、これはPCサイドバー上にも適用されるので注意が必要です。

 

アドセンス③

レスポンシブにすると、PCサイドバー上にはこんな感じで300×600のラージスカイスクレイパーが表示されます。

僕はサイドバーに300×250じゃ目立たないのでこっちの方がいいと思っているのですが、気になる方はレスポンシブを使わずに300×250のままにしてください。

 

まとめ

参考サイトとokutani氏のおかげで、スマホにも3つアドセンスが表示されるようになったので本当に感謝しています。

 

okutani氏のブログには、WordPressでブログをやるならパクりたい参考にしたい情報がたくさんあるので、お時間がある時にでも一度見ておくといいかもです。

CSSでリンク横に「参考・LINK」バッジをつけてみよう | vdeep
こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSSでかわいいバッジをつける方法を

▲特にこれめっちゃいいですよ!

 

それではまた!!

 

関連 プラグインでアドセンスを記事毎に非表示にして代替広告を貼る方法

関連 僕がブログアフィリエイトで稼ぐために意識しているコツとか考え方

スポンサーリンク
カスタマイズ
\この記事をSNSでシェア/
この記事を書いた人
たもつ

福岡市在住。86年生まれ。2014年にうつになり失業。そこから会社に属さない生き方を目指してブログを始め個人事業主に。現在はホームページ制作などクライアントワークにも挑戦中。お仕事のご依頼受け付けてます。詳しくはプロフィールページをご確認ください。

\たもつをフォローする/
たもトピ

コメント

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