LuxeritasでRinkerを使う時につまずいたこと。

楽天のアフィリエイトのデザインは好きなんですけど、やっぱり何種類かのショップを一緒に並べたい時もあるし、品物が楽天にない時もあるなあと思って、プラグインの「Rinker」も使い始めました。

楽天、amazon、Yahooショッピングなどへのリンクが綺麗に手早く設置できます。

編集画面でタグがずらーーーっと並ぶことがなくなったので、リライト作業もしやすくなりました。

今回はこちらを導入する時につまずいたことと、その解決方法についてシェアします。

この記事は、Luxeritasを使用している方向けの、Rinkerの表示から外部リンクマークを外しデザイン崩れを修正する方法をまとめたものです。

同じことで悩んでいる方のヒントになったらいいなーと思います。

　amazonのPA-APIについては記事の下の方にあります。

目次か、こちらからどうぞ。

PA-API 5への対応についてはこちらにまとめました。

Amazon Product Advertising API version 5.0 (PA-API 5.0)へのアップグレード：Rinker

「PA-API 5.0へのアップグレード」とはどういうことなのか❓　初心者の方向けの記事です。

プラグイン：Rinker
amazonのPA-API問題
1. Rinkerでの対処法
  1. amazon：リンクの動作確認ツールの使い方

プラグイン：Rinker

▼　Rinkerのダウンロードはこちら

Rinkerベーシック - rinker - BOOTH

商品管理プラグインRinkerのベーシック版です。利用規約など詳細はこちらをご確認くださいサポートについてはにて開発支援をくださった方にのみ行っています。 yyi-rinker-1.4.10.zipはtarget="_blank"を残したバージョンです。

▼　Rinker作成者・やよい様のブログに詳しい使い方などが書かれています。

Rinker（リンカー）ショートコード属性

デフォルトのショートコードと属性デフォルトではのような形で挿入されますが、ショートコードに属性を追加することができます。属性の種類これらの属性を設定すると、保存されているデータを強制上書きして表示します。（保存さ

LuxeritasにRinkerを導入すると外部リンクのマークが出て…

外部リンクのマークはあるほうが好きなんですけど、それがRinker内のボタンにもできてデザインが壊れてしまう問題に悩まされました。

こういう感じでamazonと楽天のボタンの中に外部リンクマークができて、Yahooのにはなぜかマークはないんですけどボタンは大きくなってしまいました。

Rinkerのカスタマイズの記事をいくつか確認しましたが、こんな例はみつからず、どうすればいいのか…。…。

試しにデザインをお借りして当てはめてみても、

これはfor men様：Rinkerのカスタマイズ！デザインをシンプルにしてみるのSANGO風デザインです。

やっぱりこうなってしまうのです。。

NAZE…？？？

誰か〜〜〜…

いろいろなワードでねちねちと検索を続けた結果、Luxeritasだけでこうなるということや、そのための解決方法がこちらにありました。

Luxeritas の外部リンクアイコンを、特定のURLへのリンクから外す方法

Luxeritas で設定した外部リンクアイコンを、特定のURLへのリンクから外す方法

なるほど！！と思い、さっそくここに書かれていた方法を実行しました。

プロトコルをつけるつけないがよくわからなかったので、ふたつとも追加CSSに記入して、外部リンクの設定はもともとそうだったのでそのままに。

これで消えるやろ…と思っていました。

結果…まさかの変化なし。

もしかしたらアップデートなどで仕様が変更になっているのかもしれませんが、よくわかりません。

だけどここまでヒントをいただけたら、あとは自分でなんとかできるような気がしてきました！

