【AMP化】rinker(リンカー)をAMPサイトに対応させる方法

ガジェット

Googleでの検索流入を増やすためにサイトのAMP化を行い、読者も少しずつ増え始めました。

しかし一方で商品紹介プラグイン「rinker」はAMPに対応しておらず、売り上げが伸びない…

調べていたところrinkerのAMP化対応について断片的な情報があったので集めてまとめました!

サイトに広告を掲載してお小遣いが稼げる!【A8.net】

スポンサーリンク

AMP用コードの貼り付け

WordPressのAMP対応を本気で考えてみた | Webクリエイターな備忘録

こちらのコードを「外観>コードエディター」でCocoon Childの「amp.css」最下段にコピペします。

これだけではボタンの色がすごいため、AMP化する前のサイトにボタンの色を合わせておきましょう。

Chrome拡張機能「ColorPick Eyedropper」をサイトで起動、ボタン上でクリックして色コードをコピー。

デフォルトでの色コードは以下の通りです。

  • amazonlink:#F6A306
  • rakutenlink:#CF4944
  • yahoolink:#51A7E8

ボタンの色は変わりましたが、kindleや追加ボタンが反映されていないためそちらも追加しましょう。

ショップボタンのCSSをコピー、それぞれのボタンの名称に書き換え、同じように色コードを変更。

  • kindle:amazonkindlelink(#666666)
  • カスタムボタン1:freelink1(#4072B3)
  • カスタムボタン2:freelink2(#)

現在はパソコン版でもボタンが縦に並んでしまいまだ見にくいですが、以前に比べてだいぶマシに。

様子を見つつ、体裁を整える方法についても調べつつまとめていきたいと思います!

サイトに広告を掲載してお小遣いが稼げる!【A8.net】

ブログに関する記事

https://itsuki-campuslife.com/net-blog-wordpressplugin/
https://itsuki-campuslife.com/net-blog-tool/

コメント

タイトルとURLをコピーしました