レスポンシブ対応!縦と横のダブルレクタングルとスマホ表示の切換え

当サイトで記事下にアドセンス広告(レクタングル)を2つ並べて表示していますが、その並びは画面のサイズにより変化します。具体的には、表示画面の幅が2つの広告を横に並べて表示できる場合は横並びのダブルレクタングル、幅が狭ければ縦並びのダブルレクタングル。そして、スマホの場合は1つのみの広告を表示します。

以下、レスポンシブデザインのテーマ『Twenty Seventeen』でのカスタマイズ方法を記述しますが、他のテーマでも基本的な考え方は一緒ですので参考にしてください。

スポンサーリンク

アドセンス広告の準備

まず始めにアドセンス広告を3つ準備します。使用する広告サイズは、レクタングル(300×250)2つと、レスポンシブ1つです。この2つのレクタングルを並べて表示することでダブルレクタングルを形成し、スマホではレスポンシブのみを表示します。広告ユニットの名前を仮に以下のようにします。

  • ダブルレクタングル左用(レクタングル)
  • ダブルレクタングル右用(レクタングル)
  • スマホ用(レスポンシブ)

カスタマイズの流れ

  1. 「functions」PHPにコードを追加し、スマホとスマホ以外を判別できるようにします。
  2. スマホ時はレスポンシブの広告を1つ表示し、スマホ以外の時は2つのレクタングル広告を表示するPHPを新しく作成し追加します。
  3. 記事下に2で作成したPHPを呼び出しアドセンス広告を表示します。
  4. レクタングルを2つ横に並べるために十分な記事幅を確保します。
  5. 最後にダブルレクタングルの縦並びと横並びの切換えをCSSで設定します。

これからそれぞれを詳細に解説しますが、テーマをカスタマイズする際は子テーマを作成して行うことをお勧めします。

子テーマの作成はこちら⇒『子テーマの作成』

スマホとスマホ以外(PC・タブレット等)の分岐

パソコンとタブレットを同じ表示にし、スマホだけ別の表示にするため下記コードを「functions」PHPに追加します。

上記コードを「functions」PHPに追加したことにより、次の記述でスマホとスマホ以外の表示を切り替えることができます。

アドセンス広告を表示するPHPを作成(スマホ分岐)

ダブルレクタングル(レスポンシブ)
新しく追加した「double-rectangle」PHP

新しいPHPはメモ帳などで作成し追加します。ここではPHP名を仮に「double-rectangle.php」とし、作成したPHPに下記コードを追加します。コード内の以下の文字列は対象のアドセンスコードで置換してください。

  • ここにスマホ用のアドセンスコードを入れる
  • ここにダブルレクタングル左用のアドセンスコードを入れる
  • ここにダブルレクタングル右用のアドセンスコードを入れる

この「double-rectangle」PHPと上の「functions」PHPの変更により、スマホ時はレスポンシブの広告を1つ表示し、スマホ以外の時はレクタングル広告を2つ表示するという設定が完成します。

スポンサーリンク

記事下にアドセンス広告を表示する(Twenty Seventeen)

「content」PHPで「double-rectangle」PHPを呼び出し、記事下にアドセンス広告を表示させます。テーマ『Twenty Seventeen』の「content」PHPは、「template-parts」フォルダの「post」フォルダ内にあるので、「template-parts」フォルダごと子テーマにコピーして編集してください。

下記コードをコピーし下図の箇所に貼り付けます。これにより、記事ページでは常に記事下に先ほど作成したアドセンス広告が表示されることになる。(トップページや固定ページには表示されません)

 

ダブルレクタングル(レスポンシブ)
「content」PHPへ貼り付ける

記事幅の拡張(Twenty Seventeen)

レクタングルの1つの幅は小さいタイプで300pxあるので2つ横に並べるには最低でも600pxの幅が必要になります。テーマ『Twenty Seventeen』の記事幅は524pxしかないため、下記をstyle.cssに貼り付け幅を広げる必要があります。(下記コードで記事幅は694pxとなります。)

詳しくはこちら⇒『記事とサイドバーのカスタマイズ』

ダブルレクタングルの縦並びと横並びを設定(CSS)

最後にダブルレクタングルの縦並びと横並びの切換えをCSSで設定します。下記コードをコピーし、style.cssへ貼り付けます。このコードは上で設定した記事幅で調整しているので、記事幅を別に設定している場合は各自調整してください。

以上で記事下のダブルレクタングル表示設定は終了となります。好みの記事幅で上記CSSを調整し、綺麗にダブルレクタングルを表示しましょう。

シェアしてください!お願いしますorz

スポンサーリンク
クリックコメントを閉じる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください