【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です。

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

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

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

アドセンス下の余白は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でブログをやるならパクりたい参考にしたい情報がたくさんあるので、お時間がある時にでも一度見ておくといいかもです。

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSSでかわいいバッジをつける方法を解説いたします。 バッジを作るだけなので拍子抜けするぐらいかんたんです。CSSがあんまりよく分からない方でもコピペで作れますので、お気軽に試してみてください。 HTML+CSSで作っていくので、WordPres...

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

それではまた!!

僕が行っているブログのカスタマイズ

初心者でもできた!「Simplicity」でカスタマイズしたこと6つ!

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

WordPress記事にYouTube動画を挿入しても読み込みが遅くならない方法

スポンサーリンク
たもトピ・大
たもトピ・大

シェアしていただけると励みになります

【STINGER7】スマホだけh2前にアドセンスを表示させる方法※余白修正版
この記事をお届けした
『たもトピ』の最新情報を、
いいねしてチェック!