悩む人下記の3つができなくて、困ってます。
①SWELLで、アドセンスを貼り付ける方法は？
②ディスプレイ広告の幅いっぱいから、デバイスごとで横長アドセンスを表示したい
③タイトル下やアイキャッチ下にも表示したい
あいうえおLIFE今日は「お悩み解決に役立つ内容」をお伝えしていきますね。
SWELL
ユーザーとして、カスタマイズにはこだわってきたので、ぜひ参考にしてください。
横長でデバイスごとのサイズ自動調整アドセンスのメリットは下記。
- クリック率の向上
- デザインを崩さない
当サイトでは、目次上のアドセンスの次に、「クリック率が高い」アドセンスの配置場所が本記事で紹介する「アイキャッチ下」。
スポンサーリンクをさりげなく入れるコードも紹介します。
どうぞ最後まで、お読みくださいね。
SWELLでアドセンスを貼る方法
Googleアドセンスから広告コードの取得方法
コードは、ウィジェットでも、記事内でも任意で可能。
あいうえおLIFE上記はシンプルで簡単ですよね。
「まだアドセンス合格してないよ！」という方は、下記の記事を参考にしてください。
WordPress管理画面から広告コードをSWELL設定へ
①に貼ったコードは、後述しますが「ショートコード：{ad}（←アドセンス表示しちゃうので、カッコの表記変えてます）」を記事編集画面で入力すると、呼び出すことができます。
目次の前後のアドセンスは、目に留まることが多いので、クリック率が高い印象。
記事内広告の呼び出し方は？
ショートコード：{ad}（←カッコの表記変えてます）を投稿編集画面で入力すると呼び出せます。
あいうえおLIFEもしくは、ショートコードブロック呼び出して、「ad」と入力することも可能。
目次の前後どちらに広告を出すか設定する方法は？
当サイトでは、目次の前と後ろ「両方」にアドセンスを入れています。
デバイスごとでサイズを自動調整する横長アドセンス
横長アドセンスのコード取得方法
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0123456789123456"
crossorigin="anonymous"></script>
<!-- SWELL目次下広告横長Respo -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0123456789123456"
data-ad-slot="0123456789"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
横長アドセンスコードのデフォルトは上記です。
広告コードの改変（合法）
あいうえおLIFE安心してください。
合法です笑。
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
間違えて、入力しないようにする。
以上、5ステップで横長アドセンスを、デバイスごとの切り替えコードに編集。
くろーむなんとか、ぼくでもできたよ。
取得した横長ディスプレイを編集したコード
<style>
.swellundertitle_responsive_1 { margin-top: 2em; width: 320px; height: 100px; }
@media(min-width: 500px) { .swellundertitle_responsive_1 { margin-top: 2em; width: 468px; height: 60px; } }
@media(min-width: 800px) { .swellundertitle_responsive_1 { margin-top: 2em; width: 728px; height: 90px; } }
</style>
<!-- swellundertitle_responsive_1 -->
<ins class="adsbygoogle swellundertitle_responsive_1"
style="display:inline-block";
data-ad-client="ca-pub-0123456789123456"
data-ad-slot="0123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>上記は、「margin-top」を指定したオリジナルから少し余白を調整したコード。
合法アドセンスコードで、PC・タブレット・モバイルに応じて、広告が横長で自動サイズ調整されます。
あいうえおLIFE上記のタブ切り替えで、デバイスごとの横長広告の変化を見てくださいね。
横長自動サイズ調整アドセンスをタイトル下やアイキャッチ下に表示
本記事で作成した、横長アドセンス自動サイズ調整コードを、タイトル下とアイキャッチ下に挿入する方法の解説。
くろーむオリジナルの呼び方が、とにかく長いよね。。
タイトル下【難易度】
あいうえおLIFE上記のブログで「SWELLのタイトル下に広告コード表示」させるテーマ開発者の了さんの記事があることを教えていただきました。
ただ、上記の記事のままのやり方だと注意が。
デバイスによって、サイズが調整されない「横長アドセンス」なので、PCにしかフィットしない仕様。
本記事のままに、実践してみてくださいね。
PHPコードいじるので、バックアップ必須。
<?php
/*
~ functions.phpにすでにあるコード ~
*/
//以下のコードを追加
add_action('swell_before_post_thumb', function( $post_id ) {
?>
<div class="widget widget_swell_ad_widget">
ここに広告コードをペースト
</div>
<?php
}); 
あいうえおLIFEfuction.phpの編集の仕方は、「WordPress管理画面→外観→テーマエディター」か、「FTPソフト」で行います。
上記の方法で、タイトルと、アイキャッチの間に、自動サイズ調整の横長アドセンス表示完了。
アイキャッチ下【難易度】
くろーむアイキャッチ下って、ウィジェットだと「記事上部」なんだね。
注意：ウィジェットに貼るときは、「タイトル下に広告表示コード」と異なり、＜style＞〜＜/script＞までコピペで大丈夫です（簡単に言うと、改変した合法コードのままでOK）
スポンサーリンクの付け方
よくある質問なので、お答えします。
- スポンサーリンクは必須？
-
必須ではありません。
なぜなら、Googleアドセンスの自動広告で出るときは、スポンサーリンクの明記はありません。
- もし、つけたい時は？
-
下記のコードをウィジェットにコピペする時に、1番上に書いてください。
<p style="text-align: center; font-size: 80%; color: #a9a9a9; padding-top:35px; margin-bottom:-15px;">sponsored link</p>
まとめ
- SWELLで、アドセンスを貼り付ける方法は？
- ディスプレイ広告の幅いっぱいから、デバイスごとで横長アドセンスを表示したい
- タイトル下やアイキャッチ下にも表示したい
上記3点を解説しました。
あいうえおLIFEさりげなく、アドセンスを横長でデザイン崩さずに表示できるようになりました。
くろーむちなみに、「横長アドセンスデバイスごと自動調整コード」は、どのテーマでも共通に使えます。
SWELLユーザーから、すべてのユーザーのブログ運営サポートに本記事が役立つと嬉しいです。
最後まで、お読みいただき、ありがとうございました！
