SWELL【横長アドセンスのサイズ変更を自動で】タイトル下やアイキャッチ下に

2021 11/08

2021.11.08 2021.11.08

下記の3つができなくて、困ってます。

①SWELLで、アドセンスを貼り付ける方法は？

②ディスプレイ広告の幅いっぱいから、デバイスごとで横長アドセンスを表示したい

③タイトル下やアイキャッチ下にも表示したい

あいうえおLIFE

今日は、上記のお悩みを解決します。

SWELLユーザーとして、カスタマイズにはこだわってきたので、ぜひ参考にしてください。

横長でデバイスごとのサイズ自動調整アドセンスのメリットは下記。

横長サイズ自動調整のメリット

クリック率の向上
デザインを崩さない

当サイトでは、目次上のアドセンスの次に、「クリック率が高い」アドセンスの配置場所が本記事で紹介する「アイキャッチ下」。

以前は、本記事でもピックアップした「タイトル下」で表示させていました（遅延読み込み実装のため、位置を変更）

スポンサーリンクをさりげなく入れるコードも紹介します。

どうぞ最後まで、お読みくださいね。

SWELLでアドセンスを貼る方法

アドセンス貼り付け方 — Business vector created by sentavio - www.freepik.com

Googleアドセンスから広告コードの取得方法

STEP

Googleアドセンス→広告→広告ユニットごと→ディスプレイ広告（推奨）か記事内広告を選択

STEP

名前→作成完了→広告コードを所定の箇所へコピペ

コードは、ウィジェットでも、記事内でも任意で可能。

下記で紹介する「SWELL設定」に入れておくのは必須です。

あいうえおLIFE

上記はシンプルで簡単ですよね。

「まだアドセンス合格してないよ！」という方は、下記の記事を参考にしてください。

【Googleアドセンス合格】PREP法は必須のスキル【低品質コンテンツ解決】

WordPress管理画面から広告コードをSWELL設定へ

STEP

WordPress管理画面→SWELL設定→広告コードに貼り付ける

STEP

記事内広告に貼る場合は①

①に貼ったコードは、後述しますが「ショートコード：{ad}（←アドセンス表示しちゃうので、カッコの表記変えてます）」を記事編集画面で入力すると、呼び出すことができます。

STEP

目次の前後に貼る場合は②

目次の前後のアドセンスは、目に留まることが多いので、クリック率が高い印象。

記事内広告の呼び出し方は？

ショートコード：{ad}（←カッコの表記変えてます）を投稿編集画面で入力すると呼び出せます。

あいうえおLIFE

もしくは、ショートコードブロック呼び出して、「ad」と入力することも可能。

目次の前後どちらに広告を出すか設定する方法は？

STEP

WordPress管理画面→外観→カスタマイズ→投稿・固定ページ→目次

STEP

タブの切り替えで「目次の前か後ろ」どちらに広告を出すか表示

当サイトでは、目次の前と後ろ「両方」にアドセンスを入れています。

デバイスごとでサイズを自動調整する横長アドセンス

アドセンスコード — Computer vector created by macrovector - www.freepik.com

横長アドセンスのコード取得方法

STEP

Googleアドセンス→広告→広告ユニットごと→ディスプレイ広告（推奨）→名前をつける→横長タイプを選択

STEP

名前→作成完了→広告コードを取得

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2309513344253588"
     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>

横長アドセンスコードのデフォルトは上記です。

広告コードの改変（合法）

レスポンシブ広告コードを修正する方法 - Google AdSense ヘルプ

STEP

上記のサイトに従って、下記コードを編集

あいうえおLIFE

安心してください。

合法です笑。

STEP

Google見本

<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>

STEP

下記画像の蛍光イエローの５カ所を編集（英数字で名前をつける）（.swell_responsive_1とかでも可）

STEP

ca-pub-以降の赤文字をディスプレイ横長広告で取得したコードから抜粋して編集

間違えて、入力しないようにする。

STEP

data-ad-slot=” ”の緑蛍光の部分をディスプレイ横長広告で取得したコードから抜粋して編集

以上、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

上記のタブ切り替えで、デバイスごとの横長広告の変化を見てくださいね。

横長自動サイズ調整アドセンスをタイトル下やアイキャッチ下に表示

本記事で作成した、横長アドセンス自動サイズ調整コードを、タイトル下とアイキャッチ下に挿入する方法の解説。

くろーむ

オリジナルの呼び方が、とにかく長いよね。。

タイトル下【難易度】

SWELLでタイトル下に広告を表示する方法【カスタマイズ】 | ブログのことなら『ぶろなび』

あいうえおLIFE

上記のブログで「SWELLのタイトル下に広告コード表示」させるテーマ開発者の了さんの記事があることを教えていただきました。

ただ、上記の記事のままのやり方だと注意が。

デバイスによって、サイズが調整されない「横長アドセンス」なので、PCにしかフィットしない仕様。

本記事のままに、実践してみてくださいね。

記事のタイトルとアイキャッチ画像の間に広告を表示させる方法 | WordPressテーマ SWELL

STEP

上記のSWELLマニュアルサイトに従っていきましょう

PHPコードいじるので、バックアップ必須。

「うわっ、こわ、訳わからん」となる方は、アイキャッチ下に挿入してみましょう。

STEP

下記のコードの「ここに広告コードをペースト」に事前に作成した、デバイスに自動調整するコードをコピペ

<?php

/* 
  ~ functions.phpにすでにあるコード ~
*/

//以下のコードを追加
add_action('swell_before_post_thumb', function( $post_id ) {
?>
<div class="widget widget_swell_ad_widget">
    ここに広告コードをペースト
</div>
<?php
});

STEP

PHPファイルアップ完了後はタイトル下とアイキャッチの間に広告入ります

あいうえおLIFE

fuction.phpの編集の仕方は、「WordPress管理画面→外観→テーマエディター」か、「FTPソフト」で行います。

上記の方法で、タイトルと、アイキャッチの間に、自動サイズ調整の横長アドセンス表示完了。

アイキャッチ下【難易度】

STEP

WordPress管理画面→外観→ウィジェット→記事上部

くろーむ

アイキャッチ下って、ウィジェットだと「記事上部」なんだね。

STEP

上記に、作成した自動サイズ調整の横長アドセンスコードをコピペ

注意：ウィジェットに貼るときは、「タイトル下に広告表示コード」と異なり、＜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ユーザーから、すべてのユーザーのブログ運営サポートに本記事が役立つと嬉しいです。

最後まで、お読みいただき、ありがとうございました！

URL Copied!

URL Copied!