STINGER7がリリースされたということで別サイトで早速使ってみたのですが、困ったのがウィジェットの機能だけだとスマホではアドセンスが2つしか表示されないこと。
3つまで表示できるのに2つしか表示しないなんて控えめな真似は、守銭奴の僕にはできませんw
ということで今回の記事では、難しい作業は抜きで簡単に「スマホのh2見出し前に3つ目のアドセンスを表示させる方法」をシェアします。
簡単にできる方法を見つけたけど余白が…
ちょっとした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でブログをやるならパクりたい参考にしたい情報がたくさんあるので、お時間がある時にでも一度見ておくといいかもです。
▲特にこれめっちゃいいですよ!
それではまた!!
コメント