皆さんこんにちは!
最近、アドセンスを合格しアフィリエントを
始める事ができました!
そこで色々カスタマイズしようと思い
商品リンクをいじろうとしましたが
ここで早速壁にぶち当たりました!
外部リンクのアイコンを消す事ができない!
原因をYahoo.知恵袋や検索エンジンで
調べても全然見つからない!
ほとんどの記事が同じCSSか似たようなCSSで
すべて試しても全く反映されないのです 泣
そこで今回
私が見つけた反映するCSSを紹介します!
◊この記事でわかる事!◊
・対処法
・外部リンクアイコン削除CSS
Rinkerの外部リンクアイコンとは?
アフィリエントの商品リンクを貼った際に
Amazonで探す
楽天市場で探す
Yahooショッピングで探す
の語尾にあるアイコンの事です!
こちらのアイコンを消す事で
見た目がスッキリします
また、よりリンク感がなくなり
気楽に読む事ができるので
クリック率を上げる効果もあります!
反映しない原因
色々調べて、はじめに試したCSSがこちら
テーマエディターの style.cssに貼りましたが
うまく反映されなかったです。
あまり反映しなかった理由
Blank がオレンジ色になっていたからです。
これはしっかり機能していないというサインらしく
いくら消したり、追加したりしても
この色になれば機能なしということになります。
調べ方
ます、「Amazonで探す」の上で右クリックし
一番下の「要素の詳細を表示」を開く
ソースを選択し、左側にある「Style.css]を開く
(上の「style.css」はテーマエディターのスタイルシートと同じものです)
ここで「/*外部リンクマーク削除*/」のコードを確認できます。
対処方法
ここで行うのが仮修正です!
先ほどの「要素の詳細を表示」で
「/*外部リンクマーク削除*/」のコードを消します。
そして「/*外部リンクアイコン*/」を貼ります。
コピペCSS
/* 外部リンクアイコン */
div.yyi-rinker-contents span.internal-icon{
display: none;/* 非表示 */}
引用参考ブログ なこラボ

先ほど私は仮修正と言いましたが
その意味は
この要素の詳細で変更してしっかり
商品リンクボタンに反映しているかだけの
確認ができるという意味です
つまり
バックアップをとらず
実際に修正をして反映しているか
していなかったら元に戻し、何が原因か調べられる
ということです。
この方法でコードが反映して入れば
正しく機能しています。
実際にコピペCSSを貼る場所
私の場合はテーマエディターのスタイルシートでは
うまく反映しなかったのでプラングインエディターの
Rinkerスタイルシートに貼りました
方法がこちら⬇️
変更後のアイコン
しっかり外部リンクのアイコンが消えています!
アイコンがあるのとないのとでは大分見栄えが変わったような気がします!
まとめ
・仮修正でコピペCSSが反映しているか確認
・テーマエディタースタイルシートではなく
プラグインエディターのRinkerスタイルシートに貼り付ける
外部リンクアイコンの削除方法を紹介しましたが
テーマエディターのスタイルシートに
こちらのCSS
div.yyi-rinker-contents a[target="_blank"]::after {content: none;
を貼りつけてしっかり反映することもあります。
私の場合うまく反映いなかったので
1週間かけてこの方法を見つけました。
ですので、2つのCSSはどちらも正しいと思いますが
もし初めのCSSが反映せず私のような問題に
悩んでしまった場合は今回紹介した方法を試してみてください!
最後まで読んでいただきありがとうございます!