Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › AMPページで任意の場所にAMP用のグーグルアドセンスを設置する方法
- このトピックには8件の返信、1人の参加者があり、最後にN島により6年前に更新されました。
-
投稿者投稿
-
-
N島ゲスト
わいひらさん、こんにちわ。
simplicity2をずっと使わせていただいております。
いつもありがとうございます。
8時間くらい検索していますが、どうしても答えが見つからなかったので質問させていただけないでしょうか。
お忙しい中、初心者の質問で申し訳ありません。
現在、simplicity2の広告336×280と広告300×250を使用させていただいております。
またAMP(β機能)を有効にし、 AMP用AdSenseコード にもコードを入れております。
おかげさまで、普通に関連記事下にはAMP用の広告も出ることができております。
この状態でAMP用ページの投稿本文上にもAMP用のグーグルアドセンスを設置したいです。
諸々検索しておりますが、グーグルの広告ユニット下記が記載されておりました。
スクリプトを追加するには、次のコードをコピーして、AMP HTML の<head></head> タグの間に貼り付けます。
こちらはsimplicity2ですと、、AMP HTML はどちらになるのでしょうか?
送信させていただいたところエラーになりましたので、分割して送付させていただきます。
-
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の何をダウンロードして、どこに上記アドセンスコードを入れればよいかを教えていただくわけにはいかないでしょうか。
初期的な質問で申し訳ありませんが、かなり探しましたがピンポイントでやり方を記載しているサイトを見つけることができなかったので質問させていただきました。
-
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="ad-space ad-content-top"> <div class="ad-label">スポンサーリンク</div> <div class="ad-responsive"> ここに広告コード </div> </div>
カスタマイズ後の状態は下記のとおりです。
<div class="ad-space ad-content-top"> <div class="ad-label">スポンサーリンク</div> <div class="ad-responsive"> ここに広告コード </div> </div> </header>
広告コードは、ご提示されている 2 つの広告コードのどちらでも上手くいくはずです。
●ステップ 3 : CSS で調整●
必要であれば、以下の CSS で上下の余白を調整します。
.ad-content-top { margin: 40px 0; }
-
Akiraゲスト
-
N島ゲスト
Akiraさん
お世話になります、
お忙しいところご回答ありがとうございます。
こちら早速試したところ、AMPテストページでは表示されていますが、実際にスマホからみるとやはり表示されないのですよね。
例えばこのページを含めず全般なのですが、何が問題なのでしょうか?
AMPテストページもタイトル上も表示されているようです。
-
Akiraゲスト
AMP ページで広告は表示されています。
https://daihametu.com/2597?amp=1
ただ、広告が中央寄せになっていないので、下記の CSS があるといいように感じました。
.ad-space { text-align: center; }
ちょっと気になったので念のために申し上げておくと、スマホで見るページ = AMP ページというわけではありません。
-
N島ゲスト
Akiraさん、ありがとうございます。
スマホ=AMPだと思い込んでおりました。
自動広告がうまくスマホ画面からでも入ってくれるようになりました。
お忙しいところありがとうございました。
ちなみに上記のad-spaceの張り付け場所はどちらになりますでしょうか?
`<div class="ad-space ad-content-top">
<div class="ad-label">スポンサーリンク</div>
<div class="ad-responsive">
ここに広告コード
</div>
</div>`こちらの上に記載しましたら文字だけ反映されてしまいました。
本当に初心者で申し訳ありません。
-
Akiraゲスト
AMP はモバイル端末でしか出てこないので、慣れないうちは混乱してしまいますよね。仕様そのものが複雑で面倒ですし。
以下の CSS は、子テーマの amp.css に追加します。
.ad-space { text-align: center; }
-
N島ゲスト
Akiraさんありがとうございます。
やってみますね。
子テーマのamp.css 内にはなにも記載されていなかったのでそのまま貼り付けてみます。
ご丁寧に何度もありがとうございました。
-
-
投稿者投稿