Simplicity2|関連記事下の広告を色々なサイズに変更する方法

あくびねこ
Simplicity 2 の広告は、CTR などをしっかりと考慮した
バランスの良い配置になっています。

デザインを優先したカスタマイズになっておりますが、
カスタマイズの結果に関することは基本的に自己責任でお願いします。

スポンサーリンク

ビッグバナー(728 × 90)サイズの広告に変更する

まず最初に、関連記事下のデフォルト広告 336×280 を非表示にします。
非表示にする方法はこちらを参考にしてみてください。

無料Wordpress テーマ Simplicity 2 のカスタマイズです。この記事では関連記事下の広告と広告文を非表示にする方法を紹介しています。

WordPress サイドメニュー「外観」→「ウィジェット」へ移動します。
[S]PC用広告を選択し、
ウィジェットを追加」ボタンから投稿関連記事下に挿し込みます。

投稿関連記事下にウィジェットを挿入

続いて Google Adsense サイトから広告ユニットを選び、広告コードを貼り付けます。
ここでは 728 × 90 のいわゆるビッグバナーサイズに差し替えてみます。

ずれて表示されることのないよう
マージンを指定してビッグバナーの位置を調整してください。
出来ましたら「保存」をクリックします。

広告タグとマージンの設定

下図のようにスポンサーリンクの広告文と、ビッグバナーが表示されるのを確認します。

関連記事下のビッグバナー広告

モバイル表示への対応

ビッグバナーは主にPC表示用の広告ですので、
モバイル表示用に広告を別途用意する必要があります。

先ほどのやり方を踏まえながら、
ここではモバイル表示時にはレクタングル(中)サイズ 300 × 250 を表示させます。

WordPress サイドメニュー「外観」→「ウィジェット」に移動します。
[S]モバイル用広告を選択し、
ウィジェットを追加」ボタンから投稿関連記事下に挿し込みます。

モバイル用広告ウィジェット

Google Adsense サイトから 300 × 250 の広告コードを取得して貼り付けます。
投稿関連記事下内に2種類の広告用ウィジェットが入っている事を確認し、
保存」をクリックして編集を終えます。

これで、PC表示時にはビッグバナーを、
モバイル表示時にはレクタングル(中)を表示することが出来ます。

インフィード広告に変更する

インフィード広告は記事間など、コンテンツ間に配置する広告です。
適切に配置することで広告を自然に魅せることができます。

参考インフィード広告|5分でわかる意味と6つの攻略法
サイズ調節が可能な広告であり、
レスポンシブデザインに対応しているので利便性が高いです。

先ほどと同じく、まずは関連記事下の広告を非表示にします。

無料Wordpress テーマ Simplicity 2 のカスタマイズです。この記事では関連記事下の広告と広告文を非表示にする方法を紹介しています。

Google Adsense サイトへ移動し、
サイドバーの「広告の設定」→「広告ユニット」のページから

+新しい広告ユニット」をクリック。
インフィード広告を選択します。

広告ユニットの選択

デザイン選択の画面に移動したら

  • 上部の画像
  • 横の画像
  • 上部のタイトル
  • テキストのみ

この4つの中から好きなレイアウトのデザインを選択します。
今回は横の画像を選びました。
選択」をクリックして続きます。

広告デザインを選択

サイトレイアウトに合わせて
フォントや余白、イメージのサイズなど
広告を自由にカスタムすることができます。

インフィード広告デフォルトデザイン

ここではコンテナの幅を680pxに引き伸ばし、
イメージ画像の縦横比を1.91:1画像幅を50%に設定してみました。

レイアウトが決まりましたら、
ページ下部「保存してコードを取得」をクリックし
広告コードを取得します。

取得したコードを[S]PC用広告[S]モバイル用広告
それぞれのウィジェットに同じコードを貼り付けて投稿関連記事下に挿し込みます。
貼り付けましたら「保存」をクリックして編集を終えます。

それぞれのウィジェットにコードを挿入

最初は表示に少しだけ時間がかかるかと思います。
少し経ってから以下のように表示されることを確認してください。

PC広告表示

モバイル表示↓

モバイル広告表示

応用を利かせてさまざまなカスタマイズに挑戦してみてください。
ご覧頂き、ありがとうございました。