アフィリエイトのコードの貼り付け方法を教えてください！

アフィリエイト初心者です。
WordPress・cocoonテンプレートでブログを立上げ記事を投稿し、
その記事上にアフィリエイトコードを貼り付けようと苦戦しています。
（文字やボタンにhttps:のリンクを貼るのは簡単にできるのですが、）
下記の4通りでアフィリエイトコードを記事上に貼り付けたのですが、上手くいきません。

①ブログ上、アフィリエイトを貼りたい場所（文字）を選択
　⇒リンクの挿入⇒コードを貼り付け・・・・ブログを開きそこ（文字）をクリックするとエラー（入力間違いがないか確かめてください）が出る。

②ブログ上のアフィリエイトを貼りたい場所（文字）を選択</>HTML挿入
　⇒コード貼り付け・・・・（選択した）文字自体が消えてしまう。
　当然、ブログ上も何も表示されない。

③cocoon設定⇒テンプレート⇒新規追加⇒タイトル・内容（にコード貼り付け）を保存
⇒投稿記事を開く⇒テンプレートクリック
⇒さっき追加したタイトルを選択⇒[temp id=2]と表示される
⇒ブログURLを開き確認するも<amp-ad width='120' height='120' type='valuecommerce' data-sid='33●省略●22' data-pid='88●省略●33'></amp-ad>と表示され
クリックするも無反応（サイトが開かれない）

④cocoon設定⇒アフィリエイトタグ⇒新規追加⇒タイトル・内容（にコード貼り付け）を保存
⇒投稿記事を開く⇒アフィリエイトをクリック
⇒さっき追加したタイトルを選択⇒[affi id=4]と表示され
⇒ブログ開くも表示なし

ブログ記事内にアフィリエイトコード貼り付ける方法を教えてください。
宜しくお願いいたします。

質問者からの補足コメント

• アフィリエイトコードは、
  <amp-ad width='300' height='250' type='valuecommerce' data-sid='3603022' data-pid='887244792'></amp-ad>
  
  Wordpress　cocoon　編集画面
  　▲テスト▲
  　★[temp id=4]★
  　●[affi id=5]●
  
  補足説明
  　▲文字【テスト】を選択しリンク挿入で上記コードを貼り
  　★の間をクリックしテンプレート（予め上記コードを保存した）４を選択し
  　●の間にアフィリエイトタグ（予め上記コードを保存した）5を選択
  
  
  ブログの画面は、
  　▲テスト▲
  　★
  　<amp-ad width='300' height='250' type='valuecommerce' 同上省略'></amp-ad>
  　★
  　●●
  
  どこでも配置モードは、分かりません。

    補足日時：2021/07/15 14:15

• 前述のWordpress　cocoon　編集画面は、ビジュアル画面です。

    補足日時：2021/07/15 14:18

No.1 回答者： t_fumiaki 回答日時： 2021/07/15 12:42

作ろうとしているそのブログ、「どこでも配置モード」として記事投稿する様になってません？

だったら、やり方を代えないと出来ません。

アフィリエイトコード、見易くする為にenterキーにより改行が何箇所もあります。

「どこでも配置モード」でもhtmlが生成されるので、改行があると、<br />というhtmlの改行コードが付加されます。

アフィリエイトコード内のjavascriptなどに<br />という変なコードがあると動きません。

身に覚えがあるなら補足を。
対処方法を伝授します。

この回答へのお礼

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

アフィリエイトコードは、
<amp-ad width='300' height='250' type='valuecommerce' data-sid='3603022' data-pid='887244792'></amp-ad>

Wordpress　cocoon　編集画面は、下記の様になっています。
▲テスト▲
★[temp id=4]★
●[affi id=5]●

補足説明（▲文字【テスト】を選択しリンクを貼りました。
★の間をクリックしテンプレート（予め上記コードを保存した４）を選択しました。
●の間にアフィリエイトタグ（予め上記コードを保存した5）を選択しました。）


ブログの画面は、下記の様になっています。
▲テスト▲
★
<amp-ad width='300' height='250' type='valuecommerce' data-sid='3603022' data-pid='887244792'></amp-ad>
★
●●

どこでも配置モードになっているかどうかは、分かりません。
どこを開くと現在のモードが分かりますか？
また、変更方法がありましたら教えていただけますと助かります。

ご指導、宜しくお願いいたします。

お礼日時：2021/07/15 14:07

No.2 回答者： t_fumiaki 回答日時： 2021/07/15 16:14

AMPじゃないですか。

Accelerated Mobile Pagesの略称で、Webコンテンツを瞬時に読み込んで表示するためのフレームワーク（手法）のことです。

これを実装する為にはheadに記述追加し、さらに相応のjavascriptを入れる必要が有ります。

cssは全てhtmlソース内に入れ、外付けcssファイル参照は出来ません。
また、head内に入れるjavascriptは以下ですが、大元のブログhtmlを全部やり直さないと出来ません。


その広告、やめた方が良いです。
余りにも犠牲が多すぎる。
AMPは制約が多すぎて、「やーめた」と言う人が続出しています。

苦労の割りにメリットが無いからです。

以下がheadに追加する内容ですが・・・・。
--------------------------------------------------------------------------


<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></s …

この回答へのお礼

お忙しいところ、再度ご指導ありがとうございます。
ＡＭＰは、早くて良いと思ってAMPのコードを使いました。
しかし、ＡＭＰは、とっても難しい事だと教えて頂きましたので、
普通の広告タグ（コード）もあったのでそれを使い、
アフィリエイトタグに設定し、編集画面で設定し、ブログ画面上のその文字をクリックしたらそのサイトが開かれました。

つまり、普通の広告タグコードを使用し、
アフィリエイトタグを追加設定　⇒編集画面に設定　
という手順で良いのでしょうか？

お礼日時：2021/07/15 16:49

No.3 ベストアンサー 回答者： t_fumiaki 回答日時： 2021/07/15 19:19

ドーモ、それで良いと思います。

AMPにすると、通常htmlサイトとAMPサイトの2本作り、「AMPはこっちです」と、google向けに設定しないとイケナイので非常に厄介です。

AMPでは使え無いhtmlタグも沢山有ります。

高速表示と言っても、スマホだけの話で有って、高速表示するから広告で収益が上がる訳でも有りません。

通常広告で充分だと思います。

この回答へのお礼

分かりました。丁寧に教えて頂き、本当に助かりました。
ありがとうございました。

お礼日時：2021/07/16 01:40