AMPページで任意の場所にAMP用のグーグルアドセンスを設置する方法

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも AMPページで任意の場所にAMP用のグーグルアドセンスを設置する方法

このトピックには8件の返信が含まれ、1人の参加者がいます。5 ヶ月、 1 週前 N島 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59925 返信

    N島

    わいひらさん、こんにちわ。

    simplicity2をずっと使わせていただいております。

    いつもありがとうございます。

    8時間くらい検索していますが、どうしても答えが見つからなかったので質問させていただけないでしょうか。

    お忙しい中、初心者の質問で申し訳ありません。

    現在、simplicity2の広告336×280と広告300×250を使用させていただいております。

    またAMP(β機能)を有効にし、 AMP用AdSenseコード にもコードを入れております。

    おかげさまで、普通に関連記事下にはAMP用の広告も出ることができております。

    この状態でAMP用ページの投稿本文上にもAMP用のグーグルアドセンスを設置したいです。

    諸々検索しておりますが、グーグルの広告ユニット下記が記載されておりました。

    スクリプトを追加するには、次のコードをコピーして、AMP HTML の<head></head> タグの間に貼り付けます。

    こちらはsimplicity2ですと、、AMP HTML はどちらになるのでしょうか?

    送信させていただいたところエラーになりましたので、分割して送付させていただきます。

  • #59926 返信

    N島

    また、single-amp

    amp-content

    functions.php

    あたりを親テーマからダウンロードしてみましたが、置き場所が分かりませんでした。

    また、このAMP用のアドセンスを投稿本文上に設置するためにはどこにamp用のアドセンスコードを貼ればよろしいのでしょうか?

    h2を使用していなかったため、教えていただけないでしょうか。

    <amp-ad
    width=300
    height=250
    type="adsense"
    data-ad-client="ca-pub-1234567891234567"
    data-ad-slot="1234567890">
    </amp-ad>
    

    こちらか

    <amp-ad
    layout="fixed-height"
    height=100
    type="adsense"
    data-ad-client="ca-pub-1234567891234567"
    data-ad-slot="1234567890">
    </amp-ad>

    こちらに自分の番号のca-pub-とdata-ad-slotを上書きしたものを挿入すればいいと思っております。

    simplicity2の子テーマに親テーマからAMPの何をダウンロードして、どこに上記アドセンスコードを入れればよいかを教えていただくわけにはいかないでしょうか。

    初期的な質問で申し訳ありませんが、かなり探しましたがピンポイントでやり方を記載しているサイトを見つけることができなかったので質問させていただきました。

  • #59927 返信

    Akira

    投稿本文上とは、通常ページの「投稿本文上ウィジェット」(アイキャッチ画像上のウィジェットエリア)と同じ場所でいいでしょうか?

    カスタマイズは 3 ステップで終わります。

    ●ステップ 1 : amp-content.php をコピペ●

    まず、 FTP ソフトなどを使い、子テーマフォルダ直下に親テーマにある amp-content.php をコピペします。

    ●ステップ 2 : 広告を設置●

    子テーマに設置した amp-content.php を開き、以下の HTML を探します。

    </header>

    Simplicity 2.6.7 であれば、 31 行目に上記の HTML があります。この上記 HTML の上の行に、以下の HTML を追加します。

    <div class=&quot;ad-space ad-content-top&quot;>
        <div class=&quot;ad-label&quot;>スポンサーリンク</div>
        <div class=&quot;ad-responsive&quot;>
            ここに広告コード
        </div>
    </div>

    カスタマイズ後の状態は下記のとおりです。

      <div class=&quot;ad-space ad-content-top&quot;>
          <div class=&quot;ad-label&quot;>スポンサーリンク</div>
          <div class=&quot;ad-responsive&quot;>
              ここに広告コード
          </div>
      </div>
    </header>

    広告コードは、ご提示されている 2 つの広告コードのどちらでも上手くいくはずです。

    ●ステップ 3 : CSS で調整●

    必要であれば、以下の CSS で上下の余白を調整します。

    .ad-content-top {
      margin: 40px 0;
    }
  • #59928 返信

    Akira

    あー…。 HTML エンティティが変換されていない。

    ステップ 2 の HTML は、 notepad.pw に貼り付けました。

    https://notepad.pw/share/k22mnxkf7

  • #59929 返信

    N島

    Akiraさん

    お世話になります、

    お忙しいところご回答ありがとうございます。

    こちら早速試したところ、AMPテストページでは表示されていますが、実際にスマホからみるとやはり表示されないのですよね。

    例えばこのページを含めず全般なのですが、何が問題なのでしょうか?

    https://daihametu.com/2597

    AMPテストページもタイトル上も表示されているようです。

  • #59930 返信

    Akira

    AMP ページで広告は表示されています。

    https://daihametu.com/2597?amp=1

    ただ、広告が中央寄せになっていないので、下記の CSS があるといいように感じました。

    .ad-space {
      text-align: center;
    }

    ちょっと気になったので念のために申し上げておくと、スマホで見るページ = AMP ページというわけではありません。

  • #59931 返信

    N島

    Akiraさん、ありがとうございます。

    スマホ=AMPだと思い込んでおりました。

    自動広告がうまくスマホ画面からでも入ってくれるようになりました。

    お忙しいところありがとうございました。

    ちなみに上記のad-spaceの張り付け場所はどちらになりますでしょうか?

    `<div class="ad-space ad-content-top">
    <div class="ad-label">スポンサーリンク</div>
    <div class="ad-responsive">
    ここに広告コード
    </div>
    </div>`

    こちらの上に記載しましたら文字だけ反映されてしまいました。

    本当に初心者で申し訳ありません。

  • #59949 返信

    Akira

    AMP はモバイル端末でしか出てこないので、慣れないうちは混乱してしまいますよね。仕様そのものが複雑で面倒ですし。

    以下の CSS は、子テーマの amp.css に追加します。

    .ad-space {
      text-align: center;
    }
  • #59950 返信

    N島

    Akiraさんありがとうございます。

    やってみますね。

    子テーマのamp.css 内にはなにも記載されていなかったのでそのまま貼り付けてみます。

    ご丁寧に何度もありがとうございました。

返信先: AMPページで任意の場所にAMP用のグーグルアドセンスを設置する方法
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)