ほんとうにありがとうございます(●´◒`●)

気を取り直していつものようにさっそくRinkerのソースコードに目を凝らすと…

Rinkerのソースコード

<div class=”yyi-rinker-detail”>
<div class=”credit”>created by <a href=”https://oyakosodate.com/rinker/” rel=”nofollow noopener” target=”_blank” class=”external”>Rinker</a><span class=”ext_icon”></span></div>

<div class=”brand”>会社名</div>
<div class=”price-box”><span title=”” class=”price”>¥値段</span>
<span class=”price_at”>(日付と時刻;Amazon調べ-</span><span title=”注意事項”>詳細)</span>
</div> </div>

<ul class=”yyi-rinker-links”>
<li class=”amazonlink”>
<a href=”アマゾンボタンのリンク rel=”nofollow” target=”_blank” class=”yyi-rinker-link yyi-rinker-tracking” data-click-tracking=”amazon タイトル”>
Amazon</a><span class=”ext_icon”></span>
</li>

<li class=”yahoolink”>
<a href=”ヤフーのリンク rel=”nofollow” target=”_blank” class=”yyi-rinker-link yyi-rinker-tracking external” data-click-tracking=”yahoo タイトル”>
<img src=”// …/images/trans.png” class=”lazy” data-src=”画像” height=”1″ width=”0″ border=”0″>
<noscript><img src=”リンク” height=”1″ width=”0″ border=”0″></noscript>Yahooショッピング</a>
</li>

</ul>
</div>
</div>
</div>

というように、classの名前が違っていることに気づきました。

先のブログで教わったタグは以下のものです。

▼プロトコルを指定する場合（URLに http: https: をつける)
.external[href^="https://www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.external[href^="https://hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}
valuecommerceのリンクもあるなら、それも http 以下の部分を書き換えて追加してください。

▼プロトコルを指定しない場合(URLに http: をつけずに //ドメイン名にしたいとき)
.external[href*="www.amazon.co.jp"] ~ span.ext_icon::after{content: none;}
.external[href*="hb.afl.rakuten.co.jp/hgc"] ~ span.ext_icon::after{content: none;}
^を*に変えて、ドメインから始める形にします。

引用：やるぞう様：Luxeritas の外部リンクアイコンを、特定のURLへのリンクから外す方法

画像の部分とYahooショッピングのボタンにだけもともと外部リンクマークがありませんが、

“yyi-rinker-tracking external”

というクラス名が共通しているからかも。

クラスの名前を変更して追加すればいいのでは…、と考えました。

プロトコルのことがよくわからないので、二つとも書き換えて追加。

するとついに…

外部リンクのマークを消すことに成功しました！

そしてデザイン崩れも直りました！ヤッターーーー✨

Rinkerへのリンクだけ外部リンクのマークをつけたままにしました。

刀剣乱舞二周年記念祝画【書籍】

created by Rinker

ニトロプラス

▲ こちらは実際に作成したリンクです。すこしデザインも変更しました。

以下にまとめます。

解決方法

Rinkerで作ったリンクを貼ったページから「カスタマイズ＞追加CSS」を開いて、プレビューしながらお試しください。これで直らない時は…スミマセン！

これは「Luxeritasを使用していて外部リンクが以下のようになっている方が、Rinkerの表示から外部リンクマークを外しデザイン崩れを修正するためのもの」です。

解決方法

以下をCSSに追加する。

.yyi-rinker-tracking[href^=”https://www.amazon.co.jp”] ~ span.ext_icon::after{content: none;}
.yyi-rinker-tracking[href^=”https://hb.afl.rakuten.co.jp/hgc”] ~ span.ext_icon::after{content: none;}
.yyi-rinker-tracking[href*=”www.amazon.co.jp”] ~ span.ext_icon::after{content: none;}
.yyi-rinker-tracking[href*=”hb.afl.rakuten.co.jp/hgc”] ~ span.ext_icon::after{content: none;}

無事に整えられたら…Rinkerにはデザインを変えるためのショートコードも用意されているので、いろいろ試してみるのも楽しいです。（とっても簡単！）

Rinkerショートコード一覧

https://oyakosodate.com/rinker/shortcode/

なぜかコードが違うパターンもあるようだ…？（2020年10月追記）

別のブログを開設してそこにRinkerを設置したところ、上記のタグを書き入れても外部リンクマークが出るようになってしまいました。

しかも、一番最後のボタンにだけ。

バージョンが違うからかな？とも思いましたが、このブログのRinkerとあちらののバージョンは同じですし、デザインも同じもの。

何が違うのかなかなかわからず、放置していたのですが。。。

やっぱり諦めきれずにソースを見てみると、向こうのブログではなぜかクラス名が違うんです❣️

Rinkerのソースコード

<li class=”rakutenlink”>
<a href=”楽天のリンク” rel=”nofollow” class=”yyi-rinker-link“>楽天市場で探す</a><span class=”ext_icon”></span>
</li>

yyi-rinker-tracking　じゃなくて、　yyi-rinker-link　となっています。

なので、もし上にあるタグをCSSに追加しても変化がなかったり、または一部に残っている場合は、ソースコードを見てクラス名を確認しましょう。

私の場合は以下を書き入れて外部リンクを外すことができました。

解決方法

以下をCSSに追加する。

.yyi-rinker-link[href^=”https://www.amazon.co.jp”] ~ span.ext_icon::after{content: none;}
.yyi-rinker-link[href^=”https://hb.afl.rakuten.co.jp/hgc”] ~ span.ext_icon::after{content: none;}
.yyi-rinker-link[href*=”www.amazon.co.jp”] ~ span.ext_icon::after{content: none;}
.yyi-rinker-link[href*=”hb.afl.rakuten.co.jp/hgc”] ~ span.ext_icon::after{content: none;}

ちなみに、このブログのRinkerのタグはyyi-rinker-trackingのままです。

この辺りの仕組みはわからないのですが、とりあえず消すことができたのでOKです。

Rinkerの編集画面について

あんまりいないでしょうけど…私みたいに

？

Rinkerの編集画面って「使い方」によく出てくるけど…どこや…？

という方のために、蛇足ですが買いておきますね。。

リンクを編集する画面は「ダッシュボード＞商品リンク」にあります。

使い方を説明されているページでよく出てくる編集画面は、ここからしか開けないんですね。。なんとなく、投稿画面でショートコードを入力する直前にも開くものだとばかり思っていました。。

記事を投稿する画面から作ったリンクは編集はできないようです。そのまま記事に反映されます。

編集してから投稿したい場合には「新規追加」からリンクを作り、カーソルを合わせると出てくる「編集｜クイック編集｜ゴミ箱へ移動」から希望の処理を行いましょう。

もちろん作成済みのリンクをここで編集することもできます。

ここから自由ボタンの設定もできます。この機能が使いたくて探してしました。

タイトルリンクをamazonと楽天どちらにするかも選べますし、どちらかに商品がない場合にボタンを非表示にすることもできるようです（一番下の項目）。

なんて簡単で便利…✨

amazonのPA-API問題

さてさて。

amazonのPA-APIのことがあってカエレバを使えないと考えて使用をやめたんですけど、実のところ結局なにが問題なのかはわかっていませんでした。とにかく検索ができないんだな？？とだけ理解していました。

でもやっぱりリンクを可愛く並べて貼りたい、ああいうサービス使いたい、という思いがあり、しっかり調べてみることにしました。

Rinkerでの対処法

するととてもわかりやすく、しかも対処方法までのっている記事を見つけました。

AmazonアソシエイトのPA-API対応方法｜もしも経由の場合は注意しよう！

AmazonアソシエイトのPA-API対応方法についてご紹介しています。もしもアフィリエイトを経由してAmazonを売り上げている方は、設定を一度見直してみましょう。

カエレバの場合もPA-APIを通すこともできるという記述を見た気がしましたが、カエレバのところに書いてある説明がよく理解できてないし、もしもアフィもやってないし、自分には荷が重いことかも…と思って最初から読まずに諦めてました。。

amazonのアクセスキーIDとシークレットキー、トラッキングIDなどをきちんと設定したのち、Rinkerでどのように設定すればPA-APIを経由したと見なされるのかは、上の記事の

≫WordPressプラグイン「Rinker」の設定

にズバリと書かれていて、それは単純にひとつのボタンを押すだけ、でした。

「ダッシュボード＞設定＞ Rinker設定」の画面の上記の項目で、上の画像のように「リンク先を詳細画面にする」にチェックを入れるだけです。

すごく簡単です！！　ありがたい！！！

amazonのAPIの設定についてはRinkerの設定ページにあります。

Rinkerを利用するためにはAmazonのAmazon Product Advertising APIの認証キーを取得する必要があります。
Amazon Product Advertising APIの認証キーを取得からキーを取得して、アクセスキーID、シークレットキーを登録してください。
認証キーの詳しい取得方法はAmazon Product Advertising APIの認証キー取得方法にも記載しています。

そんなわけでRinker導入を決めたのでした。

PA-APIについてはこちらの記事もわかりやすくて、とてもスッキリしました